/* LA LOCURA BISTROT · SITO 2, ALLA DOH (13/11/2026)
   "Prima si vola, poi parte il sito". Tre colori: rosso manifesto, crema, nero. Solo nel carosello il fondo cambia a ogni panino.
   Titoli in Anton maiuscolo come i loro manifesti rossi, testo in Archivo. Variabili e caratteri stanno in base.css.
   Regole pagate: niente punto finale sui titoli, testi mai sotto 14 px, etichette mai sotto 12, niente backdrop-filter,
   niente linea dritta fra due colori (i cambi sono pannelli tondi che salgono o avvengono sul posto). */

html { scroll-behavior: auto; background: var(--rosso); }
body { background: var(--rosso); color: var(--crema); font-family: var(--bastone); font-weight: 500; font-size: 17px; line-height: 1.5;
  overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.salta { position: absolute; left: -999px; top: 8px; z-index: 300; background: var(--crema); color: var(--nero); padding: 12px 18px; font-weight: 700; }
.salta:focus { left: 8px; }

/* il fondo di tutta la pagina: fermo, a tinta piena; nel carosello lo colora volo.js */
.fondo { position: fixed; inset: 0; z-index: 0; background: var(--rosso); }
main, .piede { position: relative; z-index: 1; }

/* ---------- la testata ---------- */
.testa { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 72px; padding: 0 clamp(16px, 3.4vw, 48px); display: flex; align-items: center; gap: 28px;
  color: var(--ink, var(--crema)); pointer-events: none; }
.testa > * { pointer-events: auto; }
.testa-logo { position: relative; display: block; width: 62px; height: 53px; flex: none; }
.testa-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.testa-logo .lo-nero { opacity: var(--logo-nero, 0); }
.testa-logo .lo-crema { opacity: calc(1 - var(--logo-nero, 0)); }
.testa-nav { margin-left: auto; display: flex; gap: clamp(18px, 2.4vw, 36px); }
.testa-nav a { font-family: var(--titoli); font-size: 17px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; padding: 10px 0; }
.testa-nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.testa-tel { font-family: var(--titoli); font-size: 17px; letter-spacing: .04em; text-decoration: none; padding: 9px 18px 8px; border: 2px solid currentColor; border-radius: 999px; white-space: nowrap; }
.testa-tel:hover { background: var(--ink, var(--crema)); color: var(--ink-su, var(--rosso)); border-color: var(--ink, var(--crema)); }
/* sotto il volo la testata sta su una fascia piena, cosi' si legge sopra foto e carte */
/* una pillola nera staccata dai bordi: non una riga che taglia la pagina */
.testa.fascia { background: var(--nero); color: var(--crema); --logo-nero: 0; --ink: var(--crema); --ink-su: var(--nero); top: 8px; left: 8px; right: 8px; height: 56px; border-radius: 999px; padding: 0 8px 0 20px; }
.testa.fascia .testa-tel { border-color: var(--rosso); background: var(--rosso); color: var(--crema); }
.testa.fascia .testa-logo { width: 50px; height: 43px; }

/* ---------- i bottoni ---------- */
.bottone { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 4px 26px 2px; border: 2px solid currentColor; border-radius: 999px;
  font-family: var(--titoli); font-size: 19px; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: transform .2s; }
.bottone:hover { transform: translateY(-2px) rotate(-1.2deg); }
.bottone.pieno { background: var(--nero); color: var(--crema); border-color: var(--nero); }

/* ---------- gli adesivi alla CRAV: inclinati, l'angolo si solleva ---------- */
@property --stacca { syntax: '<length>'; inherits: true; initial-value: 0px; }
.adesivo { --gira: -7deg; --stacca: 0px; position: relative; display: inline-block; padding: 12px 20px 9px; background: var(--crema); color: var(--nero);
  font-family: var(--titoli); font-size: 20px; line-height: 1; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; border-radius: 999px 6px 999px 999px;
  transform: rotate(var(--gira)); transition: --stacca .3s ease, transform .3s ease;
  clip-path: polygon(0 0, calc(100% - var(--stacca)) 0, 100% var(--stacca), 100% 100%, 0 100%); }
.adesivo::after { content: ''; position: absolute; top: 0; right: 0; width: var(--stacca); height: var(--stacca);
  background: linear-gradient(to bottom left, transparent 50%, #b9aa8c 50%, #e7d9bd 100%); border-bottom-left-radius: 5px; }
.adesivo:hover { --stacca: 20px; transform: rotate(calc(var(--gira) - 2deg)) scale(1.04); }
.adesivo.tondo { width: 128px; height: 128px; padding: 0; border-radius: 50%; display: grid; place-content: center; text-align: center; font-size: 20px; overflow: hidden; }
.adesivo.tondo b { display: block; font-weight: 400; font-size: 48px; line-height: .95; }
.adesivo.tondo:hover { --stacca: 44px; }

/* ---------- le righe che entrano dal basso ed escono in alto (mai accese a opacita') ---------- */
.riga { display: block; overflow: hidden; padding: .09em .04em .02em; margin: -.09em -.04em -.02em; }
.riga > span { display: block; will-change: transform; }
.js .palco .riga[data-vu] { visibility: hidden; }
.js .palco .ap-titolo .riga { visibility: visible; }

/* =====================================================================================
   PRIMO TEMPO: IL PALCO DEL VOLO (fermo con sticky, lo scroll e' il tempo)
   ===================================================================================== */
.volo { position: relative; height: 1200vh; height: 1200svh; }
.palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; color: var(--ink, var(--crema)); }
.strato { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ap, .ca, .ch, .sa { position: absolute; inset: 0; }
.ap { z-index: 1; } .ca { z-index: 3; pointer-events: none; }
#colata { z-index: 2; }
.ch { z-index: 3; pointer-events: none; }
.sa-bocca { z-index: 3; }
#tela { z-index: 4; }
#giro { z-index: 4; }
.ripiego { z-index: 4; }
.sa-sacco { z-index: 5; }
.sa { z-index: 6; pointer-events: none; }
.sa a { pointer-events: auto; }

/* 1 · l'apertura */
.ap-h1 { position: absolute; left: clamp(16px, 5.2vw, 84px); top: calc(72px + 3.2vh); font-family: var(--bastone); font-weight: 800; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; }
.ap-titolo { position: absolute; left: clamp(16px, 5.2vw, 84px); top: 50%; transform: translateY(-54%); font-family: var(--titoli); text-transform: uppercase;
  font-size: min(10.6vw, 21.5vh); line-height: .93; letter-spacing: -.005em; white-space: nowrap; }
.ap-titolo .r3 { color: var(--nero); }
.ap-bottoni { position: absolute; left: clamp(16px, 5.2vw, 84px); bottom: 7vh; display: flex; gap: 12px; flex-wrap: wrap; }
.ad-2013 { position: absolute !important; left: min(47vw, 700px); top: 17vh; --gira: 11deg; }
.ripiego { position: absolute; right: 0; top: 55.5%; width: min(52vw, 92.6vh); height: auto; transform: translateY(-50%); }
.palco.tela-su .ripiego { display: none; }

/* 3 · il carosello */
.ca-titolo { position: absolute; left: 0; right: 0; top: calc(72px + 2.5vh); text-align: center; font-family: var(--titoli); font-weight: 400; text-transform: uppercase;
  font-size: min(8.2vw, 13.5vh); line-height: 1; margin: 0; }
.ca-nomi li { position: absolute; left: 0; right: 0; bottom: 5.5vh; text-align: center; }
.ca-nomi h3 { font-family: var(--titoli); font-weight: 400; text-transform: uppercase; font-size: min(5.2vw, 8.4vh); line-height: 1; margin: 0; }
.ca-nomi p { font-weight: 700; font-size: clamp(16px, 1.5vw, 22px); letter-spacing: .01em; margin-top: 4px; }

/* 4 · il cheddar */
.ch { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 5vh; text-align: center; }
.ch-a { font-weight: 800; font-size: clamp(18px, 2vw, 28px); line-height: 1.25; }
.ch-b { font-family: var(--titoli); text-transform: uppercase; font-size: min(5.2vw, 8.4vh); line-height: 1.02; margin-top: 4px; }

/* 5 · il sacchetto: le misure le scrive volo.js (stesse coordinate della tela) */
.sa-sacco, .sa-bocca { position: absolute; left: 0; top: 0; visibility: hidden; will-change: transform; }
.sa-sacco { height: auto; max-width: none; }
.sa-bocca { background: #1d0706; border-radius: 10px 10px 0 0; }
.sa-lista, .sa-casa { position: absolute; left: clamp(16px, 6.4vw, 104px); top: 50%; transform: translateY(-46%); width: min(44vw, 620px); }
.sa-conta span { display: flex !important; align-items: baseline; gap: 16px; font-family: var(--titoli); text-transform: uppercase; }
.sa-conta b { font-weight: 400; font-size: min(14vw, 24vh); line-height: .9; color: var(--nero); min-width: .5em; }
.sa-conta i { font-style: normal; font-size: clamp(18px, 2vw, 30px); letter-spacing: .03em; }
.sa-lista ol { margin-top: 1.4vh; }
.sa-lista li { font-family: var(--titoli); text-transform: uppercase; font-size: min(3.6vw, 6vh); line-height: 1.08; }
.sa-casa h2, .sa-h2b { font-family: var(--titoli); font-weight: 400; text-transform: uppercase; font-size: min(8.6vw, 15vh); line-height: .95; margin: 0; }
.sa-h2b { color: var(--nero); }
.sa-come { font-weight: 700; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.35; margin-top: 2.2vh; max-width: 26em; }
.sa-bot { margin-top: 2.6vh; padding-top: 6px; padding-bottom: 6px; }
.sa-bot .bottone { transition: none; }

/* =====================================================================================
   SECONDO TEMPO: IL SITO CHE SCORRE
   ===================================================================================== */
.titolone { font-family: var(--titoli); font-weight: 400; text-transform: uppercase; font-size: clamp(44px, 7.4vw, 124px); line-height: .96; letter-spacing: -.003em; text-wrap: balance; }
.titolone.piccolo { font-size: clamp(36px, 4.6vw, 72px); }
section { scroll-margin-top: 60px; }

/* 6 · scegli il tuo */
.scegli { padding: 4vh clamp(16px, 4vw, 64px) 12vh; }
.scegli .titolone { margin-bottom: 4vh; }
.sc-carta { background: var(--carta-col); color: var(--carta-ink); border-radius: 34px; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 4vw, 64px);
  padding: clamp(20px, 3.4vw, 56px); min-height: min(78vh, 720px); align-items: center; transition: background-color .5s ease, color .5s ease; }
.sc-foto { position: relative; height: 100%; min-height: 300px; }
.sc-foto img, .sc-foto video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translateY(26px) rotate(-5deg) scale(.9); transition: opacity .3s ease, transform .5s cubic-bezier(.2, .9, .25, 1.15); }
.sc-foto .cornice { inset: 4% 14%; width: 72%; height: 92%; object-fit: cover; border-radius: 20px; }
.sc-foto .qui { opacity: 1; transform: none; }
.sc-foto .cornice.qui { transform: rotate(-2.5deg); }
.sc-elenco li { border-bottom: 2px solid color-mix(in srgb, currentColor 22%, transparent); }
.sc-elenco button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 9px 0 5px; cursor: pointer;
  font-family: var(--titoli); text-transform: uppercase; font-size: clamp(26px, 2.9vw, 46px); line-height: 1.05; letter-spacing: .005em; opacity: .5; transition: opacity .25s, padding .25s; }
.sc-elenco button:hover { opacity: .8; }
.sc-elenco button.qui { opacity: 1; padding-left: .5em; }
.sc-elenco button.qui::before { content: ''; display: inline-block; width: .34em; height: .34em; border-radius: 50%; background: currentColor; margin: 0 .3em .16em -.5em; }
.sc-elenco p { display: none; font-weight: 600; font-size: 17px; line-height: 1.4; padding: 0 0 12px .0em; max-width: 30em; }
.sc-elenco button.qui + p { display: block; }
.sc-chiama { margin-top: 26px; }

/* 7 · la frase */
.frase { position: relative; padding: 10vh clamp(16px, 4vw, 64px) 14vh; text-align: center; }
.frase h2 { font-family: var(--titoli); font-weight: 400; text-transform: uppercase; line-height: .92; }
.frase .fr-1 { display: block; font-size: min(11.4vw, 200px); }
.frase .fr-2 { display: block; font-size: min(24vw, 440px); color: var(--nero); white-space: nowrap; }
.fr-sotto { font-family: var(--titoli); text-transform: uppercase; font-size: clamp(22px, 3vw, 46px); letter-spacing: .02em; margin-top: 2vh; }
.ad-hash { position: absolute !important; right: 9vw; top: 9vh; --gira: 8deg; }

/* 8 · tre passi: carte impilate che salgono e coprono */
.passi { padding: 6vh clamp(16px, 4vw, 64px) 12vh; }
.passi .titolone { max-width: 12em; margin-bottom: 5vh; }
.pa-pila { overflow: clip; padding-bottom: 2vh; }
.pa-carta { position: sticky; top: 78px; height: calc(100vh - 102px); height: calc(100svh - 102px); max-height: 820px; }
.pa-carta + .pa-carta { margin-top: 50vh; }
.pa-dentro { height: 100%; border-radius: 34px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; transform-origin: 50% 0; will-change: transform; }
.c1 .pa-dentro, .c3 .pa-dentro { background: var(--crema); color: var(--nero); }
.c2 .pa-dentro { background: var(--nero); color: var(--crema); }
.pa-testo { padding: clamp(22px, 3.6vw, 60px); display: flex; flex-direction: column; justify-content: flex-end; }
.pa-num { font-family: var(--titoli); font-size: min(24vw, 44vh); line-height: .8; color: var(--rosso); margin-bottom: auto; }
.pa-testo h3 { font-family: var(--titoli); font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 5vw, 84px); line-height: .96; text-wrap: balance; }
.pa-testo h3 + p { font-weight: 700; font-size: clamp(17px, 1.6vw, 24px); margin-top: 12px; }
.pa-media { position: relative; min-height: 0; }
.pa-media img, .pa-media video, .sc-foto video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }

