/* =====================================================================================================================================
   LA LOCURA BISTROT · SITO 3, ELEGANTE E PULITO (13/11/2026)
   Carta crema (quella della loro carta dei panini), inchiostro, e il rosso Locura per UNA cosa sola: una parola per titolo.
   La pagina scorre libera: lo scroll non comanda nessuna immagine e nessun video. Si muovono solo tre cose, a tempo:
   i pezzi che entrano quando arrivano in vista (opacita' + 16 px, una volta), la parola che si rimonta nell'apertura, i video muti.
   LA MAPPA STRUTTURA: ogni parte si apre col CARTELLO (passo 02 / 07, il filo, il titolo con la parola rossa) e si chiude con la
   riga "Poi:" che porta alla parte dopo. Le parti non sono impaginate uguali: tre riquadri, tre tempi in fila, elenco e foto,
   tre video, colonna da leggere, foto grande e dati, sacchetto al centro. In fondo la crema scende nel nero con una sfumatura lunga.
   Fonti dei meccanismi: Patty&Bun (tre pannelli affiancati), reel bbistromiami (lo stesso piatto in tre tempi), reel hedo_restaurant
   (la riga sceglie, il piatto risponde), la parola che si rimonta del reel-05 (quaderno, 02-mattoni).
   ===================================================================================================================================== */
:root { --m: clamp(20px, 5vw, 72px); --largo: 1440px; --tondo: 4px; }
html { scroll-behavior: smooth; scroll-padding-top: 18px; }
body { background: var(--crema); color: var(--inchiostro); font-family: var(--bastone); font-weight: 400; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }
::selection { background: var(--inchiostro); color: var(--crema); }
.nb { white-space: nowrap; }
address { font-style: normal; }
.salta { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--inchiostro); color: var(--crema); padding: 12px 18px; font-size: 14px; }
.salta:focus { top: 12px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---- i titoli: Fraunces, una parola rossa (peso 500 al posto del corsivo: il corsivo nel file non c'e' e non si finge) ---- */
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.032em; line-height: .96; }
h1 em, h2 em { font-style: normal; font-weight: 500; color: var(--rosso); }
h1 { font-size: clamp(64px, 11.2vw, 166px); }
h2 { font-size: clamp(44px, 6.3vw, 98px); }

/* ---- i bottoni: inchiostro su crema ---- */
.bottone { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px; padding: .8em 1.5em; border: 1px solid var(--inchiostro); border-radius: 999px;
  font-family: var(--bastone); font-weight: 600; font-size: 14.5px; letter-spacing: .03em; line-height: 1.1; text-decoration: none; white-space: nowrap; color: var(--inchiostro);
  transition: background-color .3s ease, color .3s ease; }
.bottone:hover { background: var(--inchiostro); color: var(--crema); }
.bottone.pieno { background: var(--inchiostro); color: var(--crema); }
.bottone.pieno:hover { background: transparent; color: var(--inchiostro); }
.bottone svg { width: 17px; height: 17px; flex: none; }

/* ---- la testata: sottile, in pagina (non segue lo scroll) ---- */
.testa { max-width: var(--largo); margin: 0 auto; padding: 14px var(--m) 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.testa-logo { display: block; }
.testa-logo img { height: 54px; width: auto; }

/* ============ LA MAPPA STRUTTURA: il cartello e la riga "Poi:" ============ */
.passo { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(16px, 2.2vw, 28px); font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: .2em; color: var(--ink-60); white-space: nowrap; }
.passo b { font-weight: 700; color: var(--inchiostro); }
.passo::after { content: ''; flex: 1; height: 1px; background: var(--ink-15); }          /* il filo */
.cartello.centro { text-align: center; }
.cartello.centro .passo::before { content: ''; flex: 1; height: 1px; background: var(--ink-15); }
.cartello.largo { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 40px; }
.cartello.largo .passo { grid-column: 1 / -1; }
.ct-sotto { font-family: var(--serif); font-size: clamp(22px, 2.3vw, 34px); line-height: 1.15; letter-spacing: -.015em; color: var(--ink-80); padding-bottom: .22em; }
.poi { display: flex; align-items: center; gap: 18px; margin-top: clamp(40px, 7vh, 76px); }
.poi::before { content: ''; flex: 1; height: 1px; background: var(--ink-15); }
.poi a { display: inline-flex; align-items: baseline; gap: 12px; min-height: 44px; padding: 8px 0; text-decoration: none; font-family: var(--serif); font-size: clamp(20px, 1.7vw, 25px); line-height: 1.2; letter-spacing: -.01em;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 6px) / 0 1px no-repeat; transition: background-size .4s ease; }
.poi a:hover { background-size: 100% 1px; }
.poi span { font-family: var(--bastone); font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-60); }
.poi i { font-style: normal; font-family: var(--bastone); font-size: 18px; }

