:root{
  --bg: #0b0d12;
  --overlay: rgba(0,0,0,.42);
  --overlay-strong: rgba(0,0,0,.55);
  --btn-bg: rgba(255,255,255,.22);
  --btn-bg-hover: rgba(255,255,255,.28);
  --btn-border: rgba(255,255,255,.34);
  --text: rgba(255,255,255,.92);
  --shadow: 0 18px 50px rgba(0,0,0,.35);
  --radius: 22px;
}

@font-face{
  font-family: "DIDONESQUE";
  src: url("./fonts/DIDONESQUE.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.scene{
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bg-video{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  background: var(--bg);
}

.overlay{
  position: fixed;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 20%, var(--overlay), var(--overlay-strong));
  pointer-events: none;
}

/* Si autoplay falla, subimos un poco el overlay para asegurar contraste */
.video-blocked .overlay{
  background: linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.70));
}

.top{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding-top: max(14px, env(safe-area-inset-top));
  padding-left: 12px;
  padding-right: 12px;
}

.logo{
  /* Casi todo el ancho (con padding estrecho del contenedor) */
  width: min(92vw, 560px);
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
  user-select: none;
  -webkit-user-drag: none;
}

.actions{
  position: relative;
  z-index: 2;
  display: grid;
  place-items: start center;
  padding: 22px 18px 40px;
  flex: 1;
}

.didonesque{
  font-family:
    "DIDONESQUE",
    "Didot",
    "Bodoni MT",
    "Bodoni 72",
    "Playfair Display",
    serif;
}

.menu-btn{
  /* Botón rectangular (más ancho que alto) */
  width: clamp(240px, 72vw, 340px);
  height: clamp(92px, 26vw, 128px);
  border-radius: var(--radius);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  color: var(--text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 120ms ease, background-color 160ms ease, border-color 160ms ease;
}

.menu-btn__text{
  font-size: clamp(18px, 5.2vw, 24px);
  letter-spacing: .12em;
  text-transform: none;
  text-shadow: 0 10px 26px rgba(0,0,0,.35);
}

.menu-btn:hover{
  background: var(--btn-bg-hover);
  border-color: rgba(255,255,255,.44);
}
.menu-btn:active{
  transform: scale(.98);
}
.menu-btn:focus-visible{
  outline: 3px solid rgba(255,255,255,.75);
  outline-offset: 6px;
}

@media (min-width: 520px){
  .actions{
    padding-top: 30px;
  }
}

.footer{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.footer__text{
  font-size: 14px;
  letter-spacing: .14em;
  opacity: .88;
  text-transform: uppercase;
  text-shadow: 0 10px 26px rgba(0,0,0,.35);
}

@media (prefers-reduced-motion: reduce){
  .bg-video{ display: none; }
  .overlay{
    background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.65));
  }
  .menu-btn{
    transition: none;
  }
}