/* ==========================================================================
   Francesco Fabrizio — agente immobiliare & consulente
   Un solo foglio di stile per tutte le pagine.

   1. Caratteri          5. Testata a toppa (home)   9.  Scheda immobile
   2. Colori e misure    6. Sezioni della home       10. Contatti e modulo
   3. Base               7. Pulsanti e link          11. Piede, barra mobile
   4. Testata e menu     8. Elenco immobili          12. Movimento
   ========================================================================== */

/* 1. Caratteri — ospitati sul sito, niente richieste a Google (vedi README).
   Sono variabili: un file copre tutti i pesi dell'intervallo dichiarato. */
@font-face {
  font-family: "Bodoni Moda";
  src: url("font/bodoni-moda.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("font/bodoni-moda-italic.woff2") format("woff2");
  font-weight: 400 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("font/hanken-grotesk.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* 2. Colori e misure
   I colori vengono dalla foto dell'ufficio e dal biglietto da visita:
   parete e camicia (avorio), lampade e scrivania (nero), foglie d'ottone,
   carta verde acqua del biglietto (salvia), blu del nome (notte).
   Contrasti misurati: nero/avorio 15:1, grigio/avorio 6,2:1,
   ottone-testo/avorio 5,4:1, avorio/salvia-notte 9:1. L'ottone pieno su
   salvia-notte fa 3,6:1: SOLO per filetti, simboli e testo grande. */
:root {
  --avorio: #f3f1ec;
  --carta: #e8e4db;
  --nero: #1c1d1b;
  --grigio: #585a55;
  --filo: #d4cfc3;
  --salvia: #7c9993;
  --salvia-notte: #2c4642;
  --salvia-buio: #22383a;
  --ottone: #b39560;
  --ottone-chiaro: #d2bb8e;
  --ottone-testo: #765e33;
  --notte: #1b3150;
  --wa: #1f7a4d;

  --f-titolo: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --f-testo: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --s-1: .5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2.5rem; --s-5: 4rem; --s-6: 7rem;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --max: 1320px;
  --testata: 76px;
  --curva: cubic-bezier(.22, .61, .2, 1);
  --curva-lenta: cubic-bezier(.7, 0, .2, 1);
}

/* 3. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--testata) + 1rem); }
body {
  margin: 0;
  background: var(--avorio);
  color: var(--nero);
  font-family: var(--f-testo);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "ss01";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--f-titolo); font-weight: 500; line-height: 1.05; margin: 0; letter-spacing: -.01em; }
::selection { background: var(--salvia-notte); color: var(--avorio); }
:focus-visible { outline: 2px solid var(--ottone-testo); outline-offset: 3px; border-radius: 2px; }
.su-scuro :focus-visible { outline-color: var(--ottone-chiaro); }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.salta { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--nero); color: var(--avorio); padding: .75rem 1rem; }
.salta:focus { left: 1rem; top: 1rem; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* L'etichetta: maiuscolo spaziato, la stessa voce del sottotitolo del biglietto. */
.etichetta {
  display: inline-flex; align-items: center; gap: .75rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ottone-testo);
  margin: 0 0 var(--s-3);
}
.etichetta::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; }
.su-scuro .etichetta { color: var(--ottone-chiaro); }

.titolo-sezione { font-size: clamp(2.25rem, 5.2vw, 4.25rem); }
.titolo-sezione em { font-style: italic; font-weight: 400; color: var(--ottone-testo); }
.su-scuro .titolo-sezione em { color: var(--ottone-chiaro); }

.su-scuro { background: var(--salvia-notte); color: var(--avorio); }

/* 4. Testata e menu */
.testata {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--testata);
  display: flex; align-items: center;
  color: var(--nero);
  transition: background-color .5s var(--curva), color .5s var(--curva), box-shadow .5s var(--curva), transform .5s var(--curva);
}
.testata .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.testata.is-piena { background: color-mix(in srgb, var(--avorio) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--filo); }
.testata.is-nascosta { transform: translateY(-100%); }
/* Sopra la testata a toppa la barra e' chiara finche' non si scende. */
.testata--su-scuro:not(.is-piena) { color: var(--avorio); }

.marca { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; min-height: 44px; }
.marca__segno { width: 40px; height: auto; color: var(--ottone); }
.marca__nome { display: flex; flex-direction: column; line-height: 1; }
.marca__nome b { font-family: var(--f-titolo); font-weight: 700; font-size: 1.125rem; letter-spacing: .04em; text-transform: uppercase; }
.marca__nome small { font-size: .625rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; margin-top: .35rem; opacity: .8; }
.testata:not(.testata--su-scuro) .marca__nome b, .testata.is-piena .marca__nome b { color: var(--notte); }

.menu { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.5rem); }
.menu a {
  position: relative; text-decoration: none; font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: .75rem 0;
}
.menu a:not(.pulsante)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .45rem; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--curva);
}
.menu a:not(.pulsante):hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.menu .pulsante { padding: .7rem 1.2rem; }

