/* =========================================================
   GALENE - Proposta D "Finestre"
   Avorio dominante, verde petrolio come colore secondario
   (testi dei titoli, filetti, bottoni e solo il piede pieno),
   acquamarina ridotta a un filo: l'onda del marchio e il
   sottolineato del menu. Il verde entra ed esce sempre
   sfumato, mai con uno stacco netto; anche le foto sfumano
   nel fondo invece di finire con un taglio. Il motivo è la finestra ad arco:
   ogni foto è una vista sulla casa, come dall'interno.
   Italiana per i titoli, Jost (il logotipo) per il testo.
   ========================================================= */
@font-face { font-family: 'Italiana'; src: url('/assets/fonts/italiana-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('/assets/fonts/jost-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --avorio: #F3EDE2;          /* fondo principale */
  --sabbia: #E9E0D0;          /* fondo dei contatti, passaggio verso il piede */
  --petrolio: #0F3431;        /* titoli, bottoni, piede */
  --petrolio-scuro: #0A2422;
  --acqua: #8CC7BC;           /* solo onda del marchio e sottolineati */
  --inchiostro: #1B2826;      /* testo corrente, 13:1 sull'avorio */
  --salvia: #4F5E59;          /* testo secondario, 6:1 su avorio e 5.4:1 su sabbia */
  --filo: #D6CBB8;            /* linee sottili su avorio */
  --avorio-tenue: rgba(243, 237, 226, .78);

  --titoli: 'Italiana', 'Didot', 'Bodoni 72', Georgia, serif;
  --testo: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;

  --larghezza: 1240px;
  --margine: clamp(1.25rem, 4vw, 3rem);
  --testata: 4.75rem;

  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--testata); -webkit-text-size-adjust: 100%; background: var(--avorio); }
body { background: var(--avorio); color: var(--inchiostro); font-family: var(--testo); font-weight: 300; font-size: 1.0625rem; line-height: 1.7; -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--petrolio); outline-offset: 3px; }
.piede :focus-visible { outline-color: var(--acqua); }
.salta { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--petrolio); color: var(--avorio); padding: .6rem 1rem; text-decoration: none; }
.salta:focus { top: 1rem; }

.colonna { width: min(100% - 2 * var(--margine), var(--larghezza)); margin-inline: auto; }
h1, h2, h3 { font-family: var(--titoli); font-weight: 400; color: var(--petrolio); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.1; }
h3 { font-size: 1.6rem; line-height: 1.2; }

/* ---------- Arco: la cornice che ritorna in tutto il sito ---------- */
.arco { position: relative; overflow: hidden; border-radius: 999px 999px 0 0; background-color: transparent; background-size: cover; background-position: center; }
/* Foto sfumate: il fondo della foto si dissolve nel colore della sezione */
.sfuma, .dove__finestre .arco, .apertura__arco, .servizi__foto { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }

