/* Le parti comuni delle anteprime rifatte (anteprime_nuove.py): quelle che
   devono essere uguali in tutte — la fascia, i campi del modulo, il video in
   cima, le righe legali — e quasi niente altro. Colori, caratteri e impaginazione li da' ogni
   anteprima, con le sue variabili:
     --f fondo, --t testo, --m testo secondario, --l linee, --carta schede,
     --a accento (testo e fuoco), --a-btn fondo dei bottoni, --a-su testo sui
     bottoni, --font-t titoli, --font-b testo, --bordo margine laterale. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--f);color:var(--t);font:400 1.0625rem/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
picture{display:block}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--a);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* la fascia: la stessa in tutte le anteprime, leggibile su qualunque fondo */
.demobar{position:relative;z-index:60;display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.45rem 1rem;background:#202020;color:#f2f2f2;font:500 .8rem/1.35 system-ui,sans-serif;text-align:center}
.demobar .d{width:.5rem;height:.5rem;border-radius:50%;background:#e5675b;flex:none}
@media(max-width:620px){.demobar .long{display:none}.demobar b::after{content:" · Zena Web";font-weight:400}}

/* l'intestazione: lo scheletro; l'aspetto lo da' l'anteprima */
.testata{position:sticky;top:0;z-index:40}
.t-bar{display:flex;align-items:center;gap:1.6rem;padding:.85rem var(--bordo)}
.t-marchio{text-decoration:none;margin-right:auto;font-family:var(--font-t);display:inline-block;padding:.3rem 0}
#nav ul{display:flex;gap:1.5rem;list-style:none;padding:0;margin:0}
#nav a{text-decoration:none;display:inline-block;padding:.35rem 0}
.t-tel{text-decoration:none;font-weight:600;white-space:nowrap;padding:.35rem 0}
.t-apri{display:none;width:2.75rem;height:2.75rem;border:0;background:none;color:inherit;cursor:pointer;position:relative;z-index:46}
.t-apri span{display:block;width:1.4rem;height:2px;background:currentColor;margin:.35rem auto;transition:transform .25s}
.nav-aperto .t-apri span:first-child{transform:translateY(.22rem) rotate(45deg)}
.nav-aperto .t-apri span:last-child{transform:translateY(-.22rem) rotate(-45deg)}
@media(max-width:860px){
  .t-apri{display:block}
  .t-tel{display:none}
  #nav{position:fixed;inset:0;z-index:45;display:none;align-items:center;justify-content:center;background:var(--f);color:var(--t)}
  #nav.open{display:flex}
  #nav ul{flex-direction:column;align-items:center;gap:1.2rem;font:500 1.6rem/1.2 var(--font-t)}
  .nav-aperto{overflow:hidden}
}

/* le note sui contenuti d'esempio */
.nota{font-size:.85rem;color:var(--m);margin-top:1rem;max-width:60ch}

/* i suggerimenti sugli orari di Google */
.avviso-orari{font-size:.9rem;color:var(--m);max-width:44ch;margin:1rem 0}

/* i campi dei moduli dimostrativi: la forma del modulo la da' l'anteprima */
.bk{display:grid;gap:1rem}
.bk-riga{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1rem}
.bk label{display:grid;gap:.35rem;font-weight:600;font-size:.92rem}
.bk input,.bk select,.bk textarea{font:400 1rem var(--font-b);padding:.75rem .85rem;border:1.5px solid var(--l-campo,#9a9a9a);
  border-radius:var(--r,6px);background:var(--campo,#fff);color:var(--t-campo,#1a1a1a);min-height:3rem}
.bk .bk-ok{display:flex;gap:.6rem;align-items:flex-start;font-weight:400}
.bk .bk-ok input{min-height:auto;width:1.2rem;height:1.2rem;margin-top:.2rem;flex:none}
.bk button{justify-self:start;font:600 1rem var(--font-b);background:var(--a-btn);color:var(--a-su);border:0;
  border-radius:var(--r-btn,6px);padding:.95rem 1.6rem;cursor:pointer}
.bk-esito{font-size:.85rem;color:var(--m)}

/* il comando che ferma il movimento (WCAG 2.2.2) */
.ferma-moto{position:absolute;right:1rem;bottom:1rem;z-index:5;font:600 .8rem/1 var(--font-b);color:#fff;
  background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.4);border-radius:99px;padding:.6rem .95rem;cursor:pointer}
html.fermo *,html.fermo *::before,html.fermo *::after{animation-play-state:paused!important}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .ferma-moto{display:none}
}

/* ── la ricetta del 22/10 (3) ─────────────────────────────────────────────── */
/* il video in cima: lo scheletro; parole, colori e misure li da' l'anteprima */
.clip{position:relative;display:grid;min-height:var(--clip-h,calc(100svh - 6rem));overflow:hidden;background:#141414;isolation:isolate;padding:0}
.clip-film{position:absolute;inset:0;z-index:-1}
.clip-film picture,.clip-film img,.clip-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* il video e' 1 px piu' stretto del poster per lato: per l'LCP Chrome tiene
   l'elemento piu' grande (l'area VISIBILE nello schermo), e un video grande
   quanto il poster, a meno di arrotondamenti, gli rubava il posto a 2,2 s
   (pizzeria, 22/10). Accorciarlo in basso non serve: il fondo e' fuori dallo
   schermo. Sotto la velatura il pixel non si vede. */
.clip-film video{left:1px;width:calc(100% - 2px);opacity:0;transition:opacity .9s ease}
.clip-film.acceso video{opacity:1}
/* il fuoco orizzontale del video e del suo poster (clip_hero.py, FUOCO): stessa
   object-position per l'immagine e per il video, cosi' la fetta del telefono
   e' la stessa e quando il video parte non salta (voce Cowork 24/10 (3)) */
.clip-film.fx-0 img,.clip-film.fx-0 video{object-position:0% 50%}.clip-film.fx-5 img,.clip-film.fx-5 video{object-position:5% 50%}.clip-film.fx-10 img,.clip-film.fx-10 video{object-position:10% 50%}.clip-film.fx-15 img,.clip-film.fx-15 video{object-position:15% 50%}.clip-film.fx-20 img,.clip-film.fx-20 video{object-position:20% 50%}.clip-film.fx-25 img,.clip-film.fx-25 video{object-position:25% 50%}.clip-film.fx-30 img,.clip-film.fx-30 video{object-position:30% 50%}.clip-film.fx-35 img,.clip-film.fx-35 video{object-position:35% 50%}.clip-film.fx-40 img,.clip-film.fx-40 video{object-position:40% 50%}.clip-film.fx-45 img,.clip-film.fx-45 video{object-position:45% 50%}.clip-film.fx-55 img,.clip-film.fx-55 video{object-position:55% 50%}.clip-film.fx-60 img,.clip-film.fx-60 video{object-position:60% 50%}.clip-film.fx-65 img,.clip-film.fx-65 video{object-position:65% 50%}.clip-film.fx-70 img,.clip-film.fx-70 video{object-position:70% 50%}.clip-film.fx-75 img,.clip-film.fx-75 video{object-position:75% 50%}.clip-film.fx-80 img,.clip-film.fx-80 video{object-position:80% 50%}.clip-film.fx-85 img,.clip-film.fx-85 video{object-position:85% 50%}.clip-film.fx-90 img,.clip-film.fx-90 video{object-position:90% 50%}.clip-film.fx-95 img,.clip-film.fx-95 video{object-position:95% 50%}.clip-film.fx-100 img,.clip-film.fx-100 video{object-position:100% 50%}
.clip-parole{position:relative;z-index:1}
/* il velo sotto le parole (voce Cowork 26/10 (1)). Il velo della sezione e'
   disegnato per una misura dello schermo: quando le parole salgono (schermi
   bassi) o si allargano (telefono) escono dalla parte scura e su un fotogramma
   chiaro non si leggono piu'. Questo le segue: un rettangolo grande quanto il
   blocco delle parole, col colore d'inchiostro della pagina, sfumato su tutti
   i lati per --velo-f. Spento se la pagina non da' --velo-parole. Misurato
   su poster e video con analisi/contrasto-clip.js. */
.clip-parole::before{content:"";position:absolute;z-index:-1;inset:calc(-1 * var(--velo-f,5rem));pointer-events:none;background:var(--velo-parole,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--velo-f,5rem) calc(100% - var(--velo-f,5rem)),transparent),linear-gradient(180deg,transparent,#000 var(--velo-f,5rem) calc(100% - var(--velo-f,5rem)),transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 var(--velo-f,5rem) calc(100% - var(--velo-f,5rem)),transparent),linear-gradient(180deg,transparent,#000 var(--velo-f,5rem) calc(100% - var(--velo-f,5rem)),transparent);mask-composite:intersect}
.clip-nome,.clip-frase{display:block}
.clip-ferma{position:absolute;z-index:3;right:var(--bordo);bottom:1rem;font:600 .8rem/1 var(--font-b);color:#fff;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.45);border-radius:99px;padding:.65rem 1rem;cursor:pointer}
/* la fonte lascia sempre posto al bottone «Ferma il video» (largo circa 7rem) e
   ai due margini: con 60% o con 100% - 13rem, fra 320 e 360 px andava su quattro
   o cinque righe e copriva il bottone del titolo, o il bottone del video
   (voce Cowork 26/10 (1)) */
.clip-fonte{position:absolute;z-index:2;left:var(--bordo);bottom:1rem;font-size:.75rem;color:#fff;background:rgba(0,0,0,.6);padding:.3rem .7rem;border-radius:12px;max-width:calc(100% - 2 * var(--bordo) - 9rem)}

/* le righe legali del piede, uguali in tutte */
.legale{display:grid;gap:.3rem;font-size:.82rem;color:var(--m)}
.legale a{display:inline-block;padding:.2rem 0;margin-right:.9rem}
.maps{font-weight:600}

/* ── il secondo video, più giù (voce 23/10 (5)) ─────────────────────────── */
.secondo{position:relative;overflow:hidden;background:#000;aspect-ratio:16/9;width:100%;border-radius:var(--r,3px)}
.secondo picture,.secondo img{display:block;width:100%;height:100%;object-fit:cover}
.secondo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.secondo.acceso video{opacity:1}
.secondo-ferma{position:absolute;right:.75rem;bottom:.75rem;z-index:2;font:600 .85rem/1 var(--font-b,system-ui),sans-serif;min-height:44px;padding:.65rem .95rem;
  border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(10,10,10,.78);color:#fff;cursor:pointer}
.secondo-ferma:focus-visible{outline:2px solid #fff;outline-offset:2px}
.secondo-ferma[hidden]{display:none}
.secondo-fonte{position:absolute;left:.75rem;bottom:.75rem;z-index:2;margin:0;font-size:.72rem;line-height:1.3;color:#fff;
  background:rgba(0,0,0,.66);padding:.3rem .6rem;border-radius:12px;max-width:calc(100% - 11rem)}
@media (prefers-reduced-motion:reduce){.secondo video{transition:none}}

/* i campi restano nel loro riquadro (voce Cowork 26/10 (1)): un input ha una
   larghezza minima propria, e dentro una griglia allargava la cella fino a
   uscire dal modulo (Nome e Telefono affiancati, l'Email del B&B sopra il Nome) */
input,select,textarea{min-width:0;max-width:100%;box-sizing:border-box}
form label,form .riga>*,form .bk-riga>*{min-width:0}