.apri-menu { display: none; }

@media (max-width: 860px) {
  :root { --testata: 64px; }
  .marca__segno { width: 34px; }
  .marca__nome b { font-size: 1rem; }
  .apri-menu {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    width: 48px; height: 48px; margin-right: -10px;
    background: none; border: 0; color: inherit; cursor: pointer; position: relative; z-index: 2;
  }
  .apri-menu span { position: relative; width: 24px; height: 1px; background: currentColor; transition: background .3s; }
  .apri-menu span::before, .apri-menu span::after {
    content: ""; position: absolute; left: 0; width: 24px; height: 1px; background: currentColor;
    transition: transform .45s var(--curva);
  }
  .apri-menu span::before { transform: translateY(-7px); }
  .apri-menu span::after { transform: translateY(7px); }
  .menu-aperto .apri-menu span { background: transparent; }
  .menu-aperto .apri-menu span::before { transform: rotate(45deg); }
  .menu-aperto .apri-menu span::after { transform: rotate(-45deg); }

  /* Il menu del telefono e' una pagina intera: le voci entrano una dopo l'altra. */
  .menu {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: .25rem;
    padding: calc(var(--testata) + 1rem) var(--gutter) 6rem;
    background: var(--salvia-notte); color: var(--avorio);
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path .7s var(--curva-lenta), visibility 0s .7s;
  }
  .menu-aperto .menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .7s var(--curva-lenta), visibility 0s; }
  .menu-aperto .testata { color: var(--avorio); background: transparent; box-shadow: none; backdrop-filter: none; }
  .menu-aperto .testata .marca__nome b { color: var(--avorio); }
  .menu a { font-family: var(--f-titolo); font-size: clamp(2.5rem, 11vw, 3.5rem); font-weight: 500; letter-spacing: 0; text-transform: none; padding: .2rem 0; }
  .menu a:not(.pulsante)::after { bottom: .1rem; }
  .menu .pulsante { font-family: var(--f-testo); font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; margin-top: var(--s-4); padding: 1rem 1.4rem; }
  .menu > * { opacity: 0; transform: translateY(1.5rem); transition: opacity .5s, transform .6s var(--curva); }
  .menu-aperto .menu > * { opacity: 1; transform: none; transition-delay: calc(.25s + var(--i, 0) * 70ms); }
  .menu__piede { margin-top: var(--s-4); font-size: .875rem; color: #c9ccc7; line-height: 1.8; }
  .menu__piede a { font-family: var(--f-testo); font-size: inherit; text-transform: none; letter-spacing: 0; padding: 0; }
  .menu-aperto { overflow: hidden; }
}
@media (min-width: 861px) { .menu__piede { display: none; } }

/* 5. Apertura della home: la toppa e il racconto
   L'elemento firma del sito. La toppa del marchio sta a destra, ferma
   (sticky), e all'inizio lascia vedere solo una sfumatura d'ottone (le foglie
   dell'ufficio, sfocate). Scorrendo si apre: la sfumatura lascia il posto al
   ritratto, che riempie la meta' destra e accompagna tutto "Chi sono".
   Quando la sezione finisce, la foto se ne va con lei.
   Il JS scrive sulla .racconto --p (apertura 0→1) e --f (dissolvenza della
   foto 0→1), sulla .toppa --w/--mx/--my (misura e posizione della maschera).
   Senza JS si vede il ritratto intero; con "riduci movimento" la toppa e' gia'
   aperta: la pagina e' completa in entrambi i casi. */
