.vp-blog{background:#070605;border-top:1px solid rgba(196,168,74,.14);padding:clamp(38px,5vw,64px) 20px} .vp-blog-w{max-width:1080px;margin:0 auto} .vp-blog-ey{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#c4a84a;margin-bottom:10px} .vp-blog-h{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:clamp(1.4rem,3vw,2rem);color:#e9e4d8;margin:0 0 8px} .vp-blog-s{color:#8d877b;font-size:14.5px;line-height:1.7;max-width:62ch;margin:0 0 22px} .vp-blog-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px;margin:0;padding:0;list-style:none} .vp-blog-l a{display:block;padding:16px 18px;background:rgba(255,255,255,.03);border:1px solid rgba(196,168,74,.22);border-radius:10px;color:#e9e4d8;text-decoration:none;font-size:14.5px;line-height:1.55;min-height:44px} .vp-blog-l a:hover,.vp-blog-l a:focus-visible{border-color:#c4a84a} .vp-blog-tutti{display:inline-block;margin-top:20px;color:#c4a84a;font-size:14px;text-decoration:underline}

/* ==========================================================================
   LIVELLO DI COERENZA — VetratePremium
   --------------------------------------------------------------------------
   Perche' sta qui e non in un file nuovo: vp-blocchi.css e' l'unico foglio
   di stile richiamato da TUTTE le pagine del sito. Aggiungere le regole qui
   le applica alle 1.058 pagine senza toccare una sola riga di HTML — quindi
   senza entrare in conflitto con chi sta lavorando sui file delle pagine.

   E' un livello CORRETTIVO: non ridisegna nulla, riporta dentro il sistema
   cio' che ne era uscito. Ogni blocco dice quale difetto chiude.

   Per rimuoverlo: cancellare tutto da questa intestazione in giu'.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. COLORI FUORI SISTEMA
   Il design system ha due colori: nero #030303 e oro #c4a84a. In index.html
   erano entrati --coral (#f97316, arancione), --sky (#0ea5e9, azzurro) e i
   loro derivati: da li' nascevano il pulsante principale in gradiente
   arancione e l'anello azzurro che pulsava attorno al sigillo "15 anni".
   Non si rincorrono le singole regole: si rimappano i token sulla scala oro
   gia' approvata. Le sfumature restano, i colori estranei spariscono.
   -------------------------------------------------------------------------- */
:root{
  --coral:#b89a3e;   /* era arancione  -> oro profondo (gia' in palette) */
  --sky:#dfc06a;     /* era azzurro    -> oro chiaro   (gia' in palette) */
  --cyan:#e8d8a8;    /* era ciano      -> champagne    (gia' in palette) */
  --amber:#c4a84a;   /* -> oro canonico */
}

/* --------------------------------------------------------------------------
   2. SFONDAMENTO ORIZZONTALE SU MOBILE
   Misurato su iPhone 390px: index.html restituiva un documento largo 745px.
   Il logo finiva fuori schermo a destra, il sigillo garanzia era tagliato a
   meta', le pillole informative uscivano dal bordo.
   La causa non e' una sola: alcune tabelle larghe (fino a 814px su
   bari.html) allargano il documento, e le barre in position:fixed si
   adeguano a quella larghezza — sfuggendo all'overflow:hidden del body,
   perche' un elemento fixed non e' contenuto dal body.
   -------------------------------------------------------------------------- */
html{overflow-x:hidden;max-width:100%}
body{overflow-x:hidden;max-width:100%;position:relative}

/* le barre fisse non possono mai superare la larghezza dello schermo */
#topBar,#corpNav,#bookingBar,#stickyCta,.sticky-cta,.exit-popup,
.form-toast,#formToast,.minichat,#miniChat,.sp-notif,#spNotif,.wa-float,#waFloat{
  max-width:100vw!important;
  box-sizing:border-box;
}
@media(max-width:768px){
  #topBar,#corpNav,#bookingBar,#stickyCta,.sticky-cta{width:100%!important;left:0!important;right:0!important}
  .minichat,#miniChat{max-width:calc(100vw - 24px)!important;right:12px!important;left:auto!important}
  .form-toast,#formToast{max-width:calc(100vw - 24px)!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important}
  .sp-notif,#spNotif{max-width:calc(100vw - 24px)!important;left:12px!important;right:auto!important}
}