.parte { max-width: var(--largo); margin: 0 auto; padding: clamp(64px, 12vh, 124px) var(--m) 0; }
.cornice { position: relative; overflow: hidden; border-radius: var(--tondo); background: var(--crema2); }
.cornice img, .cornice video { width: 100%; height: 100%; object-fit: cover; }
.cornice.v { aspect-ratio: 9 / 16; }

/* ============ 01 · L'APERTURA: il giornale a tre riquadri ============ */
.apertura { max-width: var(--largo); margin: 0 auto; padding: clamp(14px, 2.6vh, 26px) var(--m) 0; }
.apertura .passo { margin-bottom: clamp(10px, 1.6vh, 18px); }
.ap-sotto { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; margin-top: clamp(14px, 2.4vh, 24px); }
.ap-riga { font-size: 16px; line-height: 1.4; color: var(--ink-80); margin-bottom: 6px; }
.ap-giro { font-family: var(--serif); font-size: clamp(27px, 2.7vw, 40px); line-height: 1.3; letter-spacing: -.018em; white-space: nowrap; }
/* la parola che si rimonta: una feritoia alta una riga, le lettere salgono da sotto il bordo ed escono da sopra (carta.js) */
.feritoia { display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3; vertical-align: bottom; white-space: nowrap; color: var(--rosso); font-weight: 500; min-width: 1em; }
.lt { display: inline-block; white-space: pre; transition: transform .5s cubic-bezier(.2, .75, .2, 1); will-change: transform; }
.lt.sotto { transform: translateY(108%); }
.lt.sopra { transform: translateY(-108%); transition: transform .42s cubic-bezier(.6, 0, .8, .3); }
.ap-bottoni { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 4px; }
.tre { display: grid; grid-template-columns: 1.22fr 1fr auto; gap: clamp(10px, 1.5vw, 22px); height: clamp(280px, 43vh, 460px); margin-top: clamp(18px, 3.2vh, 30px); }
.riq { position: relative; overflow: hidden; border-radius: var(--tondo); background: var(--crema2); min-height: 0; }
.riq img { width: 100%; height: 100%; object-fit: cover; }
.r-panino img { object-fit: contain; padding: 5% 9% 13%; }
.r-panino figcaption { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-weight: 600; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.r-porta img { object-position: 42% 50%; }
.r-manifesto { background: var(--rosso); height: 100%; aspect-ratio: 1127 / 1396; }
.apertura .poi { margin-top: clamp(14px, 2.6vh, 28px); }

/* ============ 02 · PRIMA, ADESSO, FRA CINQUE MINUTI ============ */
.tempi-fila { list-style: none; padding: 0; margin: clamp(26px, 4.4vh, 46px) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); }
.tempi-fila .cornice { aspect-ratio: 1 / 1; }
.tempo { margin-top: 14px; font-family: var(--serif); font-size: clamp(22px, 2vw, 30px); line-height: 1.2; letter-spacing: -.015em; }