.racconto { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--avorio); --p: 0; --f: 0; }
.racconto__scena {
  grid-column: 2; grid-row: 1 / span 2; align-self: start;
  position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden;
  background: radial-gradient(circle at 50% 44%, #36544f 0, var(--salvia-buio) 24vw);
}
/* Mentre arriva la foto il fondo della scena passa dal verde scuro all'avorio:
   i bordi sfumati del ritratto si sciolgono nello stesso colore del testo accanto. */
.racconto__scena::before { content: ""; position: absolute; inset: 0; background: var(--avorio); opacity: var(--f); pointer-events: none; }
.toppa { position: absolute; inset: 0; --cx: 50%; --cy: 46%; --w0: min(19vw, 40svh); --w: var(--w0); }
.toppa__foto {
  position: absolute; inset: 0; margin: 0;
  -webkit-mask: url("../img/toppa.svg") no-repeat;
          mask: url("../img/toppa.svg") no-repeat;
  -webkit-mask-size: var(--w) calc(var(--w) * 1.6);
          mask-size: var(--w) calc(var(--w) * 1.6);
  -webkit-mask-position: var(--mx, calc(var(--cx) - var(--w) / 2)) var(--my, calc(var(--cy) - var(--w) * .42));
          mask-position: var(--mx, calc(var(--cx) - var(--w) / 2)) var(--my, calc(var(--cy) - var(--w) * .42));
}
.toppa.is-aperta .toppa__foto { -webkit-mask: none; mask: none; }
.toppa__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.toppa__copertina { opacity: calc(1 - var(--f)); transform: scale(calc(1.15 - var(--p) * .15)); animation: foto-entra 1.8s var(--curva) both .2s; }
.toppa__ritratto {
  object-position: 60% 42%; opacity: var(--f); transform: scale(calc(1.06 - var(--p) * .06));
  /* Bordi sfumati: la foto si scioglie nel fondo avorio verso il testo, in alto e in basso. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%), linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 24%), linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%);
          mask-composite: intersect;
}
.toppa__contorno {
  position: absolute; pointer-events: none; overflow: visible; z-index: 1;
  left: var(--mx, calc(var(--cx) - var(--w) / 2)); top: var(--my, calc(var(--cy) - var(--w) * .42));
  width: var(--w); height: calc(var(--w) * 1.6);
  opacity: calc(1 - var(--p) * 3);
}
.toppa__contorno path {
  fill: none; stroke: var(--ottone); stroke-width: 1px; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  animation: traccia 2.2s var(--curva-lenta) both .1s;
}
html:not(.js) .toppa__foto { -webkit-mask: none; mask: none; }
html:not(.js) .toppa__ritratto { opacity: 1; }
html:not(.js) .toppa__contorno, html:not(.js) .toppa__copertina { display: none; }

.racconto__eroe {
  grid-column: 1; grid-row: 1; position: relative;
  min-height: 100svh; display: flex; align-items: center;
  padding: var(--testata) clamp(1.5rem, 4vw, 4rem) var(--testata) max(var(--gutter), (100vw - var(--max)) / 2);
  background: var(--salvia-buio); color: var(--avorio);
}
.eroe__testo { width: 100%; max-width: 640px; }
.eroe__nome { font-size: clamp(3.25rem, 7.2vw, 7.5rem); font-weight: 500; line-height: .92; letter-spacing: -.02em; margin-bottom: var(--s-3); }
.eroe__nome span { display: block; }
.eroe__nome span + span { font-style: italic; font-weight: 400; color: var(--ottone-chiaro); padding-left: .55em; }
.eroe__ruolo { font-size: .8125rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #d9dcd6; margin-bottom: var(--s-2); }
.eroe__frase { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); max-width: 32ch; color: #dfe2dc; margin-bottom: var(--s-4); }
.eroe__azioni { display: flex; flex-wrap: wrap; gap: .75rem; }
.solo-stretto { display: none; }
@media (max-width: 860px) { .solo-largo { display: none; } .solo-stretto { display: inline; } }
.eroe__scorri {
  position: absolute; left: max(var(--gutter), (100vw - var(--max)) / 2); bottom: 1.5rem; margin: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: .6rem;
  font-size: .6875rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: #c9ccc7;
}
.eroe__scorri::after { content: ""; width: 1px; height: 44px; margin-left: 1px; background: linear-gradient(var(--ottone-chiaro), transparent); animation: goccia 2.4s var(--curva) infinite; transform-origin: top; }
html:not(.js) .eroe__scorri { display: none; }

/* Le entrate dell'apertura, in sequenza. */
.entra { animation: sale 1.1s var(--curva) both; animation-delay: calc(.35s + var(--i, 0) * 110ms); }

/* Chi sono: il testo a sinistra, il ritratto (la scena) a destra. */
.racconto__chi {
  grid-column: 1; grid-row: 2;
  padding: clamp(5rem, 10vw, 8rem) clamp(1.5rem, 5vw, 5.5rem) clamp(5rem, 10vw, 8rem) max(var(--gutter), (100vw - var(--max)) / 2);
}
.chi__titolo { font-size: clamp(2.5rem, 4.4vw, 4.25rem); line-height: 1.02; margin-bottom: var(--s-4); max-width: 13ch; }
.chi__titolo em { display: block; font-weight: 400; color: var(--ottone-testo); }
.lettera { font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.7; max-width: 38rem; }
.lettera p:first-of-type::first-letter {
  float: left; font-family: var(--f-titolo); font-size: 4.4em; line-height: .82; padding: .06em .1em 0 0; color: var(--ottone-testo);
}

.citazione { margin: var(--s-5) 0 0; padding: var(--s-4) 0 0; border-top: 1px solid var(--filo); max-width: 38rem; }
.citazione blockquote { margin: 0; position: relative; padding-left: 2.6rem; }
.citazione blockquote::before { content: "“"; position: absolute; left: 0; top: -.35em; font-family: var(--f-titolo); font-size: 4.5rem; line-height: 1; color: var(--ottone); }
.citazione p { margin: 0; font-family: var(--f-titolo); font-style: italic; font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.25; }
.citazione figcaption { margin-top: var(--s-2); padding-left: 2.6rem; font-size: .75rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ottone-testo); }
.citazione figcaption::before { content: "— "; }

/* I fatti: due tessere affiancate. */
.fatti { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--nero); max-width: 38rem; }
.fatti li { display: flex; flex-direction: column; gap: .4rem; padding: var(--s-3) var(--s-3) var(--s-3) 0; }
.fatti li:nth-child(2) { padding-left: var(--s-3); border-left: 1px solid var(--filo); }
.fatti span { font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--grigio); }
.fatti b { font-family: var(--f-titolo); font-weight: 500; font-size: clamp(1.75rem, 2.5vw, 2.25rem); line-height: 1.05; }
.fatti small { font-size: .9375rem; line-height: 1.5; color: var(--grigio); }

