/* =========================================================================
   Trattoria del Tiglio — demo di vetrina EntropiaLab
   Mobile-first. Nessuna risorsa esterna.
   ========================================================================= */

/* Le @font-face vivono in assets/fonts.css (font incorporati in base64). */

/* ---------------------------------------------------------------- token */
:root {
  --crema:        #f7f1e5;
  --crema-2:      #efe3d0;
  --carta:        #fdfaf4;
  --inchiostro:   #241d16;
  --inchiostro-2: #574a3c;
  --oliva:        #2b3226;
  --oliva-2:      #3d4635;
  --terracotta:   #b4472b;
  --terracotta-2: #8e3520;
  --bordo:        #ded0b8;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --testo:   "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* scala spaziale generosa (density 3/10) */
  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;   --s6: 4.5rem; --s7: 6rem;    --s8: 8rem;

  --wrap: 1180px;
  --r: 2px;

  --e-out: cubic-bezier(.16, .84, .34, 1);
  --t-med: 620ms;
  --t-lento: 1100ms;
}

/* ----------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1.1em; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 0 0 var(--s3);
  font-variation-settings: "opsz" 110, "SOFT" 0, "WONK" 1;
  text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 11.5vw, 6.2rem); }
h2 { font-size: clamp(2.1rem, 6.4vw, 3.9rem); }
h3 { font-size: clamp(1.3rem, 3.4vw, 1.7rem); line-height: 1.2; }

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.sezione { padding-block: clamp(4rem, 12vw, var(--s8)); }

.solo-desktop { display: none; }
@media (min-width: 800px) { .solo-desktop { display: inline; } }

/* --------------------------------------------------------------- focus */
:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: var(--r);
}
.hero :focus-visible,
.accento :focus-visible,
.contatti :focus-visible,
.pie :focus-visible { outline-color: var(--crema); }

.skip {
  position: absolute; left: var(--s2); top: -6rem; z-index: 999;
  background: var(--oliva); color: var(--crema);
  padding: .8rem 1.2rem; font-weight: 700; text-decoration: none;
  transition: top 180ms var(--e-out);
}
.skip:focus { top: var(--s2); }

