/* DigitaSito · bozza della nuova principale. Si appoggia a ../aperture/stile.css e ../aperture-2/stile.css. */
.bozza{padding:8px 16px;text-align:center;font-size:12.5px;color:var(--grigio);background:#F1F2F8;border-bottom:1px solid rgba(0,5,56,.08)}
/* (il riquadro sta a 10 px dalla finestra: i margini qui dentro tolgono quei 10, così menu e contenuto stanno a
   var(--m) dalla finestra come nelle altre aree) */
/* L'apertura con le misure standard delle aree (16 ottobre, Alfredo: «la larghezza come questo, le spaziature, deve
   essere uno standard», la pagina di DigitaSocial). Valori di modello/stile.css e modello/fuoco.css: margine dei lati
   clamp(16px, 5vw, 88px), larghezza 1240, riquadro a 10 px dai bordi con angoli da 30, alto quanto lo schermo (al
   massimo 860), menu in una barra trasparente alta 64, larga al massimo 1188 e centrata. */
.gr--g{grid-template-columns:minmax(430px,5fr) minmax(0,7fr)}
.hg{--m:clamp(16px,5vw,88px);--larga:1240px;padding:0}
.hg .pannello{position:relative;display:flex;flex-direction:column;max-width:none;margin:10px;border-radius:30px;
  min-height:min(calc(100vh - 20px),860px);min-height:min(calc(100svh - 20px),860px);
  padding:clamp(112px,16vh,140px) calc(var(--m) - 10px) clamp(28px,5vh,56px)}
.hg .nav{position:absolute;z-index:8;top:24px;left:calc(var(--m) - 10px);right:calc(var(--m) - 10px);max-width:calc(var(--larga) - 2 * var(--m) + 120px);margin:0 auto;
  display:flex;align-items:stretch;gap:12px;padding:0}
.hg .nav__barra{flex:1;min-width:0;height:64px;display:flex;align-items:center;gap:16px;padding:0 12px 0 20px;border-radius:16px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25)}
.hg .nav__barra .nav__link{margin-left:auto;margin-right:auto}
.hg .btn--nav{height:auto;padding:0 24px;border-radius:16px;font-size:15px}
.hg .gr--g{flex:1;align-content:center;width:100%;max-width:calc(var(--larga) - 2 * var(--m) + 120px);margin:0 auto;gap:clamp(28px,4vw,56px);padding-top:0}
.hg .nastro{margin-top:auto;width:100%;max-width:calc(var(--larga) - 2 * var(--m) + 120px);margin-left:auto;margin-right:auto}
.hg h1.t{font-size:clamp(34px,min(3.7vw,6.4vh),60px);margin:0 0 14px}
.hg .sotto{font-size:clamp(15px,min(1.15vw,2.1vh),18px);margin-bottom:22px}
@media (min-width:1101px){
  .hg .edg .ed2__corpo{min-height:clamp(360px,calc(min(100svh,880px) - 380px),520px)}
  /* Alfredo, 16 ottobre: «a sinistra deve essere alzato, la stessa altezza del blocco a destra; a filo del menu a
     sinistra, il box a destra a filo del menu a destra». Il testo occupa l'altezza dell'editor: titolo in cima,
     sottotitolo e bottoni in fondo. */
  .hg .gr--g{align-items:stretch}
  .hg .gr--g>.testo{display:flex;flex-direction:column;align-self:stretch}
  .hg .gr--g>.testo .sotto{margin-top:auto}
  .hg .gr--g>.vis{align-self:center;padding-bottom:0}
  .hg h1.t{font-size:clamp(40px,min(4.3vw,7.6vh),74px);line-height:1.14}  /* Alfredo: «aumenta l'interlinea» */
}
@media (max-width:860px){
  .hg .nav{top:12px}
  .hg .nav__barra .nav__link{display:none}
}
@media (max-width:640px){
  .hg .pannello{padding-top:104px}
  .hg .btn--nav{padding:0 16px;font-size:13.5px}
  .hg .nav__barra{padding:0 14px}
}
/* i due bottoni sulla stessa riga (Alfredo: «Scegli la tua attività di fianco a Preventivo istantaneo») */
.hg .az{flex-wrap:nowrap}
.hg .btn:not(.btn--nav){height:46px;padding:0 18px;font-size:14px}

/* l'editor generico: la tela a sinistra, le scelte a destra. La barra in alto si alleggerisce quando l'editor è stretto
   (Alfredo: «le scritte Home, Contatti si schiacciano se lo schermo è piccolo») */