/* Di cosa mi occupo: sei voci su tre colonne, separate da filetti. */
.servizi__testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-3); margin-bottom: var(--s-4); }
.servizi__testa p { max-width: 30rem; color: var(--grigio); margin: 0; }
.servizi { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--nero); }
/* Senza descrizioni: icona e titolo sulla stessa riga, righe basse. */
.servizio { position: relative; padding: 1.35rem var(--s-3); border-bottom: 1px solid var(--filo); display: flex; align-items: center; gap: 1rem; }
.servizio:nth-child(3n+1) { padding-left: 0; }
.servizio:nth-child(3n) { padding-right: 0; }
.servizio:not(:nth-child(3n+1)) { border-left: 1px solid var(--filo); }
.servizio h3 { font-size: clamp(1.375rem, 1.8vw, 1.75rem); line-height: 1.15; }
.servizio p { color: var(--grigio); margin: 0; font-size: 1rem; }
.servizio__segno { display: block; flex: none; width: 26px; height: 26px; margin: 0; color: var(--ottone-testo); transition: transform .6s var(--curva); }
.servizio:hover .servizio__segno { transform: translateY(-4px) rotate(-6deg); }

/* Telefono: la toppa si apre a tutto schermo, il nome sta in basso e
   "Chi sono" scorre sopra la foto, su fondo chiaro. */
@media (max-width: 860px) {
  .racconto { grid-template-columns: 1fr; }
  .racconto__scena { grid-column: 1; grid-row: 1 / span 2; background: radial-gradient(circle at 50% 32%, #36544f 0, var(--salvia-buio) 70vw); }
  /* Come nello schizzo di Max: qualifica centrata in alto, nome a sinistra,
     toppa a destra alla stessa altezza del nome, pulsanti in basso. */
  .toppa { --cx: 82%; --cy: 36%; --w0: min(30vw, 24svh); }
  .toppa__ritratto {
    object-position: 80% 30%;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 78%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0, #000 78%, transparent 100%);
  }
  .racconto__eroe { grid-column: 1; grid-row: 1; z-index: 1; display: block; min-height: 0; padding: 0; background: none; }
  .js .racconto__eroe { height: 180svh; }
  .eroe__testo {
    position: sticky; top: 0; max-width: none; height: 100svh; min-height: 560px;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: max(7rem, 19svh) var(--gutter) max(6rem, 12svh);
    opacity: calc(1 - var(--p) * 2.4);
  }
  .eroe__nome { font-size: clamp(2.75rem, 13vw, 5rem); margin-top: max(2rem, 6svh); }
  .eroe__ruolo { text-align: center; line-height: 2; margin-bottom: 0; font-size: clamp(.6875rem, 3vw, .9375rem); letter-spacing: .18em; }
  .eroe__ruolo > span { display: block; }
  .eroe__azioni { margin-top: auto; }
  .eroe__frase { display: none; }
  .eroe__azioni .pulsante { flex: 1 1 100%; }
  .eroe__scorri { display: none; }
  .racconto__chi { grid-column: 1; grid-row: 2; position: relative; z-index: 2; background: var(--avorio); padding: clamp(4rem, 14vw, 6rem) var(--gutter); }
  .chi__titolo { max-width: none; }
}
@media (max-width: 960px) {
  .servizi { grid-template-columns: 1fr 1fr; }
  .servizio:nth-child(n) { padding: 1.2rem var(--s-3); border-left: 0; }
  .servizio:nth-child(2n+1) { padding-left: 0; }
  .servizio:nth-child(2n) { padding-right: 0; border-left: 1px solid var(--filo); }
}
@media (max-width: 560px) {
  .servizi { grid-template-columns: 1fr; }
  .servizio:nth-child(n) { padding: .85rem 0; border-left: 0; }
  .servizio h3 { font-size: 1.375rem; }
  .fatti { grid-template-columns: 1fr; }
  .fatti li:nth-child(2) { padding-left: 0; border-left: 0; border-top: 1px solid var(--filo); }
}

/* 6. Sezioni della home */
.sezione { padding-block: clamp(3rem, 5vw, 4.5rem); }
.sezione--carta { background: var(--carta); }

/* La rotta: le tappe di una vendita, in ordine. Qui la numerazione e' vera.
   Sta su fondo avorio: il verde scuro e' riservato alla chiusura. */
.rotta { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); counter-reset: tappa; position: relative; }
.rotta::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--filo); }
.rotta::after {
  content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--ottone-testo);
  transform: scaleX(var(--rotta, 0)); transform-origin: left; transition: transform 1.8s var(--curva-lenta);
}
.rotta.is-vista { --rotta: 1; }
.rotta li { counter-increment: tappa; position: relative; padding: var(--s-4) var(--s-3) 0 0; }
.rotta li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%;
  background: var(--avorio); border: 1px solid var(--ottone-testo);
}
.rotta li::after {
  content: counter(tappa, upper-roman); position: absolute; top: -.2rem; left: 1.75rem;
  font-family: var(--f-titolo); font-style: italic; font-size: .9375rem; color: var(--ottone-testo);
  background: var(--avorio); padding: 0 .4rem; line-height: 1.4;
}
.rotta h3 { font-size: 1.5rem; margin-bottom: .6rem; }
.rotta p { font-size: .9375rem; color: var(--grigio); margin: 0; }