/* ------------------------------------------------------------- occhiello */
.occhiello {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--terracotta-2);
  margin-bottom: var(--s3);
}
.occhiello .punto {
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: .55; flex: none;
}
.occhiello--chiaro { color: #f0d9bc; }

/* --------------------------------------------------------------- bottoni */
.btn {
  --bg: var(--terracotta);
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem;
  min-height: 52px;
  padding: .85rem 1.6rem;
  background: var(--bg);
  color: #fff;
  font-family: var(--testo);
  font-size: 1rem; font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 220ms var(--e-out), transform 220ms var(--e-out),
              box-shadow 220ms var(--e-out), color 220ms var(--e-out),
              border-color 220ms var(--e-out);
}
.btn:hover { background: var(--terracotta-2); transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(36, 29, 22, .7); }
.btn:active { transform: translateY(0); }

.btn--fantasma {
  /* velo proprio: resta leggibile su qualsiasi punto della fotografia */
  background: rgba(16, 13, 10, .34);
  color: #fff;
  border-color: rgba(247, 241, 229, .8);
  backdrop-filter: blur(3px);
}
.btn--fantasma:hover { background: rgba(16, 13, 10, .58); border-color: #fff; box-shadow: none; }

.btn--sm { min-height: 44px; padding: .55rem 1.1rem; font-size: .92rem; }
.btn--largo { width: 100%; }

.ico { width: 21px; height: 21px; flex: none; fill: currentColor; }
.recapiti .ico, .ico--info {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --------------------------------------------------------------- testata */
.testata {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background-color 380ms var(--e-out), box-shadow 380ms var(--e-out),
              border-color 380ms var(--e-out);
  border-bottom: 1px solid transparent;
}
.testata__wrap {
  max-width: var(--wrap); margin-inline: auto;
  padding: .85rem clamp(1.25rem, 5vw, 3rem);
  display: flex; align-items: center; gap: var(--s3);
}
.marchio {
  text-decoration: none; margin-right: auto;
  display: flex; flex-direction: column; line-height: 1.1;
  color: var(--crema);
  transition: color 380ms var(--e-out);
}
.marchio__nome {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  font-variation-settings: "opsz" 90;
  letter-spacing: -.01em;
}
.marchio__sotto {
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  opacity: .72; font-weight: 600;
}

.nav { display: none; gap: var(--s3); }
.nav a {
  text-decoration: none; font-size: .95rem; font-weight: 500;
  color: var(--crema); opacity: .88;
  padding: .4rem 0; position: relative;
  transition: opacity 200ms var(--e-out), color 380ms var(--e-out);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 280ms var(--e-out);
}
.nav a:hover { opacity: 1; }
.nav a:hover::after { transform: scaleX(1); }
@media (min-width: 900px) { .nav { display: flex; } }

/* stato "scrollata": fondo crema, testo scuro */
.testata.is-solida {
  background: rgba(247, 241, 229, .95);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--bordo);
  box-shadow: 0 6px 26px -22px rgba(36, 29, 22, .9);
}
.testata.is-solida .marchio,
.testata.is-solida .nav a { color: var(--inchiostro); }
.testata.is-solida :focus-visible { outline-color: var(--terracotta); }

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 7rem 0 clamp(3.5rem, 11vw, 6rem);
  overflow: hidden;
  background: var(--oliva);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  transform: scale(1.09);
  transition: transform 2200ms cubic-bezier(.15, .7, .2, 1);
  will-change: transform;
}
.hero.is-pronto .hero__media img { transform: scale(1); }

/* Velo alto: serve solo a staccare la testata dalla fotografia. */
.hero__velo {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18, 15, 11, .82) 0%, rgba(18, 15, 11, .36) 14%, rgba(18, 15, 11, 0) 32%);
}

/* Base scura del blocco di testo.
   La fotografia dell'hero e' molto luminosa (piatto bianco): una sfumatura
   diffusa non basta a portare il testo piccolo in AA. Quindi il blocco di
   testo poggia su una base quasi piena, con lo stacco misurato in pixel
   (non in percentuale) perche' non dipenda dall'altezza dello schermo.
   La meta' alta della foto resta intatta. */
.hero__testo {
  position: relative;
  width: 100%; max-width: var(--wrap);
  margin-inline: auto;
  padding: 6rem clamp(1.25rem, 5vw, 3rem) 0;
  color: var(--crema);
}
.hero__testo::before {
  content: "";
  position: absolute;
  left: 50%; width: 100vw; transform: translateX(-50%);
  top: 0; bottom: -14rem;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(16, 13, 10, 0) 0,
    rgba(16, 13, 10, .58) 46px,
    rgba(16, 13, 10, .92) 96px,
    rgba(15, 12, 9, .95) 100%);
}

/* Su schermi larghi la base scura si ferma dove finisce il testo: i due terzi
   destri della fotografia restano puliti. La maschera moltiplica l'opacita',
   quindi se il browser non la supporta resta semplicemente la fascia piena. */
@media (min-width: 900px) {
  .hero__testo::before {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 40%, rgba(0, 0, 0, .5) 58%, transparent 80%);
            mask-image: linear-gradient(90deg, #000 0, #000 40%, rgba(0, 0, 0, .5) 58%, transparent 80%);
  }
  /* i riquadri seguono il testo, non tutta la colonna: cosi' nessun blocco
     sporge oltre la parte scura */
  .hero .occhiello,
  .hero__titolo,
  .hero__azioni { width: fit-content; }
  .hero__claim { max-width: 38ch; }
}
.hero__titolo { margin-bottom: var(--s3); color: #fff; }
.hero__titolo .linea { display: block; overflow: hidden; }
.hero__titolo .linea > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1150ms var(--e-out);
}
.hero__titolo .linea:nth-child(2) > span { transition-delay: 110ms; }
.hero.is-pronto .hero__titolo .linea > span { transform: translateY(0); }