/* 9 · i panini di cui si parla: il pannello nero che sale */
.panini { background: var(--nero); color: var(--crema); border-radius: 44px 44px 0 0; padding: 11vh clamp(16px, 5vw, 84px) 8vh; }
.pn-elenco { margin-top: 6vh; columns: 2; column-gap: clamp(28px, 6vw, 110px); }
.pn-elenco li { break-inside: avoid; padding: 16px 0 15px; border-bottom: 2px solid rgba(244, 232, 210, .2); }
.pn-elenco h3 { font-family: var(--titoli); font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 3.4vw, 54px); line-height: 1.02; }
.pn-elenco p { font-size: 17px; line-height: 1.45; color: rgba(244, 232, 210, .84); margin-top: 4px; max-width: 34em; }
.pn-anche { font-family: var(--titoli); text-transform: uppercase; font-size: clamp(24px, 3vw, 46px); line-height: 1.05; color: var(--rosso); margin-top: 8vh; }
.pn-tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 2vw, 28px); margin-top: 3vh; max-width: 860px; }
.pn-tre li { position: relative; }
.pn-tre img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 22px; }
.pn-tre h3 { font-family: var(--titoli); font-weight: 400; text-transform: uppercase; font-size: clamp(22px, 2.6vw, 40px); line-height: 1; margin-top: 12px; }
.pn-happy { margin-top: 10vh; display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: clamp(20px, 5vw, 80px); align-items: center; }
.pn-happy img { width: 100%; height: auto; border-radius: 22px; transform: rotate(-2deg); }
.pn-happy h3 { font-family: var(--titoli); font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 5vw, 84px); line-height: .96; text-wrap: balance; }
.pn-happy p { font-size: clamp(17px, 1.5vw, 21px); margin-top: 14px; max-width: 30em; color: rgba(244, 232, 210, .84); }

