/* Demo: copia fedele dell'hero del sito ufficiale (header Elementor 116, home 2503), solo per mostrare il widget. */
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/raleway-latin.woff2) format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/eb-garamond-latin.woff2) format("woff2"); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 300 18px/28px Helvetica, "Helvetica Neue", Arial, sans-serif; color: #767676; background: #fff; }
a { color: #4a192c; }
.topbar { height: 39px; display: flex; align-items: center; justify-content: center; background: #a79f93; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center; padding: 0 16px; }
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
.header-riga { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.pannello { display: flex; align-items: center; gap: 0; background: #bac0c2; border-radius: 0 0 23px 0; padding: 8px 30px 12px 30px; min-height: 137px; flex: 0 1 1260px; }
.logo { display: block; flex: none; padding-right: 30px; margin-right: 30px; border-right: 1px solid #fff; }
.logo img { display: block; width: 110px; height: auto; }
.widget-slot { flex: 1; min-width: 0; min-height: 113px; }
:lang(en) .widget-slot { min-height: 106px; }
.menu { display: flex; align-items: center; gap: 22px; background: #bac0c2; border-radius: 0 0 0 23px; padding: 16px 18px 18px 20px; color: #fff; flex: none; }
.lingue { display: flex; flex-direction: column; gap: 10px; padding-right: 22px; border-right: 1px solid #fff; }
.lingue a { display: block; line-height: 0; }
.lingue img { width: 25px; height: 17px; }
.hamb { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 18px; text-transform: uppercase; color: #fff; }
.hamb i { display: block; width: 36px; height: 3px; background: #fff; border-radius: 2px; box-shadow: 0 9px 0 #fff, 0 18px 0 #fff; margin-bottom: 18px; }
.hero { position: relative; height: 750px; background: #6f7b80 url(/assets/hero.webp) center / cover no-repeat; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 200px; text-align: center; }
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .12); }
.hero > * { position: relative; }
.hero h1 { margin: 0; font: 400 50px/65px "EB Garamond", Georgia, serif; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }
.hero p { margin: 10px 0 0; color: #fff; font-size: 18px; font-weight: 300; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.hero .scroll { display: none; }
.sotto { max-width: 900px; min-height: 1600px; margin: 0 auto; padding: 50px 20px 120px; text-align: center; }
.sotto h2 { font: 400 40px/52px "EB Garamond", Georgia, serif; color: #a79f93; text-transform: uppercase; margin: 0 0 16px; }
.nota-demo { font-size: 14px; line-height: 1.5; color: #767676; max-width: 640px; margin: 24px auto 0; }
.bottom-bar { display: none; }
.mob-header { display: none; }
/* Telefono: misure rilevate sul sito ufficiale (375/393/430): header 96 px #BAC0C2, logo 71x76 a (20,10),
   hero 83% dell'altezza, H1 36/44 a 281 px dal fondo dell'hero, sottotitolo 64 px sotto, "SCROLL" a 106 px dal fondo
   con linea, barra in basso 57 px (CHIAMACI/WHATSAPP #A79F93, PRENOTA #4A192C), Raleway 15 px, icone 20 px. */
@media (max-width: 1024px) {
  .header { display: none; }
  .mob-header { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 101; height: 96px; align-items: center; justify-content: space-between; padding: 0 20px; background: #bac0c2; }
  .mob-header .logo { border: 0; padding: 0; margin: 0; }
  .mob-header .logo img { width: 71px; height: 76px; object-fit: contain; }
  .mob-header .destra { display: flex; align-items: center; gap: 20px; height: 52px; }
  .mob-header .destra img { width: 25px; height: 17px; display: block; }
  .mob-header .sep { width: 1px; height: 52px; background: #fff; }
  .mob-header .hamb i { width: 36px; height: 3px; margin: 0 0 18px; }
  .hero { height: 83vh; min-height: 0; padding: 0; justify-content: flex-start; display: block; }
  .hero::before { background: rgba(0, 0, 0, .1); }
  .hero h1 { position: absolute; left: 0; right: 0; bottom: 237px; font-size: 36px; line-height: 44px; text-shadow: none; }
  .hero p { position: absolute; left: 0; right: 0; bottom: 189px; margin: 0; font-size: 18px; line-height: 28px; text-shadow: none; padding: 0 16px; }
  .hero .scroll { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 106px; color: #fff; font-size: 16px; line-height: 18px; font-weight: 300; }
  .hero .scroll::after { content: ""; position: absolute; left: 50%; top: 26px; bottom: 0; width: 1px; background: #fff; }
  .bottom-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; height: 57px; }
  .bottom-bar a { position: relative; display: block; background: #a79f93; color: #fff; text-decoration: none; font: 400 15px/9px Raleway, sans-serif; border-right: 1px solid #fff; text-align: center; }
  .bottom-bar a:last-child { background: #4a192c; border: 0; }
  .bottom-bar svg { position: absolute; left: 50%; top: 10px; margin-left: -10px; width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.3; }
  .bottom-bar span { position: absolute; left: 0; right: 0; top: 37px; }
  .sotto { padding-bottom: 120px; }
  .sotto h2 { font-size: 30px; line-height: 39px; }
}