/* Progetto Z · composizione «cantiere» (DigitaSito, siti web).
   Scelta dal titolare il 15 ottobre fra cinque concetti (la proposta 1): fondo a puntini come un piano di lavoro, a
   sinistra il titolo, a destra un editor dove il sito si costruisce blocco per blocco, con la cornice di selezione, il
   cursore, i livelli, le proprietà e alla fine «Pubblica» → «Online». Subito sotto, la vetrina: colonne dritte di siti
   che scorrono in verticale, una per tipo di cliente, senza scritte; al passaggio del mouse la colonna si ferma. */

.comp-cantiere { --puntini: #D5D5DE; --piano: #F3F3F6; }
.comp-cantiere:not([class*="stile-"]) {
  --font-titoli: "Space Grotesk", "Inter", system-ui, sans-serif; --scuro: #111118; --ruolo: #473AE0; --ruolo-testo: #473AE0; --ruolo-luce: #A99BFF;
  --carta: #FFFFFF; --chiaro: #F3F3F6; --testo: #15151C; --tenue: #6B6B78; --filo: rgba(0, 0, 0, .09);
  background: #fff;
}
.comp-cantiere .q { display: none; }
.comp-cantiere h1, .comp-cantiere h2 { letter-spacing: -.035em; }
.comp-cantiere .testata__barra { background: rgba(255, 255, 255, .92); }
.comp-cantiere .marca__nome { text-transform: none; letter-spacing: -.02em; }

/* ------------------------------------------------------------ l'apertura */
.cantiere {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: 128px max(var(--margine), calc((100% - 1320px) / 2 + var(--margine))) 64px;
  background-color: var(--piano); background-image: radial-gradient(var(--puntini) 1.2px, transparent 1.2px); background-size: 22px 22px;
}
.su-nicchia .cantiere { --piano: var(--chiaro); --puntini: color-mix(in srgb, var(--scuro) 16%, transparent); }
.cantiere__et { font: 600 .74rem/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--ruolo-testo); }
.cantiere h1 { margin-top: 16px; font-size: clamp(2.5rem, 1.3rem + 3.8vw, 4.8rem); line-height: .98; color: var(--scuro); }
.cantiere h1 em { font-style: normal; color: var(--ruolo-testo); }
.stile-bellezza .cantiere h1 em, .stile-legale .cantiere h1 em { font-style: normal; }
.cantiere__sotto { margin-top: 18px; max-width: 31em; font-size: 1.06rem; color: var(--tenue); }
.cantiere__sotto b { color: var(--scuro); }
.cantiere__azioni { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.comp-cantiere:not([class*="stile-"]) .pulsante--scuro { background: #111118; border-color: #111118; }
.cantiere__testo > * { animation: sale .9s var(--rimbalzo) both; }
.cantiere__testo > :nth-child(2) { animation-delay: .08s; } .cantiere__testo > :nth-child(3) { animation-delay: .16s; } .cantiere__testo > :nth-child(4) { animation-delay: .24s; }

/* l'editor */
.ed { position: relative; height: 580px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 50px 100px -50px rgba(20, 10, 60, .5); display: grid; grid-template-rows: 46px 1fr; overflow: hidden; font: 400 12px/1.4 Inter, system-ui, sans-serif; color: #15151C; text-align: left; }
.ed__top { display: flex; align-items: center; gap: 14px; padding: 0 14px; border-bottom: 1px solid #EEE; }
.ed__top b { font-size: 12.5px; }
.pallini { display: flex; gap: 6px; }
.pallini i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; }
.pallini i:nth-child(2) { background: #FEBC2E; } .pallini i:nth-child(3) { background: #28C840; }
.ed__dev { margin-left: auto; display: flex; gap: 4px; }
.ed__dev i { font-style: normal; padding: 4px 8px; border-radius: 6px; color: #888; }
.ed__dev i.on { background: #F1F1F4; color: #111; }
.ed__pub { padding: 8px 14px; border-radius: 8px; background: #473AE0; color: #fff; font-weight: 700; transition: transform .2s, background .2s; }
.ed__pub.premuto { transform: scale(.9); background: #2E23B8; }
.ed__corpo { display: grid; grid-template-columns: 150px minmax(0, 1fr) 170px; min-height: 0; }
.ed__livelli, .ed__prop { padding: 14px 12px; border-right: 1px solid #EEE; background: #FCFCFD; }
.ed__prop { border-right: 0; border-left: 1px solid #EEE; }
.ed__livelli small, .ed__prop small { display: block; margin-bottom: 10px; font: 600 10px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #999; }
.livelli li { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; color: #999; transition: all .3s; }
.livelli li i { flex: none; width: 10px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px currentColor; }
.livelli li.fatto { color: #333; }
.livelli li.on { background: #EEECFF; color: #473AE0; font-weight: 600; }
.livelli li.on i { background: #473AE0; box-shadow: none; }
.ed__prop dl { margin: 0; display: grid; gap: 4px; }
.ed__prop dt { color: #999; font-size: 10.5px; margin-top: 6px; }
.ed__prop dd { margin: 0; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.ed__prop dd i { width: 12px; height: 12px; border-radius: 3px; background: #ccc; }
.ed__tela { position: relative; padding: 18px; background-color: #ECECF1; background-image: radial-gradient(#D7D7DF 1px, transparent 1px); background-size: 16px 16px; overflow: hidden; }
.ed__esempio { position: absolute; z-index: 6; right: 10px; bottom: 8px; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #666; font: 600 9.5px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.pagina { background: var(--c4); border-radius: 6px; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .25); color: var(--c1); min-height: 100%; }
.bl-box > .bl { opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .5s, transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.bl-box.su > .bl { opacity: 1; transform: none; }
.bl--menu { display: flex; align-items: center; gap: 14px; padding: 12px 16px; font-size: 11px; }
.bl--menu b { font: 600 17px/1 var(--sf); margin-right: auto; }
.bl--menu em, .bl--ap em, .bl--prezzi em { font-style: normal; padding: 6px 10px; border-radius: 999px; background: var(--c1); color: var(--c4); font-weight: 600; font-size: 10.5px; white-space: nowrap; }
.bl--ap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center; padding: 8px 16px 16px; }
.bl--ap small { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--c3); font-weight: 700; }
.bl--ap h4 { margin: 8px 0 12px; font: 600 28px/1 var(--sf); letter-spacing: -.01em; color: var(--c1); }
.bl--ap i { height: 130px; border-radius: var(--sr); background-size: cover; background-position: center; }
.bl--serv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 6px 16px 14px; }
.b1-card { text-align: center; font-size: 10.5px; }
.b1-card i { display: block; aspect-ratio: 1; border-radius: 50%; background-size: cover; background-position: center; margin: 0 14px 6px; border: 3px solid #fff; }
.b1-card b { font-weight: 600; }
.bl--prezzi { display: flex; align-items: center; gap: 14px; margin: 0 16px; padding: 10px 12px; border-radius: 10px; background: var(--c2); }
.bl--prezzi ul { flex: 1; display: grid; gap: 3px; font-size: 10.5px; }
.bl--prezzi li { display: flex; justify-content: space-between; gap: 8px; }
.bl--piede { display: flex; gap: 14px; align-items: center; margin-top: 12px; padding: 12px 16px; background: var(--c1); color: var(--c4); font-size: 10px; border-radius: 0 0 6px 6px; }
.bl--piede b { font: 600 14px/1 var(--sf); margin-right: auto; }
.sel { position: absolute; z-index: 3; border: 2px solid #473AE0; pointer-events: none; transition: all .55s cubic-bezier(.34, 1.56, .64, 1); opacity: 0; }
.sel.su { opacity: 1; }
.sel em { position: absolute; left: -2px; bottom: 100%; margin-bottom: 3px; padding: 3px 7px; background: #473AE0; color: #fff; font: 700 10px/1 Inter, sans-serif; font-style: normal; white-space: nowrap; }
.sel i { position: absolute; width: 8px; height: 8px; background: #fff; border: 2px solid #473AE0; }
.sel i:nth-of-type(1) { left: -5px; top: -5px; } .sel i:nth-of-type(2) { right: -5px; top: -5px; }
.sel i:nth-of-type(3) { left: -5px; bottom: -5px; } .sel i:nth-of-type(4) { right: -5px; bottom: -5px; }
.cur { position: absolute; z-index: 4; width: 16px; height: 20px; left: 60%; top: 60%; transition: left .8s cubic-bezier(.5, 0, .2, 1), top .8s cubic-bezier(.5, 0, .2, 1); }
.online { position: absolute; z-index: 5; left: 50%; bottom: 22px; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 14px; background: #111; color: #fff; transform: translate(-50%, 30px); opacity: 0; transition: all .6s cubic-bezier(.34, 1.56, .64, 1); white-space: nowrap; }
.online span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #28C840; font-weight: 800; }
.online small { display: block; font-size: 10px; color: #aaa; }
.online b { font-size: 13px; }
.ed.pubblicato .online { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1060px) {
  .cantiere { grid-template-columns: minmax(0, 1fr); padding-top: 112px; }
  .ed__prop { display: none; }
  .ed__corpo { grid-template-columns: 130px minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .cantiere { padding: 96px 16px 44px; }
  .cantiere__azioni .pulsante { flex: 1 1 100%; }
  .ed { height: 520px; }
  .ed__livelli { display: none; }
  .ed__corpo { grid-template-columns: minmax(0, 1fr); }
  .ed__tela { padding: 12px; }
  .bl--menu span { display: none; }
  .bl--ap h4 { font-size: 22px; }
}

/* ------------------------------------------------------------ la vetrina: colonne dritte di siti che scorrono */
.colonne { position: relative; overflow: hidden; background: #0C0C14; }
.su-nicchia .colonne { background: var(--scuro); }
.colonne__dentro {
  max-width: 1320px; height: 560px; margin: 0 auto; padding: 0 max(var(--margine), env(safe-area-inset-left, 0px)); display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.col { position: relative; display: block; min-width: 0; overflow: hidden; text-decoration: none; color: inherit; }
.col__giro { display: grid; gap: 18px; padding-top: 18px; animation: col-scorre var(--v) linear infinite; animation-direction: var(--verso); }
@keyframes col-scorre { to { transform: translateY(calc(-50% - 9px)); } }
.col:hover .col__giro, .col:focus-visible .col__giro, .col.ferma .col__giro { animation-play-state: paused; }
.col__sito { height: 380px; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .9); transition: transform .4s var(--rimbalzo); }
.col:hover .col__sito { transform: scale(.985); }
.col:hover .col__sito:hover { transform: scale(1.02); }
.col__nome {
  position: absolute; z-index: 2; left: 50%; top: 50%; padding: 10px 16px; border-radius: 999px; background: #fff; color: #111; font: 600 .92rem/1 Inter, sans-serif;
  white-space: nowrap; transform: translate(-50%, -50%) scale(.85); opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s var(--rimbalzo); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .6);
}
.col:hover .col__nome, .col:focus-visible .col__nome, .col.ferma .col__nome { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (max-width: 900px) { .colonne__dentro { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 520px; } .col:nth-child(n+3) { display: none; } }
@media (max-width: 520px) { .colonne__dentro { gap: 10px; height: 460px; padding: 0 16px; } .col__giro { gap: 10px; } .col__sito { height: 300px; }
  .vs__menu i, .vs__menu span { display: none; } .vs h4 { font-size: 20px; } .vs__split { grid-template-columns: 1fr; } .vs__foto { height: 90px; } }

/* i siti d'esempio della vetrina (quattro impaginazioni) */
.vs { height: 100%; background: var(--c4); color: var(--c1); font: 400 10px/1.35 Inter, system-ui, sans-serif; text-align: left; overflow: hidden; }
.vs h4 { font: 600 24px/1.02 var(--sf); letter-spacing: -.01em; color: inherit; margin: 6px 0 10px; }
.vs small { font-size: 7.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--c3); font-weight: 700; }
.vs em { display: inline-block; font-style: normal; padding: 6px 11px; border-radius: 999px; background: var(--c1); color: var(--c4); font-weight: 600; font-size: 9.5px; }
.vs__menu { display: flex; align-items: center; gap: 8px; padding: 12px 14px; }
.vs__menu b { font: 600 15px/1 var(--sf); margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs__menu i { width: 18px; height: 3px; border-radius: 2px; background: currentColor; opacity: .25; }
.vs__menu span { padding: 4px 8px; border-radius: 999px; background: var(--c1); color: var(--c4); font-weight: 600; font-size: 8px; white-space: nowrap; }
.vs__split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; padding: 4px 14px 14px; }
.vs__foto { display: block; height: 150px; border-radius: var(--sr); background-size: cover; background-position: center; }
.vs__lista { display: grid; gap: 4px; padding: 0 14px; }
.vs__lista li { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid color-mix(in srgb, var(--c1) 14%, transparent); }
.vs__pieno { height: 72%; display: flex; flex-direction: column; background-size: cover; background-position: center; color: #fff; }
.vs__pieno .vs__menu span { background: #fff; color: #111; }
.vs__giu { margin-top: auto; padding: 14px; }
.vs__giu small { color: rgba(255, 255, 255, .85); }
.vs__giu em { background: #fff; color: #111; }
.vs__tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 14px; }
.vs__tre i { aspect-ratio: 1; border-radius: 8px; background-size: cover; background-position: center; }
.vs__tre--alti i { aspect-ratio: 3 / 4; }
.vs__centro { padding: 10px 14px 6px; text-align: center; }
.vs__centro h4 { font-size: 26px; }
.vs__colonna { display: grid; grid-template-columns: 44% 1fr; height: 100%; }
.vs__alta { display: block; height: 100%; background-size: cover; background-position: center; }
.vs__destra { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; }
.vs__marca { font: 600 15px/1 var(--sf); }
.vs__destra h4 { margin: 10px 0 4px; font-size: 22px; }
.vs__destra .vs__lista { padding: 0; }
.vs__destra em { align-self: flex-start; margin-top: auto; }
.vs--3 .vs__lista li:nth-child(n+3) { display: none; }

@media (prefers-reduced-motion: reduce) { .col__giro { animation: none; } }