/* ---------- Testata ---------- */
.testata { position: sticky; top: 0; z-index: 40; background: rgba(243, 237, 226, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid transparent; transition: border-color .3s ease; }
.testata.staccata { border-bottom-color: var(--filo); }
.testata__barra { height: var(--testata); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; width: min(100% - 2 * var(--margine), var(--larghezza)); margin-inline: auto; }
.testata__menu { display: flex; gap: clamp(1.25rem, 3vw, 2.5rem); }
.testata__menu--dx { justify-content: flex-end; }
.testata__menu a { text-decoration: none; font-size: .98rem; font-weight: 400; color: var(--inchiostro); padding-block: .5rem; background: linear-gradient(var(--acqua), var(--acqua)) 0 100% / 0 2px no-repeat; transition: background-size .3s ease; }
.testata__menu a:hover { background-size: 100% 2px; }
.marchio { display: flex; align-items: center; gap: .85rem; text-decoration: none; color: var(--petrolio); }
.marchio svg { width: 2.4rem; height: 2.4rem; }
.marchio__onda { stroke: var(--acqua); }
.marchio span { font-size: 1.12rem; font-weight: 400; text-transform: uppercase; letter-spacing: .45em; margin-right: -.45em; }

/* Mobile: marchio a sinistra, a destra solo Contatti */
@media (max-width: 767px) {
  .testata__barra { grid-template-columns: auto 1fr; }
  .testata__menu--sx, .solo-desktop { display: none; }
  .marchio svg { width: 2.1rem; height: 2.1rem; }
  .marchio span { font-size: 1rem; }
}

/* ---------- Bottoni ---------- */
.bottone { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .9rem 1.9rem; font: 400 .98rem/1 var(--testo); text-decoration: none; cursor: pointer; border: 1px solid var(--petrolio); background: var(--petrolio); color: var(--avorio); border-radius: 999px; transition: background-color .25s ease, color .25s ease; }
.bottone:hover { background: transparent; color: var(--petrolio); }

/* ---------- Video con foto di riserva (apertura e fascia) ---------- */
.media { position: relative; overflow: hidden; }
.media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.media.pronto video { opacity: 1; }
/* Sfondo = primo fotogramma del video d'ingresso, così il passaggio foto-video non si nota */
.apertura__arco { background-image: url('/assets/img/d-ingresso-poster.webp'); background-position: center; }
/* Il pulsante sta nella parte alta, fuori dalla zona sfumata */
.pausa { position: absolute; z-index: 3; right: 1rem; top: 38%; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: none; place-items: center; cursor: pointer; background: rgba(243,237,226,.85); color: var(--petrolio); border: 1px solid var(--petrolio); }
.media.pronto .pausa { display: grid; }
.pausa svg { width: .8rem; height: .9rem; fill: currentColor; }
.pausa .i-play, .pausa .i-rivedi, .media.fermo .pausa .i-pausa { display: none; }
.media.fermo .pausa .i-play { display: block; }
/* Video che parte una volta sola: a fine corsa il pulsante permette di rivederlo */
.media.finito .pausa .i-pausa, .media.finito .pausa .i-play { display: none; }
.media.finito .pausa .i-rivedi { display: block; width: 1rem; height: 1rem; }

/* ---------- 1. Apertura ---------- */
.apertura { display: grid; gap: 2rem; width: min(100% - 2 * var(--margine), var(--larghezza)); margin-inline: auto; padding-block: clamp(2rem, 5vw, 3rem) clamp(4rem, 8vw, 6rem); }
.apertura h1 { font-size: clamp(2.6rem, 9vw, 5.2rem); line-height: 1.02; letter-spacing: -.01em; max-width: 12ch; }
.apertura__arco { aspect-ratio: 9 / 14; }
.apertura__lato { display: grid; gap: 1.75rem; justify-items: start; }
.apertura__lato p { max-width: 28rem; color: var(--salvia); font-size: 1.12rem; }
/* Unico momento animato: l'arco si apre dal basso all'arrivo sulla pagina */
@media (prefers-reduced-motion: no-preference) {
  .apertura__arco { animation: apri 1.4s cubic-bezier(.2,.7,.2,1) both; }
  .apertura h1 { animation: affiora 1.2s .35s ease both; }
  @keyframes apri { from { clip-path: inset(100% 0 0 0 round 999px 999px 0 0); } to { clip-path: inset(0 0 0 0 round 999px 999px 0 0); } }
  @keyframes affiora { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- 2. Chi siamo ---------- */
.chi { padding-block: clamp(5rem, 11vw, 9rem); border-top: 1px solid var(--filo); }
.chi__griglia { display: grid; gap: 2rem; }
.chi__onda { width: 10rem; height: 16px; }
.chi__onda path { fill: none; stroke: var(--acqua); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.chi h2 { font-size: clamp(2.2rem, 5vw, 4rem); max-width: 18ch; }
.chi__testo { display: grid; gap: 1.1rem; max-width: 34rem; color: var(--salvia); }

/* ---------- 3. Servizi ---------- */
.servizi { --sfumo: clamp(7rem, 14vw, 12rem); padding-block: calc(var(--sfumo) + 1rem); color: var(--avorio); background: linear-gradient(180deg, var(--avorio) 0, var(--petrolio) var(--sfumo), var(--petrolio) calc(100% - var(--sfumo)), var(--avorio) 100%); background: linear-gradient(in oklab 180deg, var(--avorio) 0, var(--petrolio) var(--sfumo), var(--petrolio) calc(100% - var(--sfumo)), var(--avorio) 100%); }
.servizi h2 { color: var(--avorio); }
.servizi__griglia { display: grid; gap: 2.5rem; }
.servizi__foto { aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; background: url('/assets/img/b-chi-siamo.webp') center 60% / cover no-repeat; }
.servizi__intro { color: var(--avorio-tenue); margin-top: 1rem; max-width: 32rem; }
.servizi__voci { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid rgba(243,237,226,.5); }
.servizi__voci > div { display: grid; gap: .35rem; padding-block: 1.5rem; border-bottom: 1px solid rgba(243,237,226,.16); }
.servizi__voci dt { font-family: var(--titoli); font-size: 1.65rem; line-height: 1.2; color: var(--avorio); }
.servizi__voci dd { color: var(--avorio-tenue); max-width: 34rem; }

/* ---------- 4. Dove ---------- */
.dove { padding-block: clamp(5rem, 10vw, 8rem); }
.dove h2 { max-width: 16ch; }
.dove__finestre { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margine); padding: clamp(2.5rem, 5vw, 4rem) var(--margine) 1rem; scrollbar-width: none; }
.dove__finestre::-webkit-scrollbar { display: none; }
.dove__finestre li { scroll-snap-align: start; }
.dove__finestre .arco { aspect-ratio: 9 / 16; }
.dove__finestre h3 { margin-top: -1.2rem; position: relative; }
.dove__finestre p { color: var(--salvia); margin-top: .45rem; }
.arco--capitali { background-image: url('/assets/img/dove-capitali.webp'); }
.arco--mare { background-image: url('/assets/img/dove-mare.webp'); }
.arco--montagna { background-image: url('/assets/img/dove-montagna.webp'); }

/* ---------- 5. Fascia ---------- */
.fascia { padding-bottom: clamp(5rem, 10vw, 8rem); }
.fascia__griglia { display: grid; }
.fascia__media { aspect-ratio: 4 / 5; background: url('/assets/img/d-fascia-poster.webp') center / cover no-repeat; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.fascia__frase { margin: -3rem var(--margine) 0; position: relative; max-width: 20ch; font-size: clamp(2rem, 6.5vw, 3.6rem); line-height: 1.12; }

/* ---------- 6. Contatti ---------- */
.contatti { background: linear-gradient(180deg, var(--avorio) 0, var(--sabbia) 6rem, var(--sabbia) calc(100% - 9rem), var(--petrolio) 100%); background: linear-gradient(in oklab 180deg, var(--avorio) 0, var(--sabbia) 6rem, var(--sabbia) calc(100% - 9rem), var(--petrolio) 100%); padding-block: clamp(5rem, 10vw, 8rem) clamp(9rem, 14vw, 12rem); }
.contatti__griglia { display: grid; gap: 3rem; }
.contatti__intro p { color: var(--salvia); margin-top: 1.1rem; max-width: 24rem; }
.contatti__mail { display: inline-block; margin-top: 1.6rem; font-family: var(--testo); font-weight: 400; font-size: 1.2rem; letter-spacing: .01em; text-decoration: none; color: var(--petrolio); border-bottom: 1px solid var(--petrolio); }
.contatti__mail:hover { border-bottom-color: var(--acqua); }
.modulo { display: grid; gap: 1.5rem; }
.modulo__riga { display: grid; gap: 1.5rem; }
.campo { display: grid; gap: .35rem; }
.campo label { font-size: .92rem; font-weight: 400; color: var(--petrolio); }
.campo input, .campo textarea { font: 300 1rem/1.5 var(--testo); color: var(--inchiostro); background: transparent; border: 0; border-bottom: 1px solid #9C9384; border-radius: 0; padding: .6rem 0; width: 100%; }
.campo textarea { resize: vertical; min-height: 7rem; }
.campo input:focus, .campo textarea:focus { outline: none; border-bottom: 2px solid var(--petrolio); padding-bottom: calc(.6rem - 1px); }
.consenso { display: flex; gap: .75rem; align-items: flex-start; font-size: .92rem; color: var(--salvia); }
.consenso input { width: 1.1rem; height: 1.1rem; margin-top: .25rem; accent-color: var(--petrolio); flex: none; }
.modulo__esito { min-height: 1.5em; font-size: .95rem; color: var(--petrolio); }

/* ---------- Piede: l'unico campo pieno di verde ---------- */
.piede { background: var(--petrolio); color: var(--avorio-tenue); padding-block: clamp(1.5rem, 4vw, 3rem) calc(6rem + env(safe-area-inset-bottom, 0px)); font-size: .95rem; }
.piede__griglia { display: grid; gap: 1.5rem; }
.piede__marchio { display: flex; align-items: center; gap: .85rem; color: var(--avorio); }
.piede__marchio svg { width: 2.6rem; height: 2.6rem; }
.piede__marchio span { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .45em; }
.piede__claim { max-width: 26rem; }
.piede__link { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.piede a { text-decoration: none; color: var(--avorio); }
.piede a:hover { color: var(--acqua); }
.piede__copy { font-size: .88rem; }

/* ---------- Pulsante musica ---------- */
.musica { position: fixed; z-index: 45; left: var(--margine); bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: 0 1.1rem; border-radius: 999px; font: 400 .88rem/1 var(--testo); cursor: pointer; background: var(--avorio); color: var(--petrolio); border: 1px solid var(--petrolio); box-shadow: 0 6px 20px rgba(15, 52, 49, .14); }
.musica__barre { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.musica__barre i { width: 2px; height: 3px; background: currentColor; }
.musica[aria-pressed="true"] .musica__barre i { animation: barra 1s ease-in-out infinite alternate; }
.musica[aria-pressed="true"] .musica__barre i:nth-child(2) { animation-delay: -.4s; }
.musica[aria-pressed="true"] .musica__barre i:nth-child(3) { animation-delay: -.7s; }
@keyframes barra { from { height: 3px; } to { height: 12px; } }

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
  .dove__finestre { grid-auto-columns: 44%; }
  .modulo__riga { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .piede__griglia { grid-template-columns: 1fr auto; align-items: end; }
  .piede__claim { grid-column: 1; }
  .piede__link { grid-column: 2; grid-row: 1 / 3; justify-content: flex-end; align-self: center; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  /* Apertura in tre colonne: titolo, arco al centro, testo */
  .apertura { grid-template-columns: 5fr 4fr 3fr; align-items: end; gap: clamp(2rem, 3.5vw, 3.5rem); min-height: calc(100svh - var(--testata)); padding-block: clamp(2rem, 4vh, 3rem) clamp(3rem, 6vh, 4.5rem); }
  .apertura__titolo { align-self: center; }
  .apertura h1 { font-size: clamp(3.4rem, 5.4vw, 5.6rem); }
  .apertura__arco { aspect-ratio: auto; height: min(80svh, 48rem); align-self: end; }
  .apertura__lato { align-self: end; padding-bottom: clamp(2rem, 8vh, 5rem); }
  .apertura__lato p { font-size: 1.08rem; }
  .apertura__lato .bottone { white-space: nowrap; }

  .chi__griglia { grid-template-columns: 7fr 5fr; column-gap: 5rem; align-items: end; }
  .chi__onda { grid-column: 1 / -1; }

  /* Servizi: foto verticale ferma mentre l'elenco scorre */
  .servizi__griglia { grid-template-columns: 5fr 7fr; gap: 5rem; align-items: start; }
  .servizi__foto { position: sticky; top: calc(var(--testata) + 2rem); aspect-ratio: auto; height: calc(100svh - var(--testata) - 4rem); max-height: 50rem; }
  .servizi__voci > div { grid-template-columns: 15rem 1fr; gap: 2rem; align-items: baseline; }

  .dove__finestre { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; width: min(100% - 2 * var(--margine), var(--larghezza)); margin-inline: auto; padding-inline: 0; gap: clamp(1.5rem, 3vw, 3rem); }
  .dove__finestre li:nth-child(2) { margin-top: 5rem; }

  /* Fascia: la foto occupa metà pagina e sfuma verso destra nella frase */
  .fascia__griglia { grid-template-columns: 7fr 5fr; align-items: center; }
  .fascia__media { aspect-ratio: auto; height: min(92svh, 58rem);
    -webkit-mask-image: linear-gradient(90deg, #000 58%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 80%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, #000 58%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 80%, transparent);
    mask-composite: intersect; }
  .fascia__frase { margin: 0 max(var(--margine), calc((100vw - var(--larghezza)) / 2)) 0 -4rem; }
  .contatti__griglia { grid-template-columns: 5fr 7fr; gap: 6rem; }
  .musica { bottom: 1.75rem; }
}

/* Desktop stretti: colonna di destra più larga per il bottone */
@media (min-width: 1024px) and (max-width: 1199px) {
  .apertura { grid-template-columns: 4.6fr 4fr 3.4fr; }
  .apertura__lato .bottone { padding-inline: 1.3rem; font-size: .93rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .musica[aria-pressed="true"] .musica__barre i { animation: none; height: 9px; }
}

/* =========================================================
   Aggiornamento 29/09: il fondatore in "Parliamo della vostra
   proprietà", recapiti e dati societari nel piede
   ========================================================= */
.fondatore { display: flex; flex-direction: column; align-items: center; width: min(20rem, 100%); margin-top: 2.75rem; }
.fondatore__ruolo { font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--petrolio); font-weight: 400; margin-bottom: 1.1rem; }
/* Foto scontornata: il busto sfuma nel fondo sabbia, la firma sale leggermente sopra la sfumatura */
.fondatore__foto { width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
.fondatore figcaption { width: 100%; display: flex; justify-content: center; margin-top: -1.6rem; position: relative; }
.fondatore__firma { width: 88%; height: auto; }
.recapiti { display: grid; gap: 1.1rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--filo); }
.recapiti dt { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--salvia); }
.recapiti dd { color: var(--petrolio); font-weight: 400; font-size: 1.05rem; }
.recapiti a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.recapiti a:hover { border-bottom-color: var(--acqua); }

.piede__link li { color: var(--avorio-tenue); }
.piede__legale, .piede__copy { font-size: .85rem; }
.piede__copy a, .piede__legale a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(243, 237, 226, .35); }
@media (min-width: 768px) {
  .piede__legale { grid-column: 1 / -1; }
  .piede__copy { grid-column: 1 / -1; }
}
@media (max-width: 767px) { .fondatore { margin-inline: auto; } }

/* Pagina privacy con lo stile della home */
.pagina-testo .testata__barra { grid-template-columns: 1fr auto 1fr; }
.legale { padding-block: clamp(3rem, 8vw, 6rem); }
.legale .colonna { max-width: 46rem; }
.legale h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 1.5rem; }
.legale h2 { font-size: 1.6rem; margin: 2.2rem 0 .6rem; }
.legale p, .legale li { color: var(--inchiostro); margin-bottom: .8rem; }
.legale a { color: var(--petrolio); }

/* Quarta finestra: in campagna (finché manca la foto resta un arco color sabbia) */
.arco--campagna { background-color: var(--sabbia); background-image: url('/assets/img/dove-campagna.webp'); }
@media (min-width: 1024px) {
  .dove__finestre { grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.2vw, 2.25rem); }
  .dove__finestre li:nth-child(4) { margin-top: 5rem; }
  .dove__finestre h3 { font-size: 1.45rem; }
}

/* Modulo: campo trappola fuori schermo, esito dell'invio, spazio per la verifica Turnstile */
.modulo__trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.modulo .cf-turnstile { min-height: 65px; }
.modulo__esito.errore { color: #8A2A1F; }
.modulo__esito.riuscito { color: var(--petrolio); font-weight: 400; }
.bottone:disabled { opacity: .6; cursor: default; }

/* =========================================================
   Dove: le quattro finestre scorrono di continuo, come un
   nastro senza fine (copie aggiunte dallo script)
   ========================================================= */
.dove__finestre, .dove__finestre.nastro {
  display: flex; grid-auto-flow: unset; grid-template-columns: none; gap: clamp(1.25rem, 2.4vw, 2.5rem);
  width: 100%; margin-inline: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: none; scroll-behavior: auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--margine) 1.5rem; scrollbar-width: none; cursor: grab;
}
.dove__finestre li { flex: 0 0 clamp(15rem, 24vw, 20rem); scroll-snap-align: none; }
.dove__finestre li:nth-child(even) { margin-top: 4rem; }
.dove__finestre.trascina { cursor: grabbing; }
.dove__finestre img, .dove__finestre .arco { -webkit-user-drag: none; user-select: none; }
.dove__comandi { display: flex; justify-content: flex-end; margin-top: .5rem; }
.dove__pausa { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: transparent; color: var(--petrolio); border: 1px solid var(--petrolio); }
.dove__pausa svg { width: .7rem; height: .8rem; fill: currentColor; }
.dove__pausa .i-play, .dove__pausa[aria-pressed="true"] .i-pausa { display: none; }
.dove__pausa[aria-pressed="true"] .i-play { display: block; }
@media (min-width: 1024px) {
  .dove__finestre, .dove__finestre.nastro { display: flex; grid-template-columns: none; width: 100%; margin-inline: 0; padding-inline: var(--margine); overflow-x: auto; }
  .dove__finestre li:nth-child(2) { margin-top: 4rem; }
  .dove__finestre li:nth-child(4) { margin-top: 4rem; }
}