.hero__claim {
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  max-width: 33ch;
  color: #f6f0e5;
  text-wrap: pretty;
  margin-bottom: var(--s4);
}
.hero__azioni { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }

.hero .occhiello,
.hero__claim,
.hero__azioni {
  opacity: 0; transform: translateY(14px);
  transition: opacity 700ms var(--e-out), transform 700ms var(--e-out);
}
.hero.is-pronto .occhiello  { opacity: 1; transform: none; transition-delay: 120ms; }
.hero.is-pronto .hero__claim { opacity: 1; transform: none; transition-delay: 480ms; }
.hero.is-pronto .hero__azioni { opacity: 1; transform: none; transition-delay: 620ms; }

.hero__giu {
  position: absolute; right: clamp(1.25rem, 5vw, 3rem); bottom: 1.6rem;
  width: 46px; height: 46px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  border: 1px solid rgba(247, 241, 229, .4);
  color: var(--crema);
  transition: background-color 240ms var(--e-out), border-color 240ms var(--e-out);
}
.hero__giu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; animation: giu 2.4s var(--e-out) infinite; }
.hero__giu:hover { background: rgba(247, 241, 229, .14); border-color: var(--crema); }
@keyframes giu { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (min-width: 900px) { .hero__giu { display: flex; } }

/* ---------------------------------------------------------------- storia */
.storia { background: var(--carta); }
.storia__griglia { display: grid; gap: clamp(2.5rem, 6vw, var(--s6)); align-items: center; }
@media (min-width: 880px) {
  .storia__griglia { grid-template-columns: 5fr 6fr; gap: var(--s7); }
}
.storia__foto { position: relative; }
.storia__foto::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(36, 29, 22, .14);
  pointer-events: none;
}
.storia__testo p { max-width: 54ch; color: var(--inchiostro-2); }
.firma {
  font-family: var(--display); font-size: 1.4rem; font-weight: 400;
  font-variation-settings: "opsz" 60, "WONK" 1;
  color: var(--inchiostro); margin-top: var(--s3); margin-bottom: 0;
}
.firma::before { content: "— "; color: var(--terracotta); }

/* --------------------------------------------------------------- accento */
.accento {
  position: relative;
  min-height: min(78vh, 640px);
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--oliva);
  padding: clamp(4rem, 12vw, 7rem) 0;
  isolation: isolate;
}
.accento__media { position: absolute; inset: -12% 0; z-index: -2; will-change: transform; }
.accento__media img { width: 100%; height: 100%; object-fit: cover; }
/* anche qui la foto ha zone molto chiare (la pasta): al centro, dove sta la
   citazione, il velo si chiude fin quasi all'opacita' piena */
.accento__velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 78% 62% at 50% 50%, rgba(16, 13, 10, .62), rgba(16, 13, 10, 0) 72%),
    linear-gradient(180deg, rgba(20, 17, 12, .64), rgba(18, 15, 11, .84));
}
.accento__cit {
  margin: 0;
  width: 100%; max-width: 46rem;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  text-align: center; color: var(--crema);
}
.accento__cit p {
  font-family: var(--display);
  font-size: clamp(1.5rem, 4.4vw, 2.7rem);
  line-height: 1.24; font-weight: 400;
  font-variation-settings: "opsz" 100, "WONK" 1;
  text-wrap: balance;
  color: #fff;
  margin-bottom: var(--s3);
}
.accento__cit cite {
  font-style: normal; font-size: .82rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: #f4e2ca;
}

/* ------------------------------------------------------------------ menu */
.menu { background: var(--crema); }
.menu__intro { max-width: 46rem; margin-bottom: clamp(2.5rem, 7vw, var(--s6)); }
.menu__nota { color: var(--inchiostro-2); max-width: 48ch; margin-bottom: 0; }

