/* =========================================================================
   LA LOCURA BISTROT · SITO 1 · IL FILM CORTO (13/11/2026)
   Tre colori soli: nero piastra, crema della carta, cheddar (solo la riga attiva). Un carattere: Archivo variabile.
   Il motore: #film e' la pista alta, #palco la scena che resta ferma (sticky, quindi la tiene il browser, non il JS)
   e ogni capitolo e' uno .strato sovrapposto che film.js accende in un tratto di scroll. I passaggi sono dissolvenze sul posto.
   Tutte le misure verticali del palco sono in vh "grandi" (lvh): la barra di Safari che entra ed esce non sposta niente,
   e i testi in basso stanno sopra la fascia che la barra puo' coprire (--sotto).
   ========================================================================= */
@font-face { font-family: 'Archivo'; src: url(font/Archivo-400-900.woff2) format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }

:root {
  --nero: #0E0B0A;
  --crema: #F4E8D2;
  --cheddar: #F5A800;
  /* i nomi che usa il pacchetto legale (legale.css, carta.css): stessi tre colori, niente quarto */
  --carta: #F4E8D2; --inchiostro: #0E0B0A; --brace: #0E0B0A; --fondo: #0E0B0A;
  --serif: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bastone: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --T: 2260;                 /* altezza della pista in vh: l'ultimo capitolo finisce a 2160, piu' una schermata */
  --sotto: 9vh;              /* da dove partono i testi in basso */
  --lato: 5vw;
}
@supports (height: 100svh) { :root { --sotto: calc(100lvh - 100svh + 7vh); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--nero); }
body { margin: 0; background: var(--nero); color: var(--crema); font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400; font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }
img, video, canvas { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: fixed; left: 12px; top: -60px; z-index: 500; background: var(--crema); color: var(--nero); padding: 10px 16px; font-weight: 700; }
.salta:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--crema); outline-offset: 3px; }

.occhiello { font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; line-height: 1.3; }
.bottone { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 28px; border: 1.5px solid var(--crema); border-radius: 99px;
  font-size: 13.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; line-height: 1.1; text-align: center; transition: background .2s, color .2s; }
.bottone.pieno { background: var(--crema); color: var(--nero); }
.bottone:hover { background: var(--crema); color: var(--nero); }
.bottone.pieno:hover { background: transparent; color: var(--crema); }

/* ---------- la pista e il palco ---------- */
#film { position: relative; height: calc(var(--T) * 1vh); }
#palco { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--nero); }
.strato { position: absolute; inset: 0; background: var(--nero); display: none; opacity: 0; visibility: hidden; pointer-events: none; overflow: hidden; }
.strato.vicino { display: block; }
.strato.vivo { visibility: visible; }
.strato.tocca { pointer-events: auto; }
#apertura { display: block; }

/* le battute: una alla volta, entrano dal basso, restano ferme, escono in alto */
.pila { display: grid; }
.pila > * { grid-area: 1 / 1; }
.battuta { font-weight: 700; letter-spacing: -.04em; line-height: .98; font-size: clamp(34px, min(5.6vw, 10vh), 96px); text-wrap: balance;
  opacity: 0; transform: translateY(.55em); transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1); will-change: transform, opacity; }
.battuta.su { opacity: 1; transform: none; }
.battuta.dopo { opacity: 0; transform: translateY(-.55em); }
.pila.basso { position: absolute; left: var(--lato); bottom: var(--sotto); width: min(62vw, 980px); align-items: end; z-index: 3; }

