/* Portada: elegir mundo. Dos universos opuestos en una sola pantalla. */
.portada {
  height: 100dvh;
  overflow: hidden;
}

/* Los logos van sobre fondo variable: la fotografía de Murano es casi blanca
   donde caen. El contraste se resuelve con sombra sobre el propio dibujo, no
   con una capa detrás, que se nota como mancha en cuanto el fondo aclara. */
.marca-superior,
.marca-inferior {
  position: fixed;
  left: 0; right: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  pointer-events: none;
  opacity: 0;
}

.marca-superior { top: clamp(1.5rem, 3.5vh, 2.6rem); }
.marca-superior__logo {
  width: clamp(96px, 10.5vw, 148px);
  height: auto;
  color: var(--hueso);
  opacity: 0.92;
  filter: drop-shadow(0 1px 2px rgba(6, 5, 5, 0.55)) drop-shadow(0 0 14px rgba(6, 5, 5, 0.6));
}
.marca-inferior { bottom: clamp(1.5rem, 3.5vh, 2.6rem); }
.marca-inferior__logo {
  height: clamp(64px, 9.5vh, 132px);
  width: auto;
  color: var(--hueso);
  opacity: 0.92;
  filter: drop-shadow(0 1px 2px rgba(6, 5, 5, 0.55)) drop-shadow(0 0 14px rgba(6, 5, 5, 0.6));
}

/* Bloque de marca de la portada en vertical: el logotipo completo tal como lo
   compuso el cliente, en la esquina. En horizontal no se usa —ahí mandan las
   dos marcas sueltas, arriba y abajo—. */
.marca-portada { display: none; }

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

.mundo {
  position: relative;
  flex: 1 1 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: flex-grow 1.05s var(--ease);
  will-change: flex-grow;
}

.mundo__fondo {
  position: absolute;
  inset: -6%;                       
  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);
}
/* La lámina de Murano nace oscura, así que no hay que apagarla como a una foto
   sobre blanco: se deja casi entera y los cristales conservan su color. */
.mundo--murano .mundo__fondo img { filter: saturate(0.92) brightness(0.8); }
.mundo--murano:hover .mundo__fondo img { filter: saturate(1.05) brightness(1); }

.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));
}

/* El texto lleva su sombra por el mismo motivo. */
.mundo__cuerpo {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
  text-shadow: 0 1px 2px rgba(6, 5, 5, 0.5), 0 0 22px rgba(6, 5, 5, 0.55);
  transform: translateY(1.2rem);
  transition: transform 1.05s var(--ease);
}

.mundo__titulo {
  margin: 0;
  font-weight: 300;
  font-size: clamp(3.04rem, 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.73rem, 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.23rem, 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;
}

@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--murano:hover .mundo__velo { opacity: 0.88; }
  .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);
  }
  /* En vertical el centro de cada panel es de su colección, así que la marca se
     recoge en la esquina: una sola pieza, la composición oficial. */
  .marca-superior,
  .marca-inferior { display: none; }

  .marca-portada {
    display: block;
    position: fixed;
    top: 1.2rem;
    left: 1.3rem;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
  }
  .marca-portada__logo {
    width: clamp(42px, 12vw, 56px);
    height: auto;
    color: var(--hueso);
    opacity: 0.88;
    filter: drop-shadow(0 1px 2px rgba(6, 5, 5, 0.55)) drop-shadow(0 0 14px rgba(6, 5, 5, 0.6));
  }
}