/* ============ 03 · I PANINI DI CUI SI PARLA: elenco a righe a sinistra, una foto sola a destra ============ */
.pn-griglia { display: grid; grid-template-columns: minmax(0, 1fr) min(34vw, 470px); column-gap: clamp(30px, 6.5vw, 100px); align-items: start; margin-top: clamp(26px, 4.4vh, 46px); }
.pn-foto { grid-column: 2; grid-row: 1; }
.righe { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 0; }
.pn-foto .cornice { aspect-ratio: 4 / 5; }
.pn-foto img { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.pn-foto img.su { opacity: 1; }
.pn-foto img.sta { object-fit: contain; padding: 9%; }
.riga { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 14px; row-gap: 2px; width: 100%; min-height: 58px; padding: 13px 0 14px; border: 0; border-top: 1px solid var(--ink-15);
  background: none; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.righe li:last-child .riga { border-bottom: 1px solid var(--ink-15); }
.rg-nome { font-family: var(--serif); font-size: clamp(25px, 2.35vw, 35px); line-height: 1.12; letter-spacing: -.02em; }
.rg-punti { align-self: end; height: 0; margin-bottom: .42em; border-bottom: 2px dotted var(--ink-60); opacity: .55; transition: opacity .35s ease; }
.rg-desc { grid-column: 1 / -1; max-width: 44em; font-size: 15px; line-height: 1.45; color: var(--ink-60); }
.riga[aria-pressed="true"] .rg-nome { font-weight: 500; }
.riga[aria-pressed="true"] .rg-punti { border-bottom-style: solid; border-bottom-width: 1px; border-color: var(--inchiostro); opacity: 1; }
.riga[aria-pressed="true"] .rg-desc { color: var(--inchiostro); }
.happy { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); margin-top: clamp(30px, 5vh, 54px); max-width: 620px; }
.happy img { width: clamp(104px, 11vw, 150px); flex: none; border-radius: var(--tondo); }
.happy h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2vw, 29px); line-height: 1.15; letter-spacing: -.015em; margin-bottom: 8px; }
.happy p { font-size: 15.5px; line-height: 1.45; color: var(--ink-80); }

/* la fascia breve "E poi": tre foto ad arco in fila, una parola sotto ciascuna (le altre tre cose della loro bio) */
.epoi { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2.4vw, 36px); align-items: end; margin-top: clamp(64px, 12vh, 124px); }
.epoi h3 { grid-column: 1 / span 3; align-self: start; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 76px); line-height: 1; letter-spacing: -.03em; }
.ep-fila { grid-column: 5 / span 8; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 30px); align-items: end; }
.ep-fila li:nth-child(2) { padding-bottom: clamp(20px, 5vh, 54px); }
.arco { overflow: hidden; aspect-ratio: 3 / 4; border-radius: 999px 999px var(--tondo) var(--tondo); background: var(--crema2); }
.arco img { width: 100%; height: 100%; object-fit: cover; }
.ep-fila p { margin-top: 12px; text-align: center; font-family: var(--serif); font-size: clamp(20px, 1.9vw, 28px); line-height: 1.2; letter-spacing: -.015em; }

/* ============ 04 · DALLA CUCINA: tre video verticali alti uguale ============ */
.cucina h2 { font-size: clamp(42px, 5.4vw, 84px); }
.cu-fila { display: flex; justify-content: center; gap: clamp(14px, 2vw, 30px); margin-top: clamp(20px, 3.4vh, 36px); }
.cu-fila figure { flex: 0 0 auto; width: min(23vw, calc((100vh - 268px) * .5625)); min-width: 200px; }
.cu-fila figcaption { margin-top: 12px; text-align: center; font-weight: 600; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.cu-frasi { margin-top: clamp(64px, 13vh, 140px); }
.frase-g { font-family: var(--serif); font-size: clamp(50px, 9vw, 140px); line-height: .96; letter-spacing: -.036em; }
.frase-m { margin: clamp(26px, 5vh, 54px) 0 0 auto; max-width: 19em; font-family: var(--serif); font-size: clamp(23px, 2.7vw, 40px); line-height: 1.2; letter-spacing: -.018em; color: var(--ink-80); }

/* ============ 05 · PERCHE' SI CHIAMA COSI': una colonna stretta, da leggere ============ */
.nome { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2.4vw, 36px); align-items: center; }
.no-colonna { grid-column: 2 / span 6; }
.no-colonna h2 { font-size: clamp(42px, 5.4vw, 84px); }
.no-testo { margin-top: clamp(22px, 3.6vh, 40px); max-width: 25em; font-family: var(--serif); font-size: clamp(20px, 1.75vw, 26px); line-height: 1.5; letter-spacing: -.008em; }
.no-vetro { grid-column: 8 / span 4; }
.no-vetro .cornice { aspect-ratio: 1 / 1; }
.motto { grid-column: 1 / -1; margin-top: clamp(60px, 12vh, 130px); text-align: center; font-family: var(--serif); font-size: clamp(44px, 7.3vw, 112px); line-height: 1; letter-spacing: -.034em; }
.nome .poi { grid-column: 1 / -1; }

