/* Il sito che vende il prodotto.
 *
 * Due caratteri, e la divisione fra loro e voluta: ARCHIVO parla al mercato
 * (titoli grossi, pillole, colore pieno), ROBOTO parla dentro le finestre del
 * prodotto, perche li si vede il software vero e Roboto e il suo carattere.
 * Se un giorno le due cose si mescolano, la pagina smette di distinguere
 * quello che promette da quello che mostra.
 *
 * Le schermate NON sono immagini: sono le stesse forme dell'app ricostruite
 * in HTML. Un PNG di interfaccia invecchia al primo ritocco e nessuno se ne
 * accorge; questo si vede subito, e pesa venti volte meno. Le fotografie
 * (Unsplash, licenza libera anche per uso commerciale) sono un'altra cosa:
 * mostrano il posto dove il lavoro succede, non il software.
 */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Roboto:wght@400;500;700;800;900&display=swap');

:root {
  --logo-ciano: #22cce4;
  --logo-blu: #3476d5;
  --logo-indaco: #3c37ca;

  --notte: #0a0e1f;
  --sheet: #eff1f6;
  --sheet-2: #e6eaf2;
  --carta: #ffffff;
  --bordo: #dde2ec;

  --ink: #151b2b;
  --ink-2: #5a6479;
  --ink-3: #8a93a8;

  /* Il ciano del marchio su bianco sta a 1,9:1 e non si legge: dove fa da
     TESTO si usa questo, che e il token --accento dell'applicazione. */
  --accento: #0b8fb0;
  --accento-vivo: #22cce4;
  --ambra: #ffd166;
  --verde: #16a34a;
  --giallo: #d98324;
  --rosso: #dc2626;

  --r: 26px;
  --r-m: 18px;
  --r-s: 14px;
  --lato: 1280px;
  --bordi: 80px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font: 500 16px/1.6 Archivo, 'Helvetica Neue', Arial, sans-serif;
  color: var(--notte);
  background: var(--carta);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1; letter-spacing: -0.035em; }
p { color: var(--ink-2); }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; border: 0; background: none; }

.prodotto { font-family: Roboto, -apple-system, sans-serif; letter-spacing: 0; }
.dentro { width: 100%; max-width: var(--lato); margin: 0 auto; padding: 0 var(--bordi); }

/* ==========================================================================
   MOVIMENTO
   ========================================================================== */

.ruota { display: inline-block; height: 0.98em; overflow: hidden; vertical-align: bottom; }
.ruota > span { display: block; animation: ruota 10s infinite; }
.ruota > span > span { display: block; }
@keyframes ruota {
  0%, 18%   { transform: translateY(0); }
  25%, 43%  { transform: translateY(-20%); }
  50%, 68%  { transform: translateY(-40%); }
  75%, 93%  { transform: translateY(-60%); }
  100%      { transform: translateY(-80%); }
}