/* una tabella larga scorre dentro se stessa invece di allargare la pagina */
@media(max-width:900px){
  table{max-width:100%}
  .cmp-table,.price-table,.vp-tab-scroll,table[class*="table"]{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}
/* nessun media, immagine o iframe puo' sfondare il contenitore */
img,svg,video,iframe,canvas{max-width:100%}


/* le pillole informative della barra superiore vanno a capo invece di
   uscire dal bordo: su 390px la seconda veniva troncata a meta' frase */
@media(max-width:768px){
  #bookingBar,.bb-live,.hero-badges,.badge-row{
    flex-wrap:wrap!important;
    max-width:100%!important;
    white-space:normal!important;
  }
  #bookingBar *,.bb-live *{min-width:0;max-width:100%;white-space:normal}
}

/* --------------------------------------------------------------------------
   3. RISCONTRO DI FOCUS
   Su index.html la regola .fi{outline:none} dei campi di form annullava
   l'anello dorato globale: chi compila da tastiera non vedeva piu' dove si
   trovava, proprio sui campi che generano i contatti.
   -------------------------------------------------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible,
.fi:focus-visible,.btn:focus-visible{
  outline:2px solid #c4a84a!important;
  outline-offset:3px!important;
  border-radius:2px;
}

/* --------------------------------------------------------------------------
   4. AREE DI TOCCO
   Misurate sotto la soglia di 44x44px: apertura menu (38x31), chiusura del
   popup di uscita (24x24), menu del portale partner (32x40). Sono i primi
   tre comandi che un utente da telefono cerca di toccare.
   -------------------------------------------------------------------------- */
@media(max-width:900px){
  .ham,.mobile-menu-btn,.menu-toggle,.nav-toggle{
    min-width:44px;min-height:44px;
    display:inline-flex!important;align-items:center;justify-content:center;
  }
  .exit-close,.popup-close,.modal-close,.close-btn,[aria-label*="hiudi"]{
    min-width:44px;min-height:44px;
    display:inline-flex!important;align-items:center;justify-content:center;
  }
}

/* --------------------------------------------------------------------------
   5. MOVIMENTO
   Il sigillo garanzia pulsava con un ciclo di tre colori. Ridotto a una
   pulsazione oro sola. E chi ha chiesto al sistema operativo meno
   animazioni deve ottenerle: e' una richiesta di accessibilita', non una
   preferenza estetica.
   -------------------------------------------------------------------------- */
.guarantee-badge{animation-duration:6s!important}
/* su telefono il sigillo restava tagliato dal bordo destro */
@media(max-width:768px){
  .guarantee-badge{
    width:72px!important;height:72px!important;
    right:10px!important;left:auto!important;
    max-width:calc(100vw - 20px)!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;
  }
}

/* ==========================================================================
   RICHIAMO PER LE ATTIVITA' COMMERCIALI
   --------------------------------------------------------------------------
   MISURATO PRIMA DI AGGIUNGERLO: sulla home il collegamento alla pagina
   HORECA stava al 78% del documento, e il pie' di pagina non lo citava
   affatto - 0 su 19 collegamenti.
   Il testo la' in fondo e' buono, ma un ristoratore che arriva sulla home
   trova un'apertura che parla a chi ha una casa, e dovrebbe scorrere tre
   quarti di pagina per scoprire che c'e' qualcosa per lui.
   Questa fascia sta in alto, dice a chi parla, e porta allo strumento.
   ========================================================================== */
.vp-horeca{max-width:1180px;margin:0 auto;padding:0 24px}
.vp-horeca__in{display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  padding:22px 28px;border-radius:12px;
  background:linear-gradient(120deg,rgba(196,168,74,.12),rgba(196,168,74,.035));
  border:1px solid rgba(196,168,74,.28)}
.vp-horeca__t{flex:1 1 320px;min-width:0}
.vp-horeca__e{display:block;font-size:.62rem;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--gold,#c4a84a);margin-bottom:7px}
.vp-horeca__h{font-family:var(--font-h,'Cormorant Garamond',Georgia,serif);
  font-weight:400;font-size:clamp(1.15rem,2.2vw,1.55rem);color:#efe9dc;
  margin:0 0 6px;line-height:1.25}
.vp-horeca__p{margin:0;font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.66)}
.vp-horeca__a{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  min-height:48px;padding:14px 24px;border-radius:3px;text-decoration:none;
  background:linear-gradient(135deg,#c4a84a,#dfc06a);color:#0b0a08;
  font-size:.76rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  transition:filter .2s}
.vp-horeca__a:hover{filter:brightness(1.08)}
@media(max-width:720px){
  .vp-horeca{padding:0 16px}
  .vp-horeca__in{padding:20px 18px;gap:18px}
  .vp-horeca__a{width:100%;justify-content:center}
}