/* ============ 06 · NEL BORGO VECCHIO: la porta grande e i dati accanto, poi il bancone e la volta sfalsati ============ */
.bo-griglia { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2.4vw, 36px); align-items: center; }
.bo-foto { grid-column: 1 / span 8; }
.bo-foto .cornice { aspect-ratio: 3 / 2; }
/* le due foto piu' piccole, sfalsate: il bancone in piedi sta piu' su, la volta quadrata piu' in basso */
.bo-due { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2.4vw, 36px); align-items: start; margin-top: clamp(20px, 3vw, 44px); }
.bo-bancone { grid-column: 2 / span 4; }
.bo-bancone .cornice { aspect-ratio: 4 / 5; }
.bo-volta { grid-column: 7 / span 5; margin-top: clamp(40px, 10vh, 110px); }
.bo-volta .cornice { aspect-ratio: 1 / 1; }
.bo-testo { grid-column: 9 / span 4; }
.bo-testo h2 { font-size: clamp(42px, 5.4vw, 84px); }
.dati { margin-top: clamp(22px, 3.6vh, 38px); }
.dati div { display: grid; grid-template-columns: 5.4em 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid var(--ink-15); }
.dati div:last-child { border-bottom: 1px solid var(--ink-15); }
.dati dt { padding-top: 4px; font-weight: 600; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-60); }
.dati dd { font-size: 17px; line-height: 1.42; }
.bo-bottoni, .ca-bottoni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* ============ 07 · A CASA TUA: il sacchetto vero, al centro ============ */
.casa { text-align: center; padding-bottom: clamp(60px, 12vh, 120px); }
.ca-sacchetto { height: min(50vh, 470px); width: auto; margin: clamp(22px, 4vh, 40px) auto 0; }
.ca-testo { margin: clamp(22px, 3.6vh, 36px) auto 0; max-width: 21em; font-family: var(--serif); font-size: clamp(23px, 2.6vw, 38px); line-height: 1.2; letter-spacing: -.018em; }
.ca-bottoni { justify-content: center; }

/* ============ il passaggio: la crema scende nel nero con una sfumatura lunga, nessuna linea ============ */
.sfuma { height: 64vh; min-height: 380px; background: linear-gradient(to bottom, var(--crema) 0%, #C9BCA6 28%, #86796A 54%, #40362F 78%, var(--inchiostro) 100%); background: linear-gradient(to bottom in oklab, var(--crema), var(--inchiostro)); }

/* ============ LA CHIUSURA: le domande, il logo crema, il telefono ============ */
.chiusura { background: var(--inchiostro); color: var(--crema); padding: clamp(20px, 5vh, 50px) var(--m) 0; --filo: color-mix(in srgb, var(--crema) 20%, var(--inchiostro)); --crema-75: color-mix(in srgb, var(--crema) 78%, var(--inchiostro)); }
.do-griglia { max-width: calc(var(--largo) - 2 * var(--m)); margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2.4vw, 36px); align-items: start; }
.do-griglia h2 { grid-column: 1 / span 4; font-size: clamp(42px, 5.4vw, 84px); }
.do-elenco { grid-column: 6 / span 7; }
details { border-top: 1px solid var(--filo); }
details:last-child { border-bottom: 1px solid var(--filo); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; min-height: 48px; padding: 19px 0; font-family: var(--serif); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.25; letter-spacing: -.012em; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; flex: none; font-family: var(--bastone); font-size: 24px; line-height: 1; color: var(--crema-75); transition: transform .35s ease; }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: 0 0 22px; max-width: 36em; font-size: 16.5px; color: var(--crema-75); }
details a { color: var(--crema); text-underline-offset: 3px; }
.saluto { text-align: center; padding: clamp(70px, 15vh, 160px) 0 0; }
.sa-logo { width: min(300px, 56vw); margin: 0 auto clamp(30px, 6vh, 60px); }
.sa-riga { font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--crema-75); }
.sa-tel { margin: clamp(8px, 1.6vh, 16px) 0 clamp(14px, 2.4vh, 24px); font-family: var(--serif); font-size: clamp(50px, 11.6vw, 176px); line-height: 1; letter-spacing: -.04em; }
.sa-tel a { text-decoration: none; white-space: nowrap; }
.piede { background: var(--inchiostro); color: color-mix(in srgb, var(--crema) 78%, var(--inchiostro)); text-align: center; padding: clamp(60px, 11vh, 110px) var(--m) 34px; font-size: 14px; line-height: 1.5; }
.piede p { margin-bottom: 6px; }
.pi-legale { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 26px; margin: 14px 0 10px !important; }
.pi-legale a, .pi-pref { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 14px; color: var(--crema); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--crema) 40%, var(--inchiostro)); text-underline-offset: 4px; }