/* testata del palco (dopo l'apertura) e barra a trattini */
#testa { position: absolute; left: 0; right: 0; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: flex-start; padding: 18px var(--lato) 0; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
#palco.oltre #testa { opacity: 1; visibility: visible; }
#testa a { pointer-events: auto; }
.te-logo img { width: 74px; height: auto; }
.te-tel { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border: 1.5px solid var(--crema); border-radius: 99px; background: var(--nero); font-size: 14px; font-weight: 800; letter-spacing: .06em; text-decoration: none; }
#trattini { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; gap: 9px; align-items: flex-end; opacity: 0; transition: opacity .4s; }
#palco.oltre #trattini { opacity: 1; }
#trattini i { display: block; width: 14px; height: 3px; background: var(--crema); transition: width .3s, background .3s; }
#trattini i.qui { width: 30px; background: var(--cheddar); }

/* ---------- 1 · apertura ---------- */
.ap-colonne { position: absolute; inset: 0; display: flex; }
.ap-col { position: relative; flex: 1 1 0; height: 100%; overflow: hidden; }
.ap-col img, .ap-col video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ap-col video { opacity: 0; transition: opacity .5s; }
.ap-col video.va { opacity: 1; }
.ap-scuro { position: absolute; inset: 0; background: rgba(14, 11, 10, .55); }
.ap-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3vh 6vw 6vh; }
.ap-logo { width: auto; height: min(46vh, 40vw); aspect-ratio: 800 / 686; }
#apertura h1 { margin-top: 2.6vh; font-size: 15px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; line-height: 1.4; }
.ap-dal { margin-top: .9vh; font-size: clamp(22px, 2.6vw, 38px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.ap-bottoni { margin-top: 3.4vh; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.ap-bottoni .bottone:not(.pieno) { background: rgba(14, 11, 10, .5); }
.ap-bottoni .bottone:not(.pieno):hover { background: var(--crema); }
.ap-scorri { position: absolute; left: 0; right: 0; bottom: calc(var(--sotto) - 5vh); text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.ap-scorri::after { content: ''; display: block; width: 1.5px; height: 22px; margin: 8px auto 0; background: var(--crema); animation: scorri 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes scorri { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* ---------- 2 e 3 · le sequenze: la ripresa verticale al centro, i bordi che sfumano nel nero ---------- */
.tela-col { position: absolute; top: 0; bottom: 0; left: 36vw; right: 0; height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 100%); }
#monta .tela-col { left: 25vw; right: 27vw; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.tela-col canvas { width: 100%; height: 100%; }
.fumo-basso { display: none; }
.lato-testo { position: absolute; left: var(--lato); top: 50%; transform: translateY(-50%); width: 31vw; z-index: 3; }
.lato-testo .occhiello { margin-bottom: 2.4vh; }
.lato-testo .pila { align-items: center; min-height: 3.2em; font-size: clamp(34px, min(4.5vw, 9vh), 78px); }
.lato-testo .battuta { font-size: 1em; }
.lato-nota { position: absolute; left: var(--lato); bottom: 17vh; width: 24vw; z-index: 3; font-size: clamp(16px, 1.35vw, 21px); line-height: 1.35; font-weight: 400; }
.mo-frase { font-weight: 700; letter-spacing: -.04em; line-height: .98; font-size: clamp(34px, min(4.5vw, 9vh), 78px); }

/* il foglietto di carta crema: la comanda */
.foglietto { position: absolute; right: 5.5vw; top: 50%; width: min(25vw, 380px); transform: translateY(-50%) rotate(1.4deg); z-index: 3; background: var(--crema); color: var(--nero); padding: 26px 26px 30px 30px; }
.fo-logo { width: 84px; height: auto; margin: 0 0 16px; }
.fo-righe { border-top: 1.5px dashed var(--nero); padding-top: 14px; counter-reset: riga; }
.fo-righe li { position: relative; counter-increment: riga; padding: 7px 0 7px 34px; font-size: clamp(17px, 1.45vw, 22px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.fo-righe li::before { content: attr(data-n); position: absolute; left: 4px; top: 9px; font-size: 13px; font-weight: 800; letter-spacing: 0; }
.fo-righe li span { display: inline; padding: 2px 6px; margin-left: -6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.fo-righe li.attiva span { background: var(--cheddar); }
/* il segno a penna accanto alla riga attiva */
.fo-righe li::after { content: ''; position: absolute; left: -46px; top: 50%; width: 40px; height: 22px; margin-top: -11px; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22'%3E%3Cpath d='M2 12c7-3 15-4 31-2M26 3c3 3 6 5 10 7-4 2-8 5-11 9' fill='none' stroke='%23F4E8D2' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.fo-righe li.attiva::after { opacity: 1; }

/* ---------- 4 · vietato mordere lo schermo ---------- */
.vi-macro { position: absolute; left: 0; top: 0; width: 56vw; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 100%); mask-image: linear-gradient(90deg, #000 62%, transparent 100%); }
.vi-velo { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 11, 10, .92) 0, rgba(14, 11, 10, .55) 34%, rgba(14, 11, 10, 0) 62%); }
.vi-riq { position: absolute; right: 7vw; top: 46%; width: min(33vw, 64vh); aspect-ratio: 1; transform: translateY(-50%); overflow: hidden; }
.vi-riq img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vi-riq .vi-b { object-position: 50% 12%; visibility: hidden; }
.vi-riq.b .vi-b { visibility: visible; }

/* ---------- 5 · il ponte ---------- */
.po-quadro { position: absolute; top: 0; bottom: 0; left: 31vw; right: 5vw; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%); }
.po-quadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.po-a { object-position: 50% 52%; transform-origin: 47% 47%; }
.po-b { object-position: 50% 78%; transform-origin: 36% 62%; visibility: hidden; }
.po-quadro.b .po-a { visibility: hidden; }
.po-quadro.b .po-b { visibility: visible; }
.po-velo { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 11, 10, .9) 0, rgba(14, 11, 10, .5) 30%, rgba(14, 11, 10, 0) 56%); opacity: 0; transition: opacity .5s; }
#ponte.detto .po-velo { opacity: 1; }

/* ---------- 6 · i panini di cui si parla ---------- */
.pa-nastro { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 3vh; overflow: hidden; }
.pa-riga { white-space: nowrap; font-weight: 900; font-size: 30vh; line-height: .86; letter-spacing: -.03em; text-transform: uppercase;
  color: var(--nero); -webkit-text-stroke: 2px rgba(244, 232, 210, .5); paint-order: stroke fill; }
.pa-riga span { display: inline-block; will-change: transform; animation: nastro 70s linear infinite; animation-play-state: paused; }
.pa-riga.r2 span { animation-direction: reverse; }
#panini.vivo .pa-riga span { animation-play-state: running; }
@keyframes nastro { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pa-sinistra { position: absolute; left: var(--lato); top: 50%; transform: translateY(-50%); z-index: 4; }
.pa-sinistra .occhiello { margin-bottom: 2.6vh; }
.pa-nomi li { line-height: 1; }
.pa-nomi button { display: block; padding: .09em 0; font-weight: 800; letter-spacing: -.045em; line-height: 1; font-size: clamp(24px, min(3.9vw, 6.3vh), 60px); text-align: left; color: var(--crema); transition: color .25s; }
.pa-nomi li.attiva button { color: var(--cheddar); }
.pa-conta { display: none; }
.pa-foto { position: absolute; right: 7vw; top: 9vh; width: 46vw; height: 67vh; z-index: 2; }
.pa-foto img { position: absolute; left: 50%; top: 50%; max-width: 100%; max-height: 100%; width: auto; height: auto; opacity: 0; visibility: hidden; will-change: transform, opacity; }
/* le foto intere (non scontornate) sfumano nel nero sui quattro bordi: un rettangolo morbido, non un ovale */
.pa-foto img.piena { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; border-radius: 16px; }
.pa-desc { position: absolute; right: 7vw; width: 46vw; top: 79vh; z-index: 3; justify-items: center; text-align: center; }
.pa-desc p { max-width: 30em; font-size: clamp(18px, 1.55vw, 24px); line-height: 1.35; font-weight: 400; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.pa-desc p.attiva { opacity: 1; transform: none; }

/* ---------- 7 · nel borgo vecchio ---------- */
.bo-sala { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.bo-lato { position: absolute; inset: 0; }
.bo-lato img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; visibility: hidden; }
.bo-lato img:nth-child(2) { object-position: 50% 34%; }
.bo-lato img:nth-child(3) { object-position: 50% 60%; }
.bo-velo { position: absolute; inset: 0; background: var(--nero); opacity: .85; }
.bo-ombra { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 11, 10, .88) 0, rgba(14, 11, 10, .4) 34%, rgba(14, 11, 10, 0) 58%), linear-gradient(180deg, rgba(14, 11, 10, .72) 0, rgba(14, 11, 10, 0) 24%); }
.bo-occhiello { position: absolute; left: var(--lato); top: 15vh; z-index: 3; }
.bo-oblo { position: absolute; left: 68%; top: 50%; width: min(44vw, 84vh); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 2; -webkit-clip-path: circle(0% at 50% 50%); clip-path: circle(0% at 50% 50%); visibility: hidden; }
.bo-oblo img, .bo-oblo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#borgo .pila.basso { width: min(44vw, 760px); }

/* ---------- 8 · a casa tua ---------- */
.ca-sacchetto { position: absolute; right: 13vw; bottom: -5vh; height: 90vh; width: auto; will-change: transform; transform-origin: 30% 42%; }
.ca-porta { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform-origin: 46% 58%; visibility: hidden; will-change: transform; }
.ca-ombra { position: absolute; inset: 0; background: linear-gradient(0deg, #0E0B0A 0, rgba(14, 11, 10, .82) 24%, rgba(14, 11, 10, 0) 60%); visibility: hidden; }
#casa.porta .ca-porta, #casa.porta .ca-ombra { visibility: visible; }
#casa.porta .ca-sacchetto { visibility: hidden; }
.ca-testo { transition: opacity .4s; }
#casa.zoom .ca-testo { opacity: 0; pointer-events: none; }
.ca-vieni { position: absolute; left: var(--lato); bottom: var(--sotto); width: min(62vw, 900px); z-index: 4; pointer-events: none; }
.ca-dove { margin-top: 1.6vh; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.35; }
.ca-via { margin-top: 2.4vh; }
.ca-dove, .ca-via { opacity: 0; transform: translateY(14px); transition: opacity .45s .12s, transform .6s .12s; }
#casa.detto .ca-dove, #casa.detto .ca-via { opacity: 1; transform: none; }
#casa.detto .ca-vieni { pointer-events: auto; }
.ca-testo { position: absolute; left: var(--lato); top: 50%; transform: translateY(-50%); width: 44vw; z-index: 3; }
.ca-testo .occhiello { margin-bottom: 2.4vh; }
.ca-motto { font-weight: 900; letter-spacing: -.045em; line-height: .92; font-size: clamp(40px, min(5.6vw, 13vh), 100px); text-transform: uppercase; }
.ca-motto span { display: block; white-space: nowrap; }
.ca-riga { margin: 3vh 0 3.4vh; max-width: 24em; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.35; }

/* ---------- 9 · la chiusura: pagina normale sullo stesso nero ---------- */
#chiusura { padding: 2vh var(--lato) 0; text-align: center; }
.ch-logo { width: min(34vw, 460px); height: auto; margin: 0 auto; }
#ch-titolo { margin-top: 3vh; font-size: 15px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.ch-numero { font-weight: 900; letter-spacing: -.05em; line-height: 1; font-size: clamp(46px, 9.4vw, 150px); }
.ch-numero a { text-decoration: none; }
.ch-numero a:hover { color: var(--cheddar); }
.ch-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5vw; max-width: 1180px; margin: 6vh auto 0; text-align: left; }
.ch-griglia .occhiello { margin-bottom: 14px; }
.ch-griglia p { font-size: 19px; line-height: 1.4; margin-bottom: 18px; }
.ch-voto { font-weight: 800; }
.ch-ig { text-underline-offset: 4px; }
.domande { max-width: 860px; margin: 7vh auto 0; text-align: left; }
.domande h2 { font-weight: 800; letter-spacing: -.04em; line-height: 1; font-size: clamp(38px, 5vw, 72px); margin-bottom: 26px; }
.domande details { border-top: 1.5px solid rgba(244, 232, 210, .28); }
.domande details:last-child { border-bottom: 1.5px solid rgba(244, 232, 210, .28); }
.domande summary { list-style: none; cursor: pointer; padding: 16px 44px 16px 0; position: relative; font-size: clamp(18px, 1.7vw, 23px); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 28px; font-weight: 400; line-height: 1; }
.domande details[open] summary::after { content: '–'; }
.domande details p { padding: 0 44px 22px 0; font-size: 18px; line-height: 1.5; }
.piede-film { padding: 7vh var(--lato) 4vh; text-align: center; font-size: 14px; line-height: 1.6; }
.piede-film p { margin-bottom: 12px; }
.pf-legale { display: flex; gap: 8px 26px; justify-content: center; flex-wrap: wrap; }
.pf-legale a, .pf-legale button { font-size: 14px; text-decoration: underline; text-underline-offset: 4px; padding: 8px 0; }
.pf-nota { opacity: .78; }

/* la carta dei cookie: il logo vero al posto del nome */
#lg-banner .lg-marchio img { width: 104px; height: auto; margin: 0 auto 4px; display: block; }
#lg-banner, #lg-doc, .carta-legale { letter-spacing: 0; }

/* =========================================================================
   TELEFONO (e finestre strette): una colonna, il soggetto a tutto schermo, i testi in basso
   ========================================================================= */
@media (max-width: 820px) {
  :root { --lato: 6vw; }
  .battuta { font-size: clamp(30px, 9.6vw, 46px); line-height: 1; }
  .pila.basso, #borgo .pila.basso { width: auto; right: 12vw; }
  .te-logo img { width: 58px; }
  #testa { padding-top: 12px; }
  .te-tel { font-size: 13px; padding: 6px 14px; min-height: 40px; }
  #trattini { right: 8px; gap: 8px; }
  #trattini i { width: 9px; }
  #trattini i.qui { width: 18px; }

  .ap-col:nth-child(n+2) { display: none; }
  .ap-logo { height: auto; width: 62vw; max-height: 34vh; }
  #apertura h1 { font-size: 12.5px; letter-spacing: .14em; margin-top: 2.2vh; }
  .ap-dal { font-size: 24px; }
  .ap-bottoni { flex-direction: column; width: min(78vw, 320px); gap: 10px; margin-top: 3vh; }
  .ap-centro { padding-bottom: 12vh; }

  .tela-col { left: 0; width: 100%; aspect-ratio: auto; transform: none; -webkit-mask-image: none; mask-image: none; }
  #piastra .fumo-basso { display: block; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 11, 10, .94) 0, rgba(14, 11, 10, .62) 26%, rgba(14, 11, 10, 0) 52%), linear-gradient(180deg, rgba(14, 11, 10, .7) 0, rgba(14, 11, 10, 0) 20%); }
  .lato-testo { top: auto; transform: none; width: auto; right: 12vw; }
  #piastra .lato-testo { bottom: calc(var(--sotto) + 58px); }
  #piastra .lato-testo .occhiello { margin-bottom: 12px; }
  .lato-testo .pila { font-size: clamp(30px, 9.6vw, 46px); min-height: 2em; align-items: end; }
  .lato-nota { left: var(--lato); right: 12vw; width: auto; bottom: var(--sotto); font-size: 15px; }
  #monta .lato-testo { top: 78px; bottom: auto; }
  #monta .tela-col::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 11, 10, .9) 0, rgba(14, 11, 10, .7) 16%, rgba(14, 11, 10, 0) 34%); }
  .mo-frase { font-size: clamp(28px, 8.4vw, 40px); }
  #monta .lato-testo .occhiello { margin-bottom: 10px; }
  .foglietto { left: var(--lato); right: 12vw; top: auto; bottom: var(--sotto); width: auto; transform: rotate(-.8deg); padding: 14px 16px; }
  .fo-logo { display: none; }
  .fo-righe { border: 0; padding: 0; }
  .fo-righe li { display: none; font-size: 21px; padding: 4px 0 4px 34px; }
  .fo-righe li.attiva { display: block; }
  .fo-righe li::before { top: 8px; font-size: 14px; }
  .fo-righe li::after { display: none; }

  .vi-macro { width: 100%; -webkit-mask-image: none; mask-image: none; }
  .vi-velo { background: linear-gradient(0deg, rgba(14, 11, 10, .95) 0, rgba(14, 11, 10, .7) 40%, rgba(14, 11, 10, .45) 100%); }
  .vi-riq { left: 50%; right: auto; top: 84px; width: min(80vw, 42vh); transform: translateX(-50%); }

  .po-quadro { left: 0; right: 0; -webkit-mask-image: none; mask-image: none; }
  .po-b { object-position: 30% 78%; transform-origin: 46% 66%; }

  .pa-riga { font-size: 19vh; -webkit-text-stroke-width: 1.5px; }
  .pa-nastro { justify-content: flex-start; padding-top: 11vh; gap: 2vh; }
  .pa-sinistra { top: 59vh; transform: none; right: 12vw; }
  .pa-sinistra .occhiello { margin-bottom: 8px; font-size: 12px; }
  .pa-nomi li { display: none; }
  .pa-nomi li.attiva { display: block; }
  .pa-nomi button { font-size: clamp(34px, 11vw, 50px); }
  .pa-conta { display: block; position: absolute; right: 0; top: 0; font-size: 13px; font-weight: 700; letter-spacing: .1em; }
  .pa-foto { left: 5vw; right: 5vw; width: auto; top: 10vh; height: 47vh; }
  .ch-logo { width: 62vw; }
  .pa-desc { left: var(--lato); right: 12vw; width: auto; top: calc(59vh + 88px); justify-items: start; text-align: left; }
  .pa-desc p { font-size: 16px; }

  .bo-oblo { left: 50%; top: 40%; width: min(84vw, 48vh); }
  .ca-vieni { width: auto; right: 12vw; }
  .ca-dove { font-size: 16px; }
  .bo-occhiello { top: 84px; }

  .ca-sacchetto { left: 0; right: 0; margin: 0 auto; bottom: auto; top: 9vh; height: 42vh; }
  .ca-testo { top: auto; bottom: var(--sotto); transform: none; width: auto; right: 12vw; }
  .ca-testo .occhiello { margin-bottom: 10px; }
  .ca-motto { font-size: clamp(32px, 10.4vw, 50px); }
  .ca-riga { margin: 14px 0 18px; font-size: 16px; }

  .ch-logo { width: 78vw; }
  .ch-griglia { grid-template-columns: 1fr; gap: 34px; margin-top: 7vh; }
  .ch-griglia p { font-size: 18px; }
  .domande { margin-top: 9vh; }
  .domande details p { font-size: 17px; }
}

/* telefono basso (barra di Safari, 664 px) e telefono coricato: si stringe quello che sta in alto */
@media (max-width: 820px) and (max-height: 700px) {
  .ap-logo { max-height: 30vh; }
  .ap-bottoni .bottone { min-height: 46px; padding: 10px 20px; }
  .vi-riq { top: 70px; width: min(72vw, 38vh); }
  .ca-sacchetto { height: 36vh; top: 10vh; }
  .ca-riga { margin: 10px 0 14px; }
}
@media (prefers-reduced-motion: reduce) { .ap-scorri::after, .pa-riga span { animation: none; } }