/* In vetrina: la scheda grande dell'immobile scelto. */
.vetrina { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; text-decoration: none; }
.vetrina__foto { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--carta); }
.vetrina__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--curva); }
.vetrina:hover .vetrina__foto img { transform: scale(1.04); }
.vetrina__luogo { font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ottone-testo); margin-bottom: var(--s-2); }
.vetrina h3 { font-size: clamp(2.25rem, 4vw, 3.5rem); margin-bottom: var(--s-3); }
.vetrina__prezzo { font-family: var(--f-titolo); font-size: 1.75rem; margin-bottom: var(--s-3); }
.vetrina__prezzo small { display: block; font-family: var(--f-testo); font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--grigio); margin-bottom: .3rem; }
.vetrina__fatti { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; list-style: none; padding: var(--s-2) 0 0; margin: 0 0 var(--s-4); border-top: 1px solid var(--filo); color: var(--grigio); font-size: .9375rem; }
.vetrina__fatti li + li::before { content: "·"; margin-right: 1.2rem; color: var(--ottone-testo); }
.vetrina__piede { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--filo); }
.vetrina__piede p { margin: 0; color: var(--grigio); }

/* Chiusura: "Vi aspetto a bordo." */
.chiusura { text-align: center; padding-block: clamp(5rem, 12vw, 10rem); position: relative; overflow: hidden; }
.chiusura__segno { width: 76px; margin: 0 auto var(--s-4); color: var(--ottone); }
.chiusura h2 { font-size: clamp(3rem, 8vw, 7rem); margin-bottom: var(--s-3); }
.chiusura h2 em { font-weight: 400; color: var(--ottone-chiaro); }
.chiusura p { max-width: 34rem; margin: 0 auto var(--s-4); color: #d9dcd6; }
.chiusura .azioni { justify-content: center; }
/* 7. Pulsanti e link */
.azioni { display: flex; flex-wrap: wrap; gap: .75rem; }
.pulsante {
  --sfondo: var(--nero); --testo: var(--avorio);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 48px; padding: .85rem 1.6rem;
  background: var(--sfondo); color: var(--testo); border: 1px solid var(--sfondo);
  font: 600 .8125rem/1.2 var(--f-testo); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: color .45s var(--curva), border-color .45s var(--curva);
}
/* Al passaggio sale una lama d'ottone dal basso. */
.pulsante::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ottone);
  transform: translateY(101%); transition: transform .5s var(--curva);
}
.pulsante:hover::before { transform: none; }
.pulsante:hover { color: var(--nero); border-color: var(--ottone); }
.pulsante svg { width: 18px; height: 18px; flex: none; }
.pulsante--chiaro { --sfondo: var(--avorio); --testo: var(--nero); }
.pulsante--vuoto { --sfondo: transparent; --testo: currentColor; border-color: currentColor; }
.su-scuro .pulsante--vuoto, .racconto__eroe .pulsante--vuoto { color: var(--avorio); border-color: rgba(243, 241, 236, .55); }
.pulsante--wa { --sfondo: var(--wa); --testo: #fff; }

.freccia { display: inline-flex; align-items: center; gap: .6rem; font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding-block: .75rem; }
.freccia::after { content: "→"; font-size: 1.1rem; letter-spacing: 0; transition: transform .45s var(--curva); }
.freccia:hover::after, a:hover .freccia::after { transform: translateX(6px); }

/* 8. Elenco immobili */
.apertura { padding: calc(var(--testata) + clamp(3rem, 8vw, 6rem)) 0 clamp(2.5rem, 6vw, 4.5rem); }
.apertura h1 { font-size: clamp(3.25rem, 9vw, 8rem); line-height: .95; }
.apertura h1 em { font-weight: 400; color: var(--ottone-testo); }
.apertura__sotto { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-3); margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--nero); }
.apertura__sotto p { max-width: 36rem; margin: 0; color: var(--grigio); }
.apertura__conta { font-family: var(--f-titolo); font-style: italic; font-size: 1.25rem; }