.sale { animation: sale 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes sale { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.nastro-scorre { display: flex; width: max-content; animation: scorri 34s linear infinite; }
@keyframes scorri { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.battito { animation: battito 2.2s ease-in-out infinite; }
@keyframes battito { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Chi ha chiesto meno animazioni non deve vedere niente muoversi: e una
   preferenza di sistema, non un vezzo, e per qualcuno e nausea vera. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ruota > span, .nastro-scorre, .battito, .sale { animation: none; }
  * { transition: none !important; }
}

/* ==========================================================================
   BARRA
   ========================================================================== */

header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
header.staccata { border-bottom-color: var(--bordo); }
header .dentro { display: flex; align-items: center; gap: 30px; height: 76px; }

.marchio { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: -0.03em; text-decoration: none; color: inherit; }
.marchio img { width: 36px; height: auto; }

nav.voci { display: flex; gap: 28px; margin-left: auto; }
nav.voci a { color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 600; }
nav.voci a:hover { color: var(--notte); }

/* ==========================================================================
   BOTTONI
   ========================================================================== */

.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px; border-radius: 999px;
  font: 800 15.5px Archivo, sans-serif; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--sheet-2); color: var(--notte);
  transition: transform 0.14s, box-shadow 0.2s, background 0.2s;
}
.bottone:hover { transform: translateY(-2px); }
.bottone.acceso { background: var(--accento-vivo); color: var(--notte); }
.bottone.scuro { background: var(--notte); color: #ffffff; }
.bottone.grande { min-height: 60px; padding: 0 34px; font-size: 18px; }

/* ==========================================================================
   SEZIONI
   ========================================================================== */

section { padding: 96px 0 0; }
h2.titolone { font-size: clamp(34px, 4.4vw, 54px); font-weight: 900; }
.occhiello {
  display: block; margin-bottom: 14px;
  font: 800 12px Archivo, sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accento);
}
.sottotitolo { font-size: clamp(16px, 1.7vw, 19px); margin-top: 14px; text-wrap: pretty; }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero { padding: 40px 0 0; }
.hero .dentro { display: flex; gap: 56px; align-items: flex-start; }
.hero .parole { width: 660px; flex: 0 0 auto; }
.hero h1 { font-size: clamp(44px, 6.8vw, 96px); font-weight: 900; }
.hero h1 .evidenziato { background: var(--accento-vivo); padding: 0 14px; border-radius: 10px; display: inline-block; }
.hero .ruota { color: var(--accento); }
.hero .rivendica {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px; border-radius: 999px; background: var(--sheet);
  font-size: 13.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 26px;
}
.hero .rivendica i { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); display: block; }
.hero .promessa { font-size: 21px; line-height: 1.5; max-width: 30ch; margin-top: 28px; }
.hero .azioni { display: flex; align-items: center; gap: 14px; margin-top: 36px; }
.hero .nota { font-size: 14.5px; font-weight: 600; color: var(--ink-3); line-height: 1.4; }
.hero .schermo { flex: 1; min-width: 0; position: relative; }
.hero .schermo .telaio { transform: rotate(1.2deg); }

.fumetto {
  position: absolute; right: -20px; bottom: 90px; max-width: 220px;
  background: var(--notte); color: #ffffff; border-radius: var(--r-s);
  padding: 13px 17px; box-shadow: 0 16px 40px rgba(10, 14, 31, 0.3);
  transform: rotate(-2deg);
}
.fumetto b { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accento-vivo); margin-bottom: 4px; }
.fumetto span { font-size: 13.5px; font-weight: 600; line-height: 1.45; }

/* ==========================================================================
   SCHERMATE DEL PRODOTTO — le stesse forme dell'app
   ========================================================================== */