/* 10 · dove (continua sul nero: nessuna giunta) */
.dove { background: var(--nero); color: var(--crema); padding: 8vh clamp(16px, 5vw, 84px) 12vh; display: grid; grid-template-columns: 1fr 1fr; gap: 6vh clamp(28px, 6vw, 110px); margin-top: -1px; }
.dv-foto { grid-column: 1 / -1; position: relative; }
.dv-foto img { width: 100%; height: min(68vh, 62vw); object-fit: cover; border-radius: 34px; }
.ad-aperto { position: absolute !important; left: clamp(14px, 3vw, 44px); bottom: clamp(14px, 3vw, 44px); --gira: -6deg; background: var(--rosso); color: var(--crema); font-size: clamp(20px, 2.4vw, 34px); padding: 16px 28px 12px; }
.ad-aperto::after { background: linear-gradient(to bottom left, transparent 50%, #7d0407 50%, #b3060b 100%); }
.dv-dati { margin-top: 4vh; }
.dv-dati div { display: grid; grid-template-columns: 7.2em 1fr; gap: 14px; padding: 13px 0; border-bottom: 2px solid rgba(244, 232, 210, .2); }
.dv-dati dt { font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; padding-top: 4px; color: rgba(244, 232, 210, .72); }
.dv-dati dd { font-size: 18px; font-weight: 600; }
.dv-bottoni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4vh; }
.dove .bottone.pieno { background: var(--rosso); border-color: var(--rosso); }
.do-elenco { margin-top: 3vh; }
.do-elenco details { border-bottom: 2px solid rgba(244, 232, 210, .2); }
.do-elenco summary { list-style: none; cursor: pointer; padding: 16px 44px 14px 0; position: relative; font-weight: 700; font-size: 18px; }
.do-elenco summary::-webkit-details-marker { display: none; }
.do-elenco summary::after { content: '+'; position: absolute; right: 4px; top: 6px; font-family: var(--titoli); font-size: 30px; color: var(--rosso); transition: transform .25s; }
.do-elenco details[open] summary::after { transform: rotate(45deg); }
.do-elenco p { padding: 0 0 18px; color: rgba(244, 232, 210, .84); max-width: 34em; }

/* 11 · il finale: il pannello rosso che sale, il logo vero enorme */
.finale { background: var(--rosso); border-radius: 44px 44px 0 0; margin-top: -44px; padding: 12vh 4vw 16vh; text-align: center; }
.fi-logo { width: min(92vw, 96vh); height: auto; margin: 0 auto; }
.fi-motto { font-family: var(--titoli); text-transform: uppercase; font-size: clamp(22px, 3vw, 46px); letter-spacing: .03em; margin-top: 5vh; }

/* il piede nero, anche lui un pannello tondo */
.piede { background: var(--nero); color: var(--crema); border-radius: 44px 44px 0 0; margin-top: -44px; padding: 9vh clamp(16px, 5vw, 84px) 5vh; }
.pi-colonne { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 4vw, 60px); }
.piede h2 { font-family: var(--titoli); font-weight: 400; text-transform: uppercase; font-size: clamp(26px, 2.6vw, 40px); color: var(--rosso); margin-bottom: 10px; }
.piede p { font-size: 16.5px; line-height: 1.55; margin-bottom: 8px; }
.piede a { text-underline-offset: 4px; }
.pi-fondo { margin-top: 7vh; padding-top: 22px; border-top: 2px solid rgba(244, 232, 210, .2); display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; justify-content: space-between; }
.pi-fondo p { font-size: 14px; margin: 0; color: rgba(244, 232, 210, .78); }
.pi-legale { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; }
.pi-pref { background: none; border: 0; padding: 0; cursor: pointer; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; color: inherit; }