.edg{container-type:inline-size}
.edg .ed__top b{white-space:nowrap}
.edg .ed__pagine span{flex:none}
@container (max-width:900px){.edg .ed__ante{display:none}}
@container (max-width:800px){.edg .ed__dev{display:none}}
@container (max-width:700px){.edg .ed__pagine{display:none}}
.tela__es{position:absolute;z-index:5;right:10px;top:10px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--viola);
  font:600 9.5px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 4px 12px -4px rgba(0,5,56,.35)}
.edg .ed2__corpo--d{grid-template-columns:minmax(0,1fr) 236px}
.edg .ed__top{height:34px;gap:10px;font-size:12px}
.edg .ed__pub{padding:5px 12px;font-size:11.5px}
.edg .ed__ante{padding:5px 9px;font-size:11px}
.edg .ed__tela{padding:10px}
.edg .sc15{padding:12px;gap:10px}
.edg .sc15>small{font-size:9.5px}
.edg .sc15__eti{margin-bottom:5px;font-size:10.5px}
.scg{gap:10px}
.scg__chips{display:flex;flex-wrap:wrap;gap:4px}
.scg__chips span{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:999px;background:#F1F2F8;font-size:10.5px;font-weight:500;transition:background .3s,color .3s}
.scg__chips .ico{width:12px;height:12px}
.scg__chips span.on{background:var(--viola);color:#fff}
.scg__chips .scg__altri{background:none;color:var(--viola);font-weight:600}
.scg__funzioni{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px}
.scg__funzioni span{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:500;color:#41455E}
.scg__funzioni i{position:relative;flex:none;width:24px;height:14px;border-radius:999px;background:#DCDEE8;transition:background .3s}
.scg__funzioni i::after{content:"";position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .3s}
.scg__funzioni span.on{color:var(--notte)}
.scg__funzioni span.on i{background:var(--verde)}
.scg__funzioni span.on i::after{transform:translateX(10px)}
.edg .sc15__pagine{grid-template-columns:repeat(3,1fr);gap:4px}
.edg .sc15__pagine span{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:2px;padding:6px 7px;font-size:10.5px;line-height:1.2}
.edg .sc15__pagine small{font-size:9.5px;line-height:1.25}
.edg .sc15__cifra{padding:10px 11px}
.edg .sc15__cifra small,.edg .sc15__cifra span{font-size:9.5px}
.edg .sc15__cifra b{font-size:17px}
.edg.f-neg [data-pg="3"]{max-width:110px;padding-left:9px;padding-right:9px;opacity:1}

/* sopra la tela: quello che si accende con «Cosa ti serve» */
.ov{position:absolute;z-index:4;opacity:0;transform:translateY(8px) scale(.94);pointer-events:none;font-family:Inter,sans-serif;
  transition:opacity .45s,transform .45s cubic-bezier(.2,.8,.2,1)}
.edg.f-pren .ov--pren,.edg.f-neg .ov--neg,.edg.f-wa .ov--wa,.edg.f-lingue .ov--lingue{opacity:1;transform:none}
.ov--pren{left:12px;bottom:12px;width:180px;padding:11px;border-radius:12px;background:#fff;color:var(--notte);font-size:11px;box-shadow:0 14px 30px -10px rgba(0,5,56,.5)}
.ov--pren b{display:block;font-size:12px;margin-bottom:7px}
.ov__giorni,.ov__ore{display:flex;gap:4px;margin-bottom:5px}
.ov__giorni span,.ov__ore span{flex:1;padding:4px 0;border-radius:6px;background:#F1F2F8;text-align:center;font-size:10px;font-weight:500}
.ov__giorni .on,.ov__ore .on{background:var(--viola);color:#fff}
.ov--pren em{display:block;margin-top:6px;padding:6px;border-radius:8px;background:var(--notte);color:#fff;text-align:center;font-style:normal;font-weight:600;font-size:10.5px}
.ov--neg{right:12px;top:40px;display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:#fff;color:var(--notte);font-size:11px;font-weight:600;box-shadow:0 8px 20px -8px rgba(0,5,56,.5)}
.ov--neg .ico{width:14px;height:14px;color:var(--viola)}
.ov--wa{right:14px;bottom:14px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#25D366;color:#fff;box-shadow:0 10px 22px -8px rgba(0,0,0,.5)}
.ov--wa .ico{width:22px;height:22px}
.ov--lingue{left:12px;top:12px;display:flex;gap:2px;padding:3px;border-radius:999px;background:#fff;font-size:10px;font-weight:600;box-shadow:0 8px 20px -8px rgba(0,5,56,.5)}
.ov--lingue b,.ov--lingue span{padding:3px 7px;border-radius:999px;color:#5B6078}
.ov--lingue b{background:var(--viola);color:#fff}

/* il nastro dei mestieri, che scorre */
.nastro{display:flex;align-items:center;gap:20px;margin-top:6px;padding-top:14px;border-top:1px solid rgba(255,255,255,.2)}
.nastro small{flex:none;font:600 11px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.nastro__vista{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.nastro__riga{display:flex;gap:34px;width:max-content;animation:nastro 45s linear infinite}
.nastro__riga span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font:600 14px 'Inter Tight',sans-serif;color:rgba(255,255,255,.92)}
.nastro__riga .ico{width:19px;height:19px}
.nastro__riga .nastro__altri{color:rgba(255,255,255,.62);font-weight:500}
@keyframes nastro{to{transform:translateX(calc(-50% - 17px))}}

@media (max-width:1100px){
  .hg .gr--g{grid-template-columns:1fr}
}
@media (max-width:640px){
  .bozza{font-size:11.5px}
  .hg .az{flex-wrap:wrap}
  .edg .ed2__corpo--d{grid-template-columns:1fr}
  .edg .ed__tela .br__vista{min-height:260px}
  .scg__mestiere{grid-column:1/-1}
  .scg__funzioni{grid-template-columns:1fr}
  .scg>div:nth-of-type(3){grid-column:1/-1}
  .edg .sc15__pagine{grid-template-columns:repeat(3,1fr)}
  .edg .sc15__pagine span{flex-direction:column;align-items:flex-start;gap:0}
  .ov--pren{width:136px}
  .ov--pren{width:150px;padding:8px}
  .nastro{flex-direction:column;align-items:flex-start;gap:10px}
  .nastro__vista{width:100%}
}

/* i pezzi comuni delle aree (tendina «Altri servizi», «torna su», chat, esempi: ds/comuni.css) dentro le pagine nuove.
   Le variabili che quelle regole usano, prese dai colori dell'attività se ci sono, se no da quelli di DigitaSito. */
body{--scuro:var(--n-scuro,#000538);--tenue:var(--n-tenue,#5B6078);--font-titoli:var(--n-font,'Inter Tight',sans-serif);
  --font-testo:Inter,system-ui,sans-serif;--marchio:var(--n-acc-testo,#473AE0);--mono:'JetBrains Mono',ui-monospace,monospace}
.hg .altri{margin-left:0}
.hg .altri__bottone{color:#fff;font:500 15px/1 Inter,system-ui,sans-serif}
@media (hover:hover){.hg .altri__bottone:hover{background:rgba(255,255,255,.16)}}
.sz--es{background:var(--fondo)}
.sz--es .es{border-radius:20px}
.sz--es .es__testo b{font-family:var(--font-titoli)}
/* la prima schermata della demo vera al posto dell'anteprima dal vivo (17 ottobre) */
.sz--es .es__schermo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.sz--es .es:hover .es__schermo img{transform:scale(1.03)}}
.sz--es .es__apri{display:inline-flex;align-items:center;gap:8px;align-self:flex-start}
.sz--es .es__apri svg{width:18px;height:18px;flex:none}

/* ------------------------------------------------------------ l'editor dentro l'apertura comune (skill hero-approdo)
   Disegnato a 720 × 470 (--ha-w, --ha-h): hero.js lo scala (--s) per stare a filo del menu e dentro lo schermo. */
.ha .vis{margin:0}
.ha__visivo .v15{height:100%;margin:0;padding:0}
.ha__visivo .edg{height:100%;display:flex;flex-direction:column;border-radius:22px;box-shadow:0 46px 90px -34px rgba(0,0,40,.6),0 0 0 1px rgba(255,255,255,.3)}
.ha__visivo .edg>.ed__top{flex:none}
.ha__visivo .edg .ed2__corpo{flex:1;min-height:0}
.ha__visivo .edg .ed__tela .br__vista{aspect-ratio:auto;height:100%;min-height:0}
.ha__visivo .edg .sc15{overflow:hidden}
.ha .cur em{color:#fff!important}
/* l'editor è disegnato a misura fissa: le regole per il telefono (che guardano lo schermo) non valgono qui dentro */
.ha__visivo .edg .ed2__corpo--d{grid-template-columns:minmax(0,1fr) 236px}
.ha__visivo .edg .sc15{display:flex;flex-direction:column;border-top:0;border-left:1px solid #ECEDF3}
.ha__visivo .scg__funzioni{grid-template-columns:1fr 1fr}
.ha__visivo .edg .ed__pagine{display:flex}
.ha__visivo .ov--pren{width:180px;padding:11px}