/* Página casi vacía + un header-frame arriba */
:root { --bg: #060814; --border:#ffffff1a; }
*{ box-sizing:border-box; }
html, body { height:100%; }
body{
  margin:0;
  background: var(--bg);
  overflow-x:hidden;
}

/* FRAME arriba */
.frame{
  position: relative;
  width: 100%;
  height: min(80vh, 660px);   /* frame visible grande en móvil */
  overflow: hidden;          /* recorta todo fuera del frame */
  border-bottom: 1px solid var(--border);
  background: #050713;
}

/* Contenedor interno del frame */
.frame-inner{
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Capas */
.layer, .logo{
  position:absolute;
  inset: 0;
  width:100%;
  height:100%;
  object-fit: contain;     /* cambia a contain si tus PNG deben verse completos */
  pointer-events:none;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.l1, .l2{
    object-fit: cover;
}

/* Logo centrado, tamaño controlado */
.logo{
  inset: auto;
  left: 50%;
  top: 60%;
  width: min(800px, 130vw);
  height: auto;
  transform: translate3d(-50%, -50%, 0);
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.55));
}



/* El resto de la página "vacío" pero con scroll */
.empty{
  height: 260vh; /* lo que te permite scrollear hasta sacar el frame del encuadre */
}


/* =========================================================
   ====== VERSIÓN MÓVIL (SOLO MEDIA QUERIES) ======
   IMPORTANTE:
   - Todo lo de escritorio queda INTACTO.
   - Esto solo aplica cuando el ancho <= 768px.

   Ajustes recomendados:
   1) Frame más bajo en móvil (para no ocupar toda la pantalla)
   2) Logo más pequeño
   3) Menos scroll total (vacío)
========================================================= */
@media (max-width: 768px){

  /* 1) Frame más compacto en móvil */
  .frame{
    height: min(62vh, 420px);
  }

  /* 2) Logo más pequeño y centrado (misma lógica) */
.l1, .l2{
    object-fit: contain;
}

  /* 3) Menos scroll en el resto de la página */
  .empty{
    height: 220vh;
  }

  /* OPCIONAL:
     Si tus PNG son transparentes y en móvil se recortan feo,
     cambia cover -> contain SOLO en móvil.
  */
  /*
  .layer{
    object-fit: contain;
  }
  */
}