/* ---------- Home: comparador oscuro / claro ---------- */
html, body { height: 100%; overflow: hidden; }

.comparador {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  --pos: 50%;
}

/* Cada capa es la home completa: misma composición, colores invertidos */
.capa {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* abajo dejamos aire: los botones quedan sobre el humo y no sobre la mesa del DJ */
  padding: clamp(20px, 4vh, 40px) var(--gutter) clamp(48px, 17vh, 170px);
}
.capa .fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  z-index: -1;
  transform: scale(1.06);
  animation: acercar 2.4s var(--ease) forwards;
}
@keyframes acercar { to { transform: scale(1); } }

.capa--oscura { color: var(--blanco); }
.capa--clara {
  color: var(--negro);
  clip-path: inset(0 0 0 var(--pos));
}

/* Barra superior: redes en el centro, idioma a la derecha */
.arriba {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.arriba .idiomas { justify-self: end; }
.capa--clara .idiomas a[aria-current] { background: rgba(0, 0, 0, .1); }

.redes {
  grid-column: 2;
  display: flex;
  gap: clamp(8px, 1.2vw, 14px);
  list-style: none;
}
.redes a {
  display: grid;
  place-items: center;
  width: clamp(36px, 3.2vw, 44px);
  aspect-ratio: 1;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.redes svg { width: 45%; height: 45%; fill: currentColor; }
.capa--oscura .redes a:hover { background: var(--blanco); color: var(--negro); transform: translateY(-2px); }
.capa--clara .redes a:hover { background: var(--negro); color: var(--blanco); transform: translateY(-2px); }

/* Logo cruzando la imagen */
.centro {
  display: grid;
  place-items: center;
}
/* El logo es el SVG original usado como máscara: así toma el color de cada capa */
.logo {
  width: min(88vw, 1180px);
  aspect-ratio: 1408.54 / 61.51;
  background: currentColor;
  -webkit-mask: url("/img/logo-negro.svg") center / contain no-repeat;
  mask: url("/img/logo-negro.svg") center / contain no-repeat;
  opacity: 0;
  animation: aparecer 1.6s .4s var(--ease) forwards;
}
@keyframes aparecer {
  from { opacity: 0; letter-spacing: .2em; filter: blur(6px); transform: translateY(8px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* Botones de abajo */
.abajo {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.boton {
  position: relative;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: clamp(16px, 2.1vw, 30px);
  letter-spacing: .08em;
  padding: 8px 0;
  opacity: 0;
  animation: subir 1s 1s var(--ease) forwards;
}
.boton + .boton { animation-delay: 1.15s; }
.boton::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease);
}
.boton:hover::after, .boton:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.boton .flecha { display: inline-block; margin-left: .4em; transition: transform .4s var(--ease); }
.boton:hover .flecha { transform: translateX(6px); }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Línea divisoria que se arrastra ---------- */
.divisor {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 44px;
  margin-left: -22px;
  z-index: 5;
  cursor: ew-resize;
  touch-action: none;
}
.divisor::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .85) 15%, rgba(255, 255, 255, .85) 85%, transparent);
  box-shadow: 0 0 12px rgba(255, 255, 255, .25);
}
.tirador {
  position: absolute;
  top: 66%;
  left: 50%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(10, 10, 10, .35);
  border: 1px solid rgba(255, 255, 255, .7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.tirador svg { width: 22px; height: 22px; fill: #fff; }
.divisor:hover .tirador, .divisor.arrastrando .tirador { transform: translate(-50%, -50%) scale(1.12); border-color: var(--blanco); }

@media (max-width: 640px) {
  /* En móvil el logo y los botones suben al humo, por encima de la artista */
  .capa { grid-template-rows: auto auto auto 1fr; padding-bottom: 24px; }
  .centro { margin-top: 17vh; }
  .abajo { margin-top: 28px; }
  .boton { font-size: 14px; letter-spacing: .06em; }
  .arriba { grid-template-columns: 1fr; justify-items: center; gap: 14px; }
  .arriba .idiomas { justify-self: center; grid-row: 1; }
  .redes { grid-column: 1; }
  .capa .fondo { object-position: 50% 60%; }
  .tirador { top: 72%; }
}