/* =====================================================================================
   IL TELEFONO (una sola volta, qui)
   ===================================================================================== */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .testa { height: 58px; gap: 12px; }
  .testa-logo { width: 50px; height: 43px; }
  .testa-nav { display: none; }
  .testa-tel { margin-left: auto; font-size: 16px; padding: 8px 14px 7px; }
  .bottone { min-height: 48px; font-size: 17px; padding: 4px 18px 2px; }

  .ap-h1 { top: 64px; left: 16px; right: 12px; font-size: 12px; letter-spacing: .015em; white-space: nowrap; }
  .ap-titolo { left: 16px; top: 88px; transform: none; font-size: min(18.6vw, 13.2svh); line-height: .92; }
  .ap-bottoni { left: 16px; right: 16px; bottom: 16px; gap: 8px; flex-wrap: nowrap; }
  .ap-bottoni .bottone { flex: 1 1 auto; padding-left: 10px; padding-right: 10px; }
  .ad-2013 { left: auto; right: 14px; top: 96px; width: 84px !important; height: 84px !important; font-size: 14px !important; }
  .ad-2013 b { font-size: 30px !important; }
  .ripiego { right: 0; left: 0; width: 100vw; top: auto; bottom: 70px; transform: none; }

  .ca-titolo { top: 66px; font-size: min(11.6vw, 9svh); }
  .ca-nomi li { bottom: 4svh; }
  .ca-nomi h3 { font-size: min(13vw, 9svh); }
  .ca-nomi p { font-size: 16px; }
  .ch { padding-bottom: 4svh; }
  .ch-a { font-size: 17px; }
  .ch-b { font-size: min(13vw, 9svh); }

  .sa-lista, .sa-casa { left: 16px; right: 16px; width: auto; top: 66px; transform: none; }
  .sa-conta b { font-size: min(21vw, 13svh); }
  .sa-conta i { font-size: 17px; }
  .sa-lista ol { margin-top: 2px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .sa-lista li { font-size: min(7vw, 4.6svh); }
  .sa-casa h2, .sa-h2b { font-size: min(15.4vw, 10.4svh); }
  .sa-come { font-size: 16px; margin-top: 8px; }
  .sa-bot { margin-top: 8px; }

  .titolone { font-size: clamp(40px, 12.4vw, 72px); }
  .scegli { padding-bottom: 9vh; }
  .sc-carta { grid-template-columns: 1fr; border-radius: 26px; padding: 18px 18px 22px; gap: 10px; min-height: 0; }
  .sc-foto { height: 62vw; min-height: 0; }
  .sc-foto .cornice { inset: 2% 20%; width: 60%; height: 96%; }
  .sc-elenco button { font-size: 30px; padding: 8px 0 4px; }
  .sc-elenco p { font-size: 16px; }
  .frase { padding: 6vh 16px 12vh; }
  .frase .fr-1 { font-size: 12.4vw; }
  .frase .fr-2 { font-size: 22.5vw; }
  .ad-hash { position: relative !important; right: auto; top: auto; margin-top: 4vh; }
  .passi { padding-top: 2vh; }
  .pa-carta { top: 72px; height: calc(100svh - 86px); }
  .pa-carta + .pa-carta { margin-top: 40vh; }
  .pa-dentro { grid-template-columns: 1fr; grid-template-rows: auto 1fr; border-radius: 26px; }
  .pa-testo { padding: 16px 18px 14px; display: block; position: relative; }
  .pa-num { font-size: 76px; line-height: .9; margin: 0; position: absolute; right: 16px; top: 12px; }
  .pa-testo h3 { font-size: min(11vw, 44px); max-width: 6.4em; }
  .pa-testo h3 + p { font-size: 16px; margin-top: 6px; }
  .panini { border-radius: 30px 30px 0 0; padding-top: 8vh; }
  .pn-elenco { columns: 1; margin-top: 4vh; }
  .pn-elenco p { font-size: 16px; }
  .pn-tre img { border-radius: 14px; }
  .pn-happy { grid-template-columns: 1fr; margin-top: 8vh; }
  .dove { grid-template-columns: 1fr; padding-top: 6vh; }
  .dv-foto { margin: 0 -16px; }
  .dv-foto img { height: auto; aspect-ratio: 4 / 5; border-radius: 0; }
  .dv-dati div { grid-template-columns: 5.6em 1fr; }
  .dv-dati dt { font-size: 12px; }
  .dv-dati dd { font-size: 17px; }
  .dv-bottoni .bottone { flex: 1 1 auto; }
  .finale, .piede { border-radius: 30px 30px 0 0; margin-top: -30px; }
  .finale { padding: 9vh 4vw 12vh; }
  .pi-colonne { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .piede p { font-size: 16px; }
  .pi-fondo { display: block; }
  .pi-fondo p { margin-bottom: 10px; }
}

/* il telefono coricato: e' un terzo dispositivo, si misura in altezza */
@media (orientation: landscape) and (max-height: 520px) {
  .testa { height: 50px; }
  .ap-h1 { top: 52px; font-size: 12px; }
  .ap-bottoni { bottom: 4vh; }
  .ap-bottoni .bottone, .sa-bot .bottone { min-height: 42px; font-size: 16px; }
  .ad-2013 { display: none; }
  .ca-titolo { top: 50px; }
  .pa-carta { top: 56px; height: calc(100svh - 64px); }
  .pa-num { font-size: 30vh; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-foto img, .sc-foto video, .bottone, .adesivo { transition: none; }
}