.telaio {
  border-radius: 22px; overflow: hidden; background: var(--carta);
  border: 1px solid var(--bordo); box-shadow: 0 40px 80px rgba(10, 14, 31, 0.16);
}
.telaio .cornice {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px; background: var(--sheet-2); border-bottom: 1px solid var(--bordo);
}
.telaio .cornice i { width: 10px; height: 10px; border-radius: 50%; background: #cfd6e4; display: block; }
.telaio .cornice span { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.telaio .schermata { background: var(--sheet); padding: 16px; }

.carta-vetro {
  padding: 20px; color: #ffffff;
  background: linear-gradient(135deg, var(--accento-vivo), var(--logo-blu) 48%, var(--logo-indaco));
}
.carta-vetro .saluto { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.carta-vetro .saluto .piccolo { font-size: 12px; opacity: 0.85; }
.carta-vetro .saluto .nome { font-size: 17px; font-weight: 800; }
.carta-vetro .ritratto {
  margin-left: auto; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22); display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700;
}
.carta-vetro .vetro { border-radius: var(--r-s); padding: 16px 18px; background: rgba(255, 255, 255, 0.17); border: 1px solid rgba(255, 255, 255, 0.22); }
.carta-vetro .etichetta { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.carta-vetro .cifra { font-size: 38px; font-weight: 900; letter-spacing: -0.03em; margin: 4px 0 8px; }
.carta-vetro .meta { display: flex; gap: 18px; font-size: 13px; opacity: 0.92; }

.riga-cliente {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--r-s); padding: 14px; margin-bottom: 10px;
}
.riga-cliente:last-child { margin-bottom: 0; }
.riga-cliente .testa { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%;
  background: var(--sheet-2); color: var(--ink-2);
  display: grid; place-items: center; font-size: 13.5px; font-weight: 700;
}
.avatar.rosso { background: rgba(220, 38, 38, 0.1); color: var(--rosso); }
.avatar.teal { background: rgba(34, 204, 228, 0.18); color: var(--accento); }
.riga-cliente .corpo { flex: 1; min-width: 0; }
.riga-cliente .nome { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.riga-cliente .sotto { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.punto { width: 9px; height: 9px; border-radius: 50%; display: block; flex: 0 0 auto; }
.punto.verde { background: var(--verde); }
.punto.giallo { background: var(--giallo); }
.punto.rosso { background: var(--rosso); }
.residue { text-align: right; flex: 0 0 auto; }
.residue b { font-size: 19px; font-weight: 800; color: var(--ink); }
.residue span { display: block; font-size: 10.5px; color: var(--ink-2); }
.pillola {
  display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; background: var(--sheet-2); color: var(--ink-2);
}
.pillola.giallo { background: rgba(217, 131, 36, 0.14); color: var(--giallo); }
.pillola.rosso { background: rgba(220, 38, 38, 0.12); color: var(--rosso); }

/* ==========================================================================
   NASTRO
   ========================================================================== */

.nastro { margin-top: 64px; padding: 20px 0; background: var(--notte); overflow: hidden; }
.nastro .gruppo {
  display: flex; align-items: center; gap: 40px; padding-right: 40px;
  font-size: 17px; font-weight: 700; color: rgba(255, 255, 255, 0.55); white-space: nowrap;
}
.nastro .gruppo em { font-style: normal; color: var(--accento-vivo); }

/* ==========================================================================
   PILLOLE SELEZIONABILI
   ========================================================================== */

.scelte { display: flex; gap: 12px; flex-wrap: wrap; }
.scelta {
  display: flex; align-items: center; min-height: 52px; padding: 0 26px;
  border-radius: 999px; font-size: 16px; font-weight: 700; cursor: pointer;
  border: 2px solid var(--bordo); background: var(--carta); color: var(--ink-2);
  transition: transform 0.14s, background 0.2s, border-color 0.2s, color 0.2s;
}
.scelta:hover { transform: translateY(-2px); }
.scelta[aria-selected="true"] { background: var(--notte); border-color: var(--notte); color: #ffffff; }

/* ==========================================================================
   CHI SEI
   ========================================================================== */

.pannello-profilo {
  margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  align-items: center; background: var(--sheet); border-radius: var(--r); padding: 40px;
}
.pannello-profilo h3 { font-size: 34px; font-weight: 800; }
.pannello-profilo .corpo { font-size: 17px; line-height: 1.55; margin-top: 14px; text-wrap: pretty; }
.pannello-profilo .consiglio {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 24px;
  padding: 12px 20px; border-radius: 999px; background: var(--carta);
  border: 1px solid var(--bordo); font-size: 14.5px; font-weight: 700;
}
.pannello-profilo .consiglio em { font-style: normal; color: var(--accento); }
.foto-profilo { border-radius: 20px; overflow: hidden; height: 220px; background: var(--bordo); }
.foto-profilo img { width: 100%; height: 100%; object-fit: cover; }
.spunte { display: grid; gap: 12px; }
.spunte li { display: flex; align-items: center; gap: 14px; background: var(--carta); border-radius: var(--r-m); padding: 16px 20px; font-size: 15.5px; font-weight: 600; }
.spunte i {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 999px;
  background: var(--accento-vivo); display: grid; place-items: center;
}

/* ==========================================================================
   COSA FA
   ========================================================================== */

.testa-sezione { display: flex; align-items: flex-end; gap: 40px; margin-bottom: 32px; }
.testa-sezione p { font-size: 17px; color: var(--ink-3); margin-bottom: 8px; }

.pannello-scheda {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  border-radius: var(--r); padding: 44px; background: var(--notte); color: #ffffff;
}
.pannello-scheda h3 { font-size: 38px; font-weight: 800; }
.pannello-scheda > div > p { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); margin-top: 16px; text-wrap: pretty; }
.pannello-scheda ul { display: grid; gap: 14px; margin-top: 28px; }
.pannello-scheda li { display: flex; gap: 14px; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.86); }
.pannello-scheda li b { color: var(--accento-vivo); font-weight: 800; }
.riga-dato {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--r-s);
  padding: 14px 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px;
}
.riga-dato:last-child { margin-bottom: 0; }
.riga-dato .titolo { flex: 1; font-size: 14px; font-weight: 700; color: var(--ink); }
.riga-dato .valore { font-size: 13px; font-weight: 600; color: var(--ink-2); }

/* ==========================================================================
   FASCIA FOTOGRAFICA
   ========================================================================== */

.fascia { margin-top: 96px; position: relative; height: 380px; overflow: hidden; }
.fascia img { width: 100%; height: 100%; object-fit: cover; }
/* Il velo non e decorazione: senza, il bianco sulla foto scende sotto la
   soglia di leggibilita. */
.fascia .velo {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10, 14, 31, 0.92) 0%, rgba(10, 14, 31, 0.72) 46%, rgba(10, 14, 31, 0.35) 100%);
}
.fascia .parole { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }
.fascia h2 { font-size: clamp(28px, 4.2vw, 52px); font-weight: 900; color: #ffffff; max-width: 20ch; }
.fascia p { font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); max-width: 46ch; margin-top: 18px; }