/* ============ le entrate, a tempo (carta.js mette .vista quando un pezzo arriva in vista, una volta sola). Senza js tutto e' fermo e visibile ============ */
.js [data-svela] { opacity: 0; transform: translateY(16px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--ritardo, 0s); }
.js [data-svela].vista { opacity: 1; transform: none; }

/* ============ il telefono ============ */
@media (max-width: 1100px) {
  .no-colonna { grid-column: 1 / span 7; }
  .bo-testo { grid-column: 8 / span 5; }
  .bo-foto { grid-column: 1 / span 7; }
  .epoi h3 { grid-column: 1 / span 4; }
}
@media (max-width: 820px) {
  body { font-size: 16.5px; }
  .testa-logo img { height: 46px; }
  .testa-tel { min-height: 44px; padding: .6em 1.1em; font-size: 14px; }
  h1 { font-size: clamp(56px, 18.4vw, 112px); line-height: .92; }
  h1 em { display: block; }
  h2, .cucina h2, .no-colonna h2, .bo-testo h2, .do-griglia h2 { font-size: clamp(44px, 13.4vw, 76px); }
  .ap-sotto { display: block; }
  .ap-giro { font-size: clamp(27px, 8vw, 38px); line-height: 1.2; }
  .ap-giro .feritoia { display: block; line-height: 1.25; height: 1.25em; }
  .ap-riga { margin-bottom: 10px; }
  .ap-bottoni { margin-top: 18px; }
  .ap-bottoni .bottone { flex: 1 1 auto; }
  .tre { grid-template-columns: 1fr 1fr; height: auto; }
  .r-panino { grid-column: 1 / -1; aspect-ratio: 5 / 4; }
  .r-porta, .r-manifesto { aspect-ratio: 1127 / 1396; height: auto; }
  .parte { padding-top: clamp(60px, 10vh, 84px); }
  .cartello.largo { display: block; }
  .ct-sotto { margin-top: 10px; padding-bottom: 0; }
  /* i tre tempi in colonna, a zig zag: stessa misura, uno a sinistra uno a destra */
  .tempi-fila { display: block; }
  .tempi-fila li { width: 66%; }
  .tempi-fila li + li { margin-top: 26px; }
  .tempi-fila li:nth-child(2) { margin-left: auto; text-align: right; }
  /* l'unico sticky del sito: la foto del panino resta in vista mentre si toccano le righe */
  .pn-griglia { display: block; }
  .pn-foto { position: sticky; top: 0; z-index: 2; margin: 0 calc(-1 * var(--m)); padding: 10px var(--m) 12px; background: var(--crema); }
  .pn-foto .cornice { width: min(52vw, 34svh); margin: 0 auto; }
  .rg-nome { font-size: 26px; }
  .happy img { width: 31vw; }
  /* un video alla volta, in riga che scorre di lato col dito */
  .cu-fila { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 22px calc(-1 * var(--m)) 0; padding: 0 14vw; gap: 14px; }
  .cu-fila::-webkit-scrollbar { display: none; }
  .cu-fila figure { width: 72vw; min-width: 0; scroll-snap-align: center; }
  .frase-g { font-size: clamp(50px, 15.4vw, 96px); }
  .frase-m { margin-left: 0; }
  .nome, .do-griglia { display: block; }
  .bo-griglia { display: flex; flex-direction: column; }
  .bo-testo { order: -1; margin-bottom: 26px; }
  .no-vetro { width: 72%; margin: 40px 0 0 auto; }
  .motto { margin-top: 44px; font-size: clamp(44px, 13.4vw, 80px); }
  .motto span { display: block; }
  .epoi { display: block; margin-top: 64px; }
  .ep-fila { margin-top: 20px; gap: 10px; }
  .ep-fila li:nth-child(2) { padding-bottom: 22px; }
  .bo-due { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; }
  .bo-bancone { flex: 0 0 42%; }
  .bo-volta { flex: 1; margin-top: 34px; }
  .bo-bottoni .bottone { flex: 1 1 auto; }
  .ca-sacchetto { height: min(46vh, 380px); }
  .do-elenco { margin-top: 26px; }
  .sa-tel { font-size: clamp(48px, 14.6vw, 110px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-svela], .lt, .pn-foto img { transition: none !important; }
  .js [data-svela] { opacity: 1 !important; transform: none !important; }
}