*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;background:#07060d;font-family:'Outfit',sans-serif;font-weight:300;color:#f4f2ff}

/* CURSOR — solo desktop */
.cursor{position:fixed;width:6px;height:6px;background:#7B5CF0;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s,height .2s;mix-blend-mode:screen;display:none}
.cursor.big{width:34px;height:34px;background:transparent;border:1px solid #7B5CF0}
@media(pointer:fine){body{cursor:none}.cursor{display:block}}

/* VIDEO BG */
.video-bg{position:fixed;inset:0;z-index:0;overflow:hidden}
.video-bg video{width:100%;height:100%;object-fit:cover;opacity:0.72}
.video-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(7,6,13,0.14) 0%,rgba(7,6,13,0.07) 100%)}

/* =====================
   LAYOUT DESKTOP
   ==================== */
.page{
  position:fixed;inset:0;z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  padding:2.2rem 2.8rem;
}

/* TOP LEFT — logo */
.top-left{display:flex;align-items:flex-start;justify-content:flex-start;opacity:0;animation:fd .8s .1s forwards}

/* TOP RIGHT — contact */
.top-right{display:flex;align-items:flex-start;justify-content:flex-end;opacity:0;animation:fd .8s .2s forwards}

/* BOTTOM LEFT — descriptor */
.bottom-left{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:.9rem;opacity:0;animation:fd .8s .35s forwards}

/* BOTTOM RIGHT — legal */
.bottom-right{display:flex;align-items:flex-end;justify-content:flex-end;opacity:0;animation:fd .8s .45s forwards}

/* ELEMENTOS */
.btn-contact{
  font-family:'Outfit',sans-serif;font-size:.7rem;font-weight:300;
  letter-spacing:.18em;text-transform:uppercase;color:#f4f2ff;
  background:transparent;border:1px solid rgba(244,242,255,.3);
  padding:.55rem 1.3rem;border-radius:100px;cursor:none;
  text-decoration:none;transition:border-color .25s,background .25s;
  white-space:nowrap;
}
.btn-contact:hover{border-color:#7B5CF0;background:rgba(123,92,240,.12)}

.descriptor{
  font-size:1.15rem;line-height:1.65;
  color:rgba(244,242,255,.75);
  max-width:46vw;font-weight:300;letter-spacing:.01em;
}

.socials{display:flex;gap:1.4rem;flex-wrap:wrap}
.socials a{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(244,242,255,.45);text-decoration:none;
  transition:color .25s;cursor:none;
}
.socials a:hover{color:#7B5CF0}

.legal{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,242,255,.3)}

/* LOGO */
.logo-svg{height:62px;width:auto}

@keyframes fd{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* =====================
   LAYOUT MÓVIL
   ==================== */
@media(max-width:768px){
  html,body{height:100%;overflow:hidden}

  .page{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:1.6rem 1.4rem 1.8rem;
    height:100%;
    position:fixed;
    inset:0;
  }

  .top-left{align-items:center}
  .top-right{align-items:center;justify-content:flex-end}

  .page-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }

  .top-left,.top-right{
    position:static;
    animation:fd .8s .1s forwards;
  }

  .logo-svg{height:36px}

  .btn-contact{
    font-size:.62rem;
    padding:.45rem 1rem;
    cursor:auto;
  }
  .socials a{cursor:auto}

  .page-bottom{
    display:flex;
    flex-direction:column;
    gap:1.2rem;
  }

  .bottom-left{
    justify-content:flex-start;
    animation:fd .8s .25s forwards;
  }

  .descriptor{
    font-size:.95rem;
    max-width:100%;
    line-height:1.6;
  }

  .bottom-right{
    justify-content:flex-start;
    animation:fd .8s .35s forwards;
  }

  .legal{font-size:.55rem}
}

/* Tablets intermedios */
@media(min-width:769px) and (max-width:1024px){
  .page{padding:2rem 2.2rem}
  .logo-svg{height:48px}
  .descriptor{font-size:1rem;max-width:52vw}
}

/* VIDEO MOBILE */
#bgvid-mobile{display:none}
@media(max-width:768px){
  #bgvid{display:none}
  #bgvid-mobile{display:block}
}