.menu__griglia { display: grid; gap: clamp(2.5rem, 6vw, var(--s6)); }
@media (min-width: 980px) {
  .menu__griglia { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--s7); align-items: start; }
}
.menu__colonne { display: grid; gap: clamp(2.5rem, 6vw, var(--s5)); }
@media (min-width: 640px) { .menu__colonne { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s5); } }
@media (min-width: 980px) { .menu__colonne { gap: var(--s6) var(--s5); } }

.portata__titolo {
  font-size: clamp(1.45rem, 3.6vw, 1.9rem);
  padding-bottom: .6rem;
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--bordo);
  color: var(--oliva);
}
.piatti { display: grid; gap: 1.35rem; }

.piatto {
  opacity: 0; transform: translateY(16px);
  transition: opacity 560ms var(--e-out), transform 560ms var(--e-out);
  transition-delay: calc(var(--i, 0) * 85ms);
}
.piatti.is-in .piatto { opacity: 1; transform: none; }

.piatto__riga {
  display: flex; align-items: baseline; gap: .5rem;
  margin-bottom: .2rem;
}
.piatto__nome { font-weight: 700; font-size: 1.02rem; }
.piatto__filo {
  flex: 1 1 auto; min-width: 1.2rem;
  border-bottom: 1px dotted var(--bordo);
  transform: translateY(-.25em);
}
.piatto__prezzo {
  font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--terracotta-2); white-space: nowrap;
}
.piatto__desc {
  margin: 0; font-size: .95rem; line-height: 1.6;
  color: var(--inchiostro-2); max-width: 42ch;
}

.menu__lato { display: grid; gap: var(--s4); }
.menu__foto { display: none; }
@media (min-width: 980px) { .menu__foto { display: block; } }