.elenco { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); padding-bottom: var(--s-6); }
.scheda { text-decoration: none; display: flex; flex-direction: column; }
.scheda__foto { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--carta); margin-bottom: var(--s-3); }
.scheda__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--curva); }
.scheda:hover .scheda__foto img { transform: scale(1.05); }
.stato {
  position: absolute; left: 1rem; top: 1rem; z-index: 1;
  padding: .4rem .75rem; background: var(--avorio); color: var(--nero);
  font-size: .6875rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.stato--venduto { background: var(--nero); color: var(--avorio); }
.scheda__luogo { font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ottone-testo); margin-bottom: .5rem; }
.scheda h2 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); margin-bottom: .75rem; }
.scheda__riga { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: .75rem; border-top: 1px solid var(--filo); color: var(--grigio); font-size: .9375rem; }
.scheda__riga b { font-family: var(--f-titolo); font-weight: 500; font-size: 1.375rem; color: var(--nero); white-space: nowrap; }

/* La casella "altri immobili in arrivo": rimanda a Instagram, dove escono prima. */
.scheda--invito { justify-content: center; align-items: flex-start; gap: var(--s-2); padding: var(--s-4); background: var(--salvia-notte); color: var(--avorio); min-height: 100%; aspect-ratio: auto; }
.scheda--invito h2 { color: var(--avorio); font-size: clamp(2rem, 3vw, 2.75rem); }
.scheda--invito h2 em { font-weight: 400; color: var(--ottone-chiaro); }
.scheda--invito p { color: #d9dcd6; margin: 0; }
.scheda--invito .marca__segno { width: 56px; margin-bottom: var(--s-3); }

/* 9. Scheda immobile: foto a sinistra, descrizione a destra. */
.immobile { padding-top: calc(var(--testata) + var(--s-3)); }
.briciole { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .8125rem; color: var(--grigio); margin-bottom: var(--s-3); }
.briciole a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.briciole a:hover { color: var(--nero); text-decoration: underline; }
.immobile__griglia { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: start; padding-bottom: var(--s-6); }

.galleria { position: sticky; top: calc(var(--testata) + 1rem); }
.galleria__pista {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain;
  background: var(--carta);
}
.galleria__pista::-webkit-scrollbar { display: none; }
.galleria__foto { flex: 0 0 100%; scroll-snap-align: start; margin: 0; aspect-ratio: 4 / 3; max-height: calc(100svh - var(--testata) - 9rem); width: 100%; }
.galleria__foto img { width: 100%; height: 100%; object-fit: contain; }
.galleria__barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .75rem; }
.galleria__conta { font-family: var(--f-titolo); font-style: italic; font-size: 1.125rem; min-width: 4.5rem; }
.galleria__frecce { display: flex; gap: .5rem; }
.galleria__frecce button {
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid var(--nero); background: transparent; color: var(--nero); cursor: pointer; font-size: 1.1rem;
  transition: background .3s, color .3s;
}
.galleria__frecce button:hover:not(:disabled) { background: var(--nero); color: var(--avorio); }
.galleria__frecce button:disabled { opacity: .3; cursor: default; }
.galleria__miniature { display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: .25rem; }
.galleria__miniature button { flex: 0 0 76px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .5; transition: opacity .3s; position: relative; }
.galleria__miniature button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--ottone-testo); transform: scaleX(0); transition: transform .4s var(--curva); }
.galleria__miniature button[aria-current="true"] { opacity: 1; }
.galleria__miniature button[aria-current="true"]::after { transform: scaleX(1); }
.galleria__miniature img { width: 100%; height: 100%; object-fit: cover; }
.galleria__avviso { font-size: .8125rem; color: var(--grigio); margin-top: .75rem; }

.descrizione__luogo { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: var(--s-2); font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ottone-testo); }
.descrizione__luogo .stato { position: static; background: var(--salvia-notte); color: var(--avorio); }
.descrizione h1 { font-size: clamp(2.5rem, 4.6vw, 4rem); margin-bottom: var(--s-3); }
.prezzo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: var(--s-2) 0; border-block: 1px solid var(--nero); margin-bottom: var(--s-4); }
.prezzo span { font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--grigio); }
.prezzo b { font-family: var(--f-titolo); font-weight: 500; font-size: clamp(2rem, 3vw, 2.5rem); }
.numeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0 0 var(--s-4); }
.numeri div { display: flex; flex-direction: column; }
.numeri dd { margin: 0; font-family: var(--f-titolo); font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.1; order: -1; }
.numeri dt { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--grigio); }
.descrizione__testo { font-size: 1.0625rem; }
.piani { margin: var(--s-4) 0; }
.piani h2 { font-size: .75rem; font-family: var(--f-testo); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ottone-testo); margin-bottom: var(--s-2); }
.piani dl { margin: 0; }
.piani div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--filo); }
.piani dt { font-family: var(--f-titolo); font-style: italic; font-size: 1.125rem; }
.piani dd { margin: 0; color: var(--grigio); font-size: .9875rem; }
.descrizione .azioni { flex-direction: column; margin-top: var(--s-4); }
.descrizione .azioni .pulsante { width: 100%; }
.descrizione__nota { font-size: .8125rem; color: var(--grigio); margin-top: var(--s-3); }

