/*
 <link rel="stylesheet" href="/portals/0/Cassonetti/4a/css/video.css">
*/

/* =========================================
   SCOPE & BASE
   ========================================= */
.vt-page{
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  max-width:1000px;
  position:relative;
}
.vt-page img{max-width:100%;height:auto;display:block;}
.vt-accent{color:#007d4e;} /* verde scuro */

/* =========================================
   TITOLI
   ========================================= */
.vt-title{
  margin:10px 0 10px;
  line-height:1.05;
  font-weight:800;
  text-transform:uppercase;
}
.vt-title-line{display:inline-block;font-size:56px;}
.vt-title-light{color:#b4dc00;}  /* verde brillante */
.vt-title-dark{color:#007d4e;}   /* verde scuro */

/* =========================================
   TESTI INTRO (compattati)
   ========================================= */
.vt-intro{margin-top:10px;margin-bottom:0;}
.vt-intro p{margin:0 0 6px !important;}  /* forza margini più stretti */
.vt-lead{font-size:16px;color:#333;margin-bottom:6px !important;}

/* elenco con pallini verdi */
.vt-list{
  list-style:none;
  padding-left:0;
  margin:4px 0 6px;
  color:#222;
  font-size:14px;
}
.vt-list li{
  position:relative;
  padding-left:18px;
  margin-bottom:6px;
  line-height:1.5;
}
.vt-list li::before{
  content:"●";
  position:absolute;
  left:0;top:0;
  color:#007d4e;
  font-size:12px;
  line-height:1.5;
}

/* =========================================
   IMMAGINE TELEFONO (trasparente e sovrapposta)
   ========================================= */
.vt-phone-wrap{
  position:relative;
  height:100%;
  padding-top:0;
  overflow:visible; /* consente la fuoriuscita */
}
.vt-page .vt-phone{ /* più specifico + override affidabile */
  background:transparent !important;             /* il file deve avere alpha */
  filter: drop-shadow(0 12px 36px rgba(0,0,0,0.28));
  -webkit-filter: drop-shadow(0 12px 36px rgba(0,0,0,0.28));
  max-width:320px !important;                    /* più piccolo */
  transform:rotate(-8deg) translateY(28px) !important; /* PIÙ IN ALTO */
  margin:0 auto !important;
  position:relative;
  z-index:2;                                     /* sopra la fascia verde */
}

/* =========================================
   FASCIA VERDE CON QR (tirata su con translate)
   ========================================= */
.vt-page .vt-cta-band{
  background:#b4dc00;
  border-radius:6px;
  padding:18px 18px 16px;        /* compattata */
  position:relative;
  z-index:1;                      /* sotto al telefono */
  transform: translateY(-60px);   /* RISALITA AFFIDABILE */
  will-change: transform;
}
.vt-qr-box{
  background:#ffffff;
  border:2px solid rgba(0,0,0,0.08);
  border-radius:6px;
  padding:10px;
  display:inline-block;
}
.vt-qr-box img{
  width:140px;                   /* QR ridotto */
  max-width:100%;
  height:auto;
}
.vt-qr-caption{
  margin-top:12px;
  font-weight:800;
  color:#ffffff;
  text-transform:uppercase;
  font-size:20px;
  line-height:1.15;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width:991px){
  .vt-title-line{font-size:48px;}
  .vt-page .vt-phone{
    max-width:290px !important;
    transform:rotate(-7deg) translateY(30px) !important; /* più in alto */
  }
  .vt-page .vt-cta-band{ transform: translateY(-28px); padding:16px 18px 14px; }
  .vt-qr-box img{width:1300px;}
}
@media (max-width:767px){
  .vt-title-line{font-size:38px;}
  .vt-lead{font-size:15px;}
  .vt-qr-caption{font-size:16px;}
  .vt-page .vt-phone{
    max-width:260px !important;
    transform:rotate(-6deg) translateY(24px) !important;
  }
  .vt-page .vt-cta-band{ transform: translateY(-16px); padding:14px 14px 12px; }
  .vt-qr-box img{width:115px;}
}