* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Segoe UI', Arial, sans-serif;
}

.showcase {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

.showcase video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2;
}

.text {
  position: absolute;
  z-index: 3;
  right: clamp(16px, 5vw, 60px);
  bottom: clamp(16px, 6vh, 60px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Botón 3D estilo "ENTER" ---------- */

.enter-btn {
  --btn-size: clamp(110px, 14vw, 190px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 50%;
  text-decoration: none;
  user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease-out;
}

/* anillo cromado exterior */
.chrome-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: calc(var(--btn-size) * 0.065);
  background: conic-gradient(
    from 220deg,
    #f5f5f5 0deg,
    #8f8f8f 45deg,
    #e8e8e8 90deg,
    #6b6b6b 140deg,
    #d4d4d4 190deg,
    #4d4d4d 240deg,
    #f0f0f0 300deg,
    #7a7a7a 340deg,
    #f5f5f5 360deg
  );
  box-shadow:
    0 calc(var(--btn-size) * 0.08) calc(var(--btn-size) * 0.16) rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  transition: box-shadow 0.12s ease-out;
}

/* la esfera roja "apretable" */
.enter-btn .btn-top {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 32% 22%, #ff9d8f 0%, #f0402a 22%, #c81b0c 55%, #7a0e04 88%, #5c0a03 100%);
  box-shadow:
    inset 0 calc(var(--btn-size) * -0.05) calc(var(--btn-size) * 0.09) rgba(0, 0, 0, 0.55),
    inset 0 calc(var(--btn-size) * 0.04) calc(var(--btn-size) * 0.07) rgba(255, 255, 255, 0.25),
    inset 0 0 0 2px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, filter 0.12s ease-out;
}

/* brillo ovalado (reflejo de luz) */
.glare {
  position: absolute;
  top: 9%;
  left: 16%;
  width: 55%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 72%);
  transform: rotate(-18deg);
  pointer-events: none;
}

/* destellos tipo "sparkle" */
.sparkle {
  position: absolute;
  width: 14%;
  height: 14%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0) 70%);
  clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
  opacity: 0.85;
  pointer-events: none;
}
.sparkle-1 { top: 18%; left: 12%; width: 10%; height: 10%; }
.sparkle-2 { top: 34%; left: 6%; width: 7%; height: 7%; opacity: 0.6; }
.sparkle-3 { bottom: 20%; left: 20%; width: 6%; height: 6%; opacity: 0.5; }

.enter-btn .btn-label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: clamp(1.1rem, calc(var(--btn-size) * 0.185), 2.3rem);
  font-weight: 800;
  letter-spacing: 1px;
  color: #ffffff;
  text-shadow:
    0 1px 0 #7a0e04,
    0 2px 2px #5c0a03,
    0 3px 6px rgba(0, 0, 0, 0.6);
  transition: transform 0.12s ease-out;
  pointer-events: none;
}

/* Efecto "apretado" al pasar el mouse */
.enter-btn:hover {
  transform: scale(0.97);
}

.enter-btn:hover .chrome-ring {
  box-shadow:
    0 calc(var(--btn-size) * 0.03) calc(var(--btn-size) * 0.07) rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.enter-btn:hover .btn-top {
  filter: brightness(0.9);
  box-shadow:
    inset 0 calc(var(--btn-size) * -0.02) calc(var(--btn-size) * 0.05) rgba(0, 0, 0, 0.6),
    inset 0 calc(var(--btn-size) * 0.015) calc(var(--btn-size) * 0.03) rgba(255, 255, 255, 0.15),
    inset 0 0 0 2px rgba(0, 0, 0, 0.3);
}

.enter-btn:hover .btn-label {
  transform: scale(0.96);
}

/* Efecto al hacer click, se hunde aún más */
.enter-btn:active {
  transform: scale(0.92);
}

.enter-btn:active .btn-top {
  filter: brightness(0.8);
}

.enter-btn:focus-visible .chrome-ring {
  box-shadow:
    0 calc(var(--btn-size) * 0.03) calc(var(--btn-size) * 0.07) rgba(0, 0, 0, 0.5),
    inset 0 0 0 3px rgba(255, 205, 77, 0.8);
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
  .enter-btn {
    --btn-size: clamp(95px, 22vw, 150px);
  }
}

@media (max-width: 480px) {
  .enter-btn {
    --btn-size: clamp(80px, 26vw, 120px);
  }
  .text {
    right: clamp(12px, 4vw, 30px);
    bottom: clamp(12px, 4vh, 30px);
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .enter-btn {
    --btn-size: clamp(70px, 16vh, 120px);
  }
}