.scheda-vino {
  background: var(--oliva); color: var(--crema);
  padding: var(--s4);
}
.scheda-vino h3 {
  font-size: 1.35rem; margin-bottom: var(--s2); color: #fff;
  font-variation-settings: "opsz" 70, "WONK" 1;
}
.scheda-vino p { font-size: .95rem; line-height: 1.65; color: #e5dcc9; }
.scheda-vino p:last-child { margin-bottom: 0; }
.scheda-vino strong { color: #f4dfc0; }

/* -------------------------------------------------------------- galleria */
.galleria { background: var(--carta); }
.galleria__intro { max-width: 42rem; margin-bottom: clamp(2.5rem, 7vw, var(--s6)); }
.griglia-foto { display: grid; gap: clamp(.75rem, 2.2vw, 1.4rem); }
@media (min-width: 620px) { .griglia-foto { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .griglia-foto { grid-template-columns: repeat(3, 1fr); } }
.griglia-foto figure { aspect-ratio: 4 / 3; }
.griglia-foto img { width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------------------------------------------- voci */
.voci { background: var(--crema-2); padding-block: clamp(3.5rem, 10vw, var(--s7)); }
.voci__titolo {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  text-align: center; margin-bottom: clamp(2rem, 5vw, var(--s5));
  color: var(--oliva);
}
.voci__lista { display: grid; gap: var(--s4); }
@media (min-width: 780px) { .voci__lista { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }
.voce p {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.05rem, 2.4vw, 1.2rem); line-height: 1.45;
  font-variation-settings: "opsz" 40, "WONK" 1;
  color: var(--inchiostro);
}
.voce__chi {
  font-family: var(--testo); font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--terracotta-2); margin-bottom: 0;
}

/* ------------------------------------------------------------- contatti */
.contatti { background: var(--oliva); color: var(--crema); }
.contatti h2 { color: #fff; }
.contatti__griglia { display: grid; gap: clamp(2.5rem, 6vw, var(--s6)); }
@media (min-width: 900px) {
  .contatti__griglia { grid-template-columns: 1fr 22.5rem; gap: var(--s7); align-items: start; }
}

.orari { border-top: 1px solid rgba(247, 241, 229, .22); margin-bottom: var(--s4); }
.orari__riga {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1.5rem;
  padding: .9rem 0;
  border-bottom: 1px solid rgba(247, 241, 229, .22);
}
.orari dt { font-weight: 700; }
.orari dd {
  font-variant-numeric: tabular-nums;
  color: #ded4c1;
}
.orari .sep { padding-inline: .5rem; opacity: .6; }
.orari__riga--off dd { color: #e2a58e; font-weight: 700; }

.contatti__avviso {
  display: flex; gap: .7rem; align-items: flex-start;
  font-size: .93rem; line-height: 1.6; color: #ded4c1;
  max-width: 46ch; margin-bottom: 0;
}
.contatti__avviso .ico { margin-top: .2rem; color: #e9c9a8; }

.contatti__scheda {
  background: var(--oliva-2);
  border: 1px solid rgba(247, 241, 229, .16);
  padding: clamp(1.6rem, 4vw, var(--s4));
}
.contatti__scheda h3 { color: #fff; font-size: 1.4rem; margin-bottom: var(--s2); font-variation-settings: "opsz" 70, "WONK" 1; }
.contatti__testo { font-size: .96rem; color: #ded4c1; margin-bottom: var(--s3); }

.recapiti { display: grid; gap: 1.1rem; margin-top: var(--s4); font-size: .95rem; }
.recapiti li { display: flex; gap: .8rem; align-items: flex-start; line-height: 1.5; color: #ded4c1; }
.recapiti .ico { margin-top: .18rem; color: #e9c9a8; }
.recapiti small { color: #c0b6a3; font-size: .82em; }
.recapiti a {
  color: #f4dfc0; text-decoration: none;
  border-bottom: 1px solid rgba(244, 223, 192, .45);
  padding-block: .25rem;
  transition: border-color 200ms var(--e-out), color 200ms var(--e-out);
}
.recapiti a:hover { color: #fff; border-bottom-color: #fff; }

/* ---------------------------------------------------------------- footer */
.pie { background: #1e231a; color: #cfc6b3; padding-block: clamp(2.5rem, 7vw, var(--s5)); font-size: .9rem; }
.pie__wrap { display: grid; gap: var(--s3); }
@media (min-width: 900px) {
  .pie__wrap { grid-template-columns: 1fr 1.4fr auto; gap: var(--s5); align-items: start; }
}
.pie__nome {
  font-family: var(--display); font-size: 1.15rem; color: var(--crema);
  margin-bottom: .2rem; font-variation-settings: "opsz" 60;
}
.pie__riga, .pie__disclaimer { margin-bottom: 0; line-height: 1.6; }
.pie__disclaimer { color: #a99f8c; font-size: .84rem; }
.pie__disclaimer strong { color: #cfc6b3; }
.pie__disclaimer code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em; color: #cfc6b3;
}
.pie__firma { margin-bottom: 0; font-size: .84rem; color: #a99f8c; white-space: nowrap; }
.pie__firma a {
  color: var(--crema); text-decoration: none;
  border-bottom: 1px solid rgba(247, 241, 229, .4);
  padding-block: .25rem;
  transition: border-color 200ms var(--e-out);
}
.pie__firma a:hover { border-bottom-color: var(--crema); }

/* ============================ ANIMAZIONI ============================ */

/* comparsa generica al primo ingresso in viewport */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--t-med) var(--e-out), transform var(--t-med) var(--e-out);
}
.reveal.is-in { opacity: 1; transform: none; }

/* immagine che entra con un leggero cambio di scala */
.zoom { overflow: hidden; }
.zoom img {
  transform: scale(1.07);
  transition: transform var(--t-lento) var(--e-out);
  will-change: transform;
}
.zoom.is-in img { transform: scale(1); }

/* ============================ MOVIMENTO RIDOTTO ============================
   Tutto resta leggibile e al suo posto: niente scale, niente slide, niente
   parallasse. Restano solo i cambi di colore sotto i 200ms.               */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .reveal, .piatto,
  .hero .occhiello, .hero__claim, .hero__azioni {
    opacity: 1 !important; transform: none !important;
  }
  .zoom img, .hero__media img { transform: none !important; }
  .hero__titolo .linea > span { transform: none !important; }
  .accento__media { transform: none !important; inset: 0 !important; }
  .btn:hover { transform: none; }
}