/* ==========================================================================
   NUTRIZIONE
   ========================================================================== */

.blocco-nutrizione { border-radius: var(--r); padding: 52px; background: var(--accento-vivo); }
.blocco-nutrizione .testa { display: grid; grid-template-columns: 1fr 380px; gap: 44px; align-items: center; }
.blocco-nutrizione .occhiello { color: rgba(10, 14, 31, 0.6); }
.blocco-nutrizione h2 { color: var(--notte); }
.blocco-nutrizione .testa p { font-size: 18px; line-height: 1.55; color: rgba(10, 14, 31, 0.78); margin-top: 18px; text-wrap: pretty; }
.foto-cibo { border-radius: 22px; overflow: hidden; height: 260px; background: rgba(10, 14, 31, 0.1); }
.foto-cibo img { width: 100%; height: 100%; object-fit: cover; }

.due-modalita { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.modalita { border-radius: 20px; padding: 30px; background: var(--carta); }
.modalita.scura { background: var(--notte); color: #ffffff; }
.modalita h3 { font-size: 24px; font-weight: 800; }
.modalita .chi { font-size: 13px; font-weight: 600; color: var(--ink-3); margin: 6px 0 20px; }
.modalita.scura .chi { color: rgba(255, 255, 255, 0.5); }
.modalita ul { display: grid; gap: 12px; }
.modalita li { display: flex; gap: 12px; font-size: 15px; color: var(--ink-2); }
.modalita.scura li { color: rgba(255, 255, 255, 0.86); }
.modalita li b { font-weight: 800; color: var(--verde); }
.modalita.scura li b { color: var(--accento-vivo); }
.modalita li.no { color: var(--ink-3); }
.modalita li.no b { color: var(--bordo); }
.modalita .coda { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--bordo); font-size: 13.5px; font-weight: 600; color: var(--ink-2); line-height: 1.5; }

/* ==========================================================================
   PREZZI
   ========================================================================== */

.griglia-prezzi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.piano {
  border-radius: 24px; padding: 34px 30px; display: flex; flex-direction: column;
  border: 2px solid var(--sheet-2); background: var(--carta);
}
.piano.scuro { background: var(--notte); color: #ffffff; }
.piano.spicca { border-color: var(--notte); box-shadow: 0 24px 60px rgba(10, 14, 31, 0.16); }
.piano .testa { display: flex; align-items: center; gap: 10px; }
.piano h3 { font-size: 24px; font-weight: 800; }
.piano .per-te {
  padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; background: var(--accento-vivo); color: var(--notte);
}
.piano .a-chi { font-size: 14.5px; line-height: 1.45; margin: 10px 0 24px; min-height: 42px; }
.piano.scuro .a-chi { color: rgba(255, 255, 255, 0.6); }
.piano .cifra { font-size: 62px; font-weight: 900; letter-spacing: -0.05em; }
.piano .cifra small { font-size: 17px; font-weight: 700; letter-spacing: 0; }
.piano .nota { font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-top: 6px; }
.piano.scuro .nota { color: rgba(255, 255, 255, 0.6); }
.piano ul { display: grid; gap: 12px; margin: 28px 0; }
.piano li { display: flex; gap: 11px; font-size: 15px; color: var(--ink-2); }
.piano.scuro li { color: rgba(255, 255, 255, 0.86); }
.piano li b { font-weight: 800; color: var(--verde); }
.piano.scuro li b { color: var(--accento-vivo); }
.piano li.no { color: #b6becd; }
.piano li.no b { color: #b6becd; }
.piano.scuro li.no { color: rgba(255, 255, 255, 0.4); }
.piano .bottone { width: 100%; margin-top: auto; }
.sotto-prezzi { text-align: center; margin: 32px auto 0; max-width: 60ch; font-size: 15px; line-height: 1.6; color: var(--ink-3); }
.sotto-prezzi b { color: var(--ink-2); }

/* ==========================================================================
   DOMANDE
   ========================================================================== */

.domande { max-width: 820px; margin: 0 auto; }
details { border-bottom: 1px solid var(--bordo); padding: 22px 0; }
details summary {
  cursor: pointer; list-style: none; font-weight: 800; font-size: 18px;
  display: flex; align-items: center; gap: 14px; letter-spacing: -0.02em;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: ''; margin-left: auto; flex: 0 0 auto; width: 10px; height: 10px;
  border-right: 2.5px solid var(--ink-3); border-bottom: 2.5px solid var(--ink-3);
  transform: rotate(45deg); transition: transform 0.2s;
}
details[open] summary::after { transform: rotate(-135deg); }
details p { margin-top: 12px; font-size: 15.5px; line-height: 1.65; }

/* ==========================================================================
   CHIUSURA E PIEDE
   ========================================================================== */

.chiusura {
  border-radius: var(--r); padding: 76px 40px; text-align: center;
  background: var(--notte); color: #ffffff; position: relative; overflow: hidden;
}
.chiusura::before {
  content: ''; position: absolute; width: 620px; height: 620px; border-radius: 50%;
  top: -340px; left: 50%; transform: translateX(-50%);
  background: var(--accento-vivo); opacity: 0.25; filter: blur(100px); pointer-events: none;
}
.chiusura > * { position: relative; }
.chiusura h2 { font-size: clamp(34px, 5vw, 62px); font-weight: 900; color: #ffffff; max-width: 16ch; margin: 0 auto; }
.chiusura p { font-size: 19px; line-height: 1.55; color: rgba(255, 255, 255, 0.7); max-width: 46ch; margin: 20px auto 36px; text-wrap: pretty; }

footer { padding: 0 0 44px; }
footer .dentro { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
footer .diritti { font-size: 14px; color: var(--ink-3); }
footer nav { margin-left: auto; display: flex; gap: 24px; flex-wrap: wrap; }
footer nav a { font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
footer nav a:hover { color: var(--notte); }

/* ==========================================================================
   SCHERMI STRETTI — il pubblico e in palestra col telefono in mano
   ========================================================================== */

@media (max-width: 1000px) {
  :root { --bordi: 20px; }
  section { padding: 56px 0 0; }
  nav.voci { display: none; }

  .hero .dentro { flex-direction: column; gap: 30px; }
  .hero .parole { width: 100%; }
  .hero .promessa { max-width: none; }
  .hero .azioni { flex-direction: column; align-items: stretch; }
  .hero .azioni .bottone { width: 100%; }
  .hero .nota { text-align: center; }
  .hero .schermo { width: 100%; }
  .hero .schermo .telaio { transform: none; }
  /* Il fumetto punta a un pixel preciso della schermata: su schermo stretto
     non c'e il margine per farlo e diventa una didascalia sotto. */
  .fumetto { position: static; max-width: none; transform: none; margin-top: 14px; }

  .pannello-profilo, .pannello-scheda, .blocco-nutrizione .testa,
  .due-modalita, .griglia-prezzi { grid-template-columns: 1fr; }
  .pannello-profilo, .pannello-scheda { padding: 26px; gap: 20px; }
  .blocco-nutrizione { padding: 30px 26px; }
  .foto-cibo { height: 200px; }
  .testa-sezione { flex-direction: column; align-items: flex-start; gap: 10px; }
  .scelte { flex-direction: column; }
  .scelta { justify-content: center; }
  .fascia { margin-top: 56px; height: 300px; }
  .chiusura { padding: 44px 26px; }
  .nastro { margin-top: 40px; }
}