* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: white;
  height: 100vh;
  overflow: hidden;
}

.contenedor {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Imagen principal centrada */
.imagen-principal {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 80%;
  max-height: 80%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* Imagen sorpresa correctamente posicionada */
.imagen-sorpresa {
  position: absolute;
  bottom: 0; /* se alinea justo con el borde inferior */
  right: 5%;
  max-height: 400px;
  width: auto;
  transform: translateY(100%); /* comienza fuera de pantalla */
  transition: transform 0.8s ease-out;
  z-index: 2;
  cursor: pointer;
}

.marca-inferior {
  position: absolute;
  bottom: 10px;
  left: 15px;
  color: #000;
  font-family: sans-serif;
  font-size: 20px;
  line-height: 1.4;
  z-index: 3;
  opacity: 0.8;
  pointer-events: none; /* para que no interfiera con clics */
}

.marca-inferior span {
  display: block;
  font-size: 17px;
  opacity: 0.8;
}

.fondo-luminoso {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url("Fondo.png") center center / cover no-repeat;
  z-index: 0;
  transition: filter 1.2s ease-in-out, opacity 1.2s ease-in-out;
  opacity: 0.5;
  filter: brightness(0.75);
}