/* =========================================================
   VITRIO MOCKUP V2
   Diseño basado en el lenguaje visual actual de Vitrio.
   Componente completamente independiente.
   ========================================================= */

:root{
  --vm2-page:#0a0d11;
  --vm2-header:#282828;
  --vm2-panel:#1a1b1f;
  --vm2-inner:#292929;
  --vm2-border:rgba(255,255,255,.08);
  --vm2-text:#f1f1f3;
  --vm2-muted:#a4a7ad;
  --vm2-muted-2:#777b83;
  --vm2-blue:#087bea;
  --vm2-blue-light:#9fdfff;
  --vm2-blue-dark:#15548d;
  --vm2-shadow:0 28px 70px rgba(0,0,0,.52);
}



/* =========================================================
   ESCENARIO
   ========================================================= */

.vitrio-mockup-v2-stage{
  position:relative;

  width:440px;

  min-height:600px;

  display:flex;
  align-items:center;
  justify-content:center;
}


/* =========================================================
   PÁGINA
   Aproximadamente 30% menor que la primera versión.
   ========================================================= */

.vitrio-mockup-v2-page{
  position:relative;

  width:285px;

  /* Altura aproximada de una pantalla de celular */
  height:540px;

  overflow-y:auto;
  overflow-x:hidden;

  border-radius:22px;

  background:var(--vm2-page);

  border:1px solid rgba(255,255,255,.08);

  box-shadow:
    var(--vm2-shadow),
    0 0 0 1px rgba(8,123,234,.04);

  z-index:2;

  transform:rotate(1deg);

  /* Ocultar scrollbar */
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.vitrio-mockup-v2-page::-webkit-scrollbar{
  display:none;
}


.vitrio-mockup-v2-page img{
  width: 100%;
}


/* =========================================================
   ETIQUETAS FLOTANTES
   ========================================================= */

.vitrio-mockup-v2-float{
  position:absolute;

  z-index:3;

  display:flex;
  align-items:center;
  gap:7px;

  padding:9px 12px;

  border:1px solid rgba(255,255,255,.09);

  border-radius:11px;

  background:rgba(22,27,34,.9);

  box-shadow:0 14px 30px rgba(0,0,0,.28);

  backdrop-filter:blur(10px);

  color:#bac2cb;

  font-size:.66rem;
  font-weight:600;

  animation:vitrioMockupV2Float 4.5s ease-in-out infinite;
}

.vitrio-mockup-v2-float span{
  color:#70adff;
}

.vitrio-mockup-v2-float--one{
  top:115px;
  left:21px;
}

.vitrio-mockup-v2-float--two{
  top:275px;
  right:0px;

  animation-delay:1.2s;
}

.vitrio-mockup-v2-float--three{
  bottom:108px;
  left:6px;

  animation-delay:2.3s;
}

@keyframes vitrioMockupV2Float{
  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-7px);
  }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1216px){
  .mockup{
    zoom:0.9;
  }
    .in-hero{
    zoom:0.9;
  }
}
@media(max-width:1138px){
  .mockup{
    zoom:0.8;
  }
    .in-hero{
    zoom:0.8;
  }
}
@media(max-width:924px){
  .hero{
    flex-direction: column;
  }
    .mockup{
    zoom:1;
  }
    .in-hero{
    zoom:1;
  }
  .in-hero{
  text-align: center;
}
.hero-actions{
justify-content: center;
}
.he-btn{
margin-left: 5px;
}
.site-name {
  padding: 30px;
  text-align: center;
}
}
@media(max-width:620px){
  .vitrio-mockup-v2-stage{
    min-height:auto;
  }
}
.unite {
  text-align: center;
  margin-top: 14px;
}
.unite a {
  background-color: #e5e7eb;
  color: #282828;
  padding: 10px 27px;
  display: inline-block;
  text-decoration: none;
  border-radius: 40px;
  margin-bottom: 14px;
  box-shadow: 0 1px 24px rgba(0, 0, 0, 0.3);
  transition: color 0.2s ease, transform 0.2s ease;
  font-family: "Google Sans",sans-serif;
  font-size: 0.7em;
}
.unite a:hover {
  background-color: #0071e3;
  color: #FFFFFF !important;
  transform: scale(1.02);
}
.vitrio-mockup-v2-gallery div {
  border-radius: 14px;
}