/* Portada: elegir mundo. Dos universos opuestos compartiendo una sola pantalla. */

.portada {
  height: 100dvh;
  overflow: hidden;
}

.marca-superior,
.marca-inferior {
  position: fixed;
  left: 0; right: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
}
.marca-superior { top: clamp(1.5rem, 3.5vh, 2.6rem); }
.marca-inferior { bottom: clamp(1.5rem, 3.5vh, 2.6rem); }
.marca-inferior__beu { opacity: 0.55; }

.mundos {
  position: relative;
  display: flex;
  height: 100dvh;
}

.mundo {
  position: relative;
  flex: 1 1 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* La transición de flex es la que hace que un mundo "gane" espacio. */
  transition: flex-grow 1.05s var(--ease);
  will-change: flex-grow;
}

.mundo__fondo {
  position: absolute;
  inset: -6%;                       /* margen para que el zoom no descubra bordes */
  z-index: 0;
}
.mundo__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.4s var(--ease), filter 1.05s var(--ease);
  filter: saturate(0.72) brightness(0.52);
}

.mundo__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: opacity 1.05s var(--ease);
}
.mundo--ambar .mundo__velo {
  background:
    radial-gradient(78% 62% at 50% 52%, rgba(217, 141, 62, 0.30), transparent 72%),
    linear-gradient(180deg, rgba(6, 5, 5, 0.82), rgba(6, 5, 5, 0.60) 45%, rgba(6, 5, 5, 0.92));
}
.mundo--murano .mundo__velo {
  background:
    radial-gradient(78% 62% at 50% 52%, rgba(47, 159, 208, 0.26), transparent 72%),
    linear-gradient(180deg, rgba(6, 5, 5, 0.82), rgba(6, 5, 5, 0.58) 45%, rgba(6, 5, 5, 0.92));
}

.mundo__cuerpo {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
  transform: translateY(1.2rem);
  transition: transform 1.05s var(--ease);
}

.mundo__orden {
  opacity: 0.42;
  margin: 0 0 clamp(1.6rem, 4vh, 2.8rem);
}

.mundo__titulo {
  margin: 0;
  font-weight: 200;
  font-size: clamp(2.6rem, 6.2vw, 5.6rem);
  line-height: 0.94;
  letter-spacing: -0.025em;
}
.mundo__titulo span {
  display: block;
  margin-top: 0.85rem;
  font-size: clamp(0.62rem, 0.95vw, 0.8rem);
  font-weight: 500;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  opacity: 0.72;
}
.mundo--ambar .mundo__titulo { color: var(--ambar-claro); }
.mundo--murano .mundo__titulo { color: var(--murano-claro); }

.mundo__lema {
  margin: clamp(1.5rem, 3.6vh, 2.4rem) 0 0;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  opacity: 0.82;
}

.mundo__entrar {
  margin: clamp(2rem, 5vh, 3.2rem) 0 0;
  opacity: 0;
  transform: translateY(0.55rem);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.mundo__entrar span {
  position: relative;
  padding-bottom: 0.55rem;
}
.mundo__entrar span::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.75s var(--ease) 0.1s;
}

/* Hover: el mundo elegido crece, se enciende y revela el "entrar". */
@media (hover: hover) and (min-width: 861px) {
  .mundos:hover .mundo { flex-grow: 0.84; }
  .mundos:hover .mundo:hover { flex-grow: 1.32; }

  .mundos:hover .mundo:not(:hover) .mundo__velo { opacity: 1.18; }
  .mundos:hover .mundo:not(:hover) .mundo__cuerpo { opacity: 0.55; }

  .mundo:hover .mundo__fondo img {
    transform: scale(1);
    filter: saturate(1.02) brightness(0.86);
  }
  .mundo:hover .mundo__velo { opacity: 0.72; }
  .mundo:hover .mundo__cuerpo { transform: translateY(0); }
  .mundo:hover .mundo__entrar { opacity: 0.9; transform: translateY(0); }
  .mundo:hover .mundo__entrar span::after { transform: scaleX(1); }
}

.filo {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  z-index: 3;
  background: linear-gradient(180deg, transparent, rgba(244, 241, 236, 0.22) 22%, rgba(244, 241, 236, 0.22) 78%, transparent);
  transform: translateX(-50%) scaleY(0);
  transform-origin: center;
}

/* Telón de entrada y de salida hacia cada mundo. */
.telon {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: var(--negro);
  pointer-events: none;
}

@media (max-width: 860px) {
  .mundos { flex-direction: column; }
  .mundo { flex: 1 1 50%; }
  .mundo__fondo img { filter: saturate(0.95) brightness(0.7); transform: scale(1); }
  .mundo__cuerpo { transform: none; }
  .mundo__entrar { opacity: 0.85; transform: none; }
  .mundo__entrar span::after { transform: scaleX(1); }
  .filo {
    top: 50%; bottom: auto; left: 0; right: 0;
    width: auto; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(244, 241, 236, 0.22) 22%, rgba(244, 241, 236, 0.22) 78%, transparent);
    transform: translateY(-50%) scaleX(0);
  }
  .marca-superior, .marca-inferior { gap: 1.4rem; }
}