/* 10. Contatti e modulo */
.contatti { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; padding-bottom: var(--s-6); }
.canali { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--nero); }
.canali a {
  display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: baseline; gap: 1rem;
  padding: 1.35rem 0; border-bottom: 1px solid var(--filo); text-decoration: none;
  transition: padding .5s var(--curva), color .3s;
}
.canali a:hover { padding-left: .75rem; color: var(--ottone-testo); }
.canali span { font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--grigio); }
.canali b { font-family: var(--f-titolo); font-weight: 500; font-size: clamp(1.375rem, 2.4vw, 2rem); line-height: 1.2; overflow-wrap: anywhere; }
.canali i { font-style: normal; font-size: 1.25rem; transition: transform .45s var(--curva); }
.canali a:hover i { transform: translateX(6px); }
.contatti__foto { margin: 0 0 var(--s-4); }
.contatti__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.contatti__foto figcaption { margin-top: .75rem; font-size: .875rem; color: var(--grigio); }

.modulo { background: var(--carta); padding: clamp(1.5rem, 3.5vw, 3rem); position: sticky; top: calc(var(--testata) + 1rem); }
/* Arrivando dal link Email il modulo si accende un attimo di un filo d'ottone. */
.modulo.is-chiamato { animation: chiamata 1.6s var(--curva); }
@keyframes chiamata { 20% { box-shadow: 0 0 0 3px var(--ottone); } 100% { box-shadow: 0 0 0 3px transparent; } }
.modulo h2 { font-size: clamp(2rem, 3vw, 2.5rem); margin-bottom: .5rem; }
.modulo > p { color: var(--grigio); margin-bottom: var(--s-4); }
.campo { margin-bottom: var(--s-3); }
.campo label, .campo legend { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .5rem; padding: 0; }
.campo .req { color: var(--ottone-testo); }
.campo input, .campo textarea {
  width: 100%; font: inherit; color: var(--nero); background: transparent;
  border: 0; border-bottom: 1px solid var(--grigio); border-radius: 0; padding: .6rem 0; min-height: 48px;
  transition: border-color .3s;
}
.campo textarea { min-height: 7.5rem; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--nero); box-shadow: 0 1px 0 var(--nero); }
.campo fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.scelte { display: flex; flex-wrap: wrap; gap: .5rem; }
.scelte label { margin: 0; letter-spacing: .06em; text-transform: none; font-size: .9375rem; font-weight: 500; }
.scelte input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scelte span { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem; border: 1px solid var(--grigio); cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.scelte input:checked + span { background: var(--nero); border-color: var(--nero); color: var(--avorio); }
.scelte input:focus-visible + span { outline: 2px solid var(--ottone-testo); outline-offset: 2px; }
.campo--due { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.campo--due .campo { margin: 0; }
.spunta { display: flex; gap: .75rem; align-items: flex-start; font-size: .9375rem; margin: var(--s-3) 0; cursor: pointer; }
.spunta input { width: 20px; height: 20px; margin: .2rem 0 0; accent-color: var(--nero); flex: none; }
.errore { display: none; color: #8f2f1f; font-size: .8125rem; margin-top: .4rem; }
.campo.ha-errore .errore, .spunta-campo.ha-errore .errore { display: block; }
.campo.ha-errore input, .campo.ha-errore textarea { border-bottom-color: #8f2f1f; }
.esca { position: absolute; left: -9999px; }
.modulo .pulsante { width: 100%; }

/* Pagine di testo (privacy, grazie, 404) */
.testo-lungo { max-width: 46rem; padding-bottom: var(--s-6); }
.testo-lungo h2 { font-size: 1.75rem; margin: var(--s-5) 0 var(--s-2); }
.testo-lungo li { margin-bottom: .5rem; }
.pagina-breve { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--testata) var(--gutter) var(--s-5); }
.pagina-breve .marca__segno { width: 84px; margin: 0 auto var(--s-4); }
.pagina-breve h1 { font-size: clamp(3rem, 8vw, 6rem); margin-bottom: var(--s-3); }
.pagina-breve h1 em { font-weight: 400; color: var(--ottone-chiaro); }
.pagina-breve p { max-width: 32rem; margin: 0 auto var(--s-4); color: #d9dcd6; }
.pagina-breve .azioni { justify-content: center; }

/* 11. Piede e barra del telefono */
.piede { background: var(--nero); color: #c9cbc6; padding: var(--s-5) 0 var(--s-4); font-size: .9375rem; }
.piede__griglia { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid #3a3b38; }
.piede .marca { color: var(--avorio); }
.piede .marca__nome b { color: var(--avorio); }
.piede h2 { font-family: var(--f-testo); font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ottone-chiaro); margin-bottom: var(--s-2); }
.piede ul { list-style: none; margin: 0; padding: 0; }
.piede li a { display: inline-flex; min-height: 36px; align-items: center; text-decoration: none; }
.piede a:hover { color: var(--avorio); text-decoration: underline; }
.piede__zona { margin-top: var(--s-3); max-width: 24rem; }
.piede__legale { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-top: var(--s-3); font-size: .8125rem; color: #a3a59f; }
.piede__legale a { color: inherit; }

.barra-mobile { display: none; }
@media (max-width: 860px) {
  .barra-mobile {
    position: fixed; z-index: 40; left: .75rem; right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: var(--nero); color: var(--avorio); box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    transform: translateY(160%); transition: transform .6s var(--curva);
  }
  .barra-mobile.is-visibile { transform: none; }
  .barra-mobile a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-height: 58px; text-decoration: none; font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
  .barra-mobile a + a { border-left: 1px solid #3a3b38; }
  .barra-mobile svg { width: 20px; height: 20px; }
  .barra-mobile a.wa svg { color: #5fd39a; }
  .piede { padding-bottom: 6.5rem; }
}

/* 12. Movimento
   Comparsa allo scorrimento: il testo sale di poco, le foto si scoprono dal basso.
   Solo con JS (classe .js), cosi' senza script e' tutto visibile. */
.js .appare { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--curva), transform 1.1s var(--curva); transition-delay: calc(var(--i, 0) * 90ms); }
.js .appare.is-vista { opacity: 1; transform: none; }
/* Il ritaglio sta sulla FOTO, non sul riquadro: un riquadro ritagliato a zero
   per il browser e' invisibile, e l'osservatore non lo segnalerebbe mai. */
.js .scopre { overflow: hidden; }
.js .scopre img {
  clip-path: inset(100% 0 0 0); transform: scale(1.15);
  transition: clip-path 1.4s var(--curva-lenta), transform 1.8s var(--curva);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .scopre.is-vista img { clip-path: inset(0 0 0 0); transform: none; }

@keyframes sale { from { opacity: 0; transform: translateY(32px); } }
@keyframes foto-entra { from { opacity: 0; } }
@keyframes traccia { from { stroke-dashoffset: 1; } }
@keyframes goccia { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Passaggio fra le pagine: dissolvenza della pagina, e la foto della scheda
   che diventa la prima foto della galleria (stesso view-transition-name). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .35s var(--curva) both vt-esce; }
::view-transition-new(root) { animation: .55s var(--curva) both vt-entra; }
::view-transition-group(*) { animation-duration: .6s; animation-timing-function: var(--curva); }
@keyframes vt-esce { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .racconto__eroe { height: auto; }
  .js .appare { opacity: 1; transform: none; }
  .js .scopre img { clip-path: none; transform: none; }
  @view-transition { navigation: none; }
}

/* Telefono e tablet */
@media (max-width: 960px) {
  /* Sul telefono le tappe scorrono di lato, come una striscia: in verticale
     la sezione era lunga tre schermi. La tappa dopo si intravede, invita a scorrere. */
  .rotta {
    display: flex; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--s-2); scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .rotta::-webkit-scrollbar { display: none; }
  .rotta::before, .rotta::after { display: none; }
  .rotta li {
    flex: 0 0 min(72%, 300px); scroll-snap-align: start; padding: var(--s-4) 0 0;
    background: linear-gradient(var(--ottone-testo), var(--ottone-testo)) 0 7px / 100% 1px no-repeat;
  }
  .vetrina { grid-template-columns: 1fr; }
  .immobile__griglia { grid-template-columns: 1fr; }
  .galleria { position: static; margin-inline: calc(var(--gutter) * -1); }
  .galleria__barra, .galleria__miniature, .galleria__avviso { padding-inline: var(--gutter); }
  .galleria__foto { aspect-ratio: 4 / 3.4; max-height: none; }
  .contatti { grid-template-columns: 1fr; }
  .modulo { position: static; margin-inline: calc(var(--gutter) * -1); }
  .piede__griglia { grid-template-columns: 1fr 1fr; }
  .piede__griglia > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .campo--due { grid-template-columns: 1fr; }
  .canali a { grid-template-columns: 1fr auto; }
  .canali span { grid-column: 1 / -1; }
  .piani div { grid-template-columns: 1fr; gap: .25rem; }
  .galleria__miniature { display: none; }
}

@media print {
  .testata, .barra-mobile, .eroe__scorri, .racconto__scena, .galleria__frecce, .galleria__miniature { display: none !important; }
  .racconto { display: block; }
  .js .racconto__eroe { height: auto; }
  .js .appare { opacity: 1; transform: none; }
  .js .scopre img { clip-path: none; transform: none; }
}