/* OXMAL "Entrar" — full-screen mobile card with video background */
:root{
  --text: #EFE9DC;
  --panel: rgba(0,0,0,0.22);
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
html,body{
  margin:0;
  background:#000;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overscroll-behavior:none;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
}
.viewport{
  position:relative;
  inline-size:100vw; width:100vw;
  block-size:100dvh; height:100dvh; min-height:100dvh; height:-webkit-fill-available;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.card{ padding-top: calc(env(safe-area-inset-top, 0px));
  position:relative;
  inline-size:100%;
  block-size:100%;
  overflow:hidden;
  touch-action:none;
  contain:strict;
}
#bgVideo{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter: saturate(1.05) contrast(1.05);
}
.scrim{
  position:absolute;
  inset:0;
  background: radial-gradient(120% 120% at 50% 40%, rgba(0,0,0,0.25), rgba(0,0,0,0.55));
  pointer-events:none;
}
.container{
  position:relative;
  width:100%; height:100%;
  max-width:420px;
  margin:0 auto;
  overflow:hidden;
}
.menu-trigger, .close-trigger{
  position:absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: 16px;
  display:block;
  width:42px; height:42px;
  cursor:pointer;
  z-index:333;
}
.close-trigger{ z-index:5; top: calc(26px + env(safe-area-inset-top, 0px)); }

.menu-trigger-bar{
  display:block;
  width:100%; height:3px;
  background-color: var(--text);
  margin-bottom:7px;
  transform: rotate(-45deg);
  position:relative;
}
.menu-trigger-bar.top{ width:55%; }
.menu-trigger-bar.bottom{ width:55%; margin-left:45%; }

.close-trigger-bar{
  display:block;
  width:100%; height:3px;
  background-color: var(--text);
  position:relative;
}
.close-trigger-bar.left{ transform: translateX(100px) translateY(-100px) rotate(-45deg); }
.close-trigger-bar.right{ transform: translateX(-100px) translateY(-100px) rotate(45deg); top:-3px; }

.logo{
  display:block;
  width:72px; height:72px;
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  z-index:10;
}
.logo img{ width:100%; height:auto; display:block; filter: brightness(1.08); }

.inner-container, .menu-container{
  position:absolute; height:100%; width:100%; left:0; top:0;
}
.inner-container{ zindex:20; }
.menu-container{ display:flex; align-items:center; }

.menu{ display:block; width:100%; padding: 22% 14%; }
.menu li{ text-align:left; padding: 14px 0; }
.menu a{
  text-decoration:none; color: var(--text);
  display:inline-block; padding:10px 0; position:relative; letter-spacing:0.08em;
}
.menu a:before{
  content:""; position:absolute; left:0; bottom:0;
  width:24px; height:2px; background-color: var(--text);
  opacity:0; transform: translateX(100px);
  transition: transform .35s cubic-bezier(.55,0,.1,1), opacity .35s;
}
.menu a:hover:before{ opacity:1; transform: translateX(0); }

.menu-bg{
  position:absolute; display:block;
  width:200%; left:-53%; top:-25%; height:40%;
  background-color: var(--panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.menu-bg.middle{ top:29%; left:-53%; transform: rotate(-45deg) scaleY(0); }
.menu-bg.top{ left:-34%; top:0; transform: rotate(-45deg) translateY(-152%); }
.menu-bg.bottom{ top:105%; left:-20%; transform: rotate(-45deg) translateY(25%); }


/* Fallbacks */
@supports not (height: 100dvh) {
  .viewport, .card { block-size: 100svh; }
}


/* Viewport fallbacks */
@supports not (height: 100dvh) {
  .viewport, .card { height: 100vh; }
}
html { height: -webkit-fill-available; }
body { min-height: 100dvh; min-height: -webkit-fill-available; }