/* WachYa navegación universal */
:root {
  --wachya-focus: #edb1ff;
  --wachya-focus-soft: rgba(237,177,255,.34);
}

.wachya-install-app {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 180;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 20px;
  border: 1px solid rgba(237,177,255,.55);
  border-radius: 999px;
  background: linear-gradient(135deg,#edb1ff,#ffb0cc);
  color: #520070;
  font-weight: 900;
  box-shadow: 0 14px 38px rgba(0,0,0,.45);
}

html {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body {
  overscroll-behavior: contain;
}

.wachya-focusable,
a,
button,
[role="button"],
input,
select,
textarea {
  outline: none;
}

.wachya-focusable:focus,
.wachya-focusable:focus-visible,
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--wachya-focus);
  outline-offset: 4px;
  box-shadow: 0 0 0 7px var(--wachya-focus-soft), 0 0 30px rgba(237,177,255,.32);
  border-color: rgba(237,177,255,.82) !important;
  z-index: 20;
}

.watch-card:focus,
.watch-card:focus-visible {
  transform: translateY(-8px) scale(1.035);
}

.wachya-rail {
  scroll-behavior: smooth;
  scroll-padding-inline: 24px;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
  cursor: grab;
}

.wachya-rail.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

@media (pointer: coarse) {
  .watch-card,
  .wachya-focusable {
    min-height: 48px;
  }

  button, a, [role="button"], input, select { min-height: 48px; }
  input[type="range"] { min-height: 36px; }
}

@media (max-width: 768px) {
  body { padding-bottom: 0; }

  main {
    scroll-padding-top: 84px;
    margin-left: 0 !important;
    padding-bottom: max(32px, env(safe-area-inset-bottom)) !important;
    width: 100% !important;
  }

  .wachya-rail {
    scroll-padding-inline: 16px;
    -webkit-overflow-scrolling: touch;
  }

  #sidebar {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(82vw, 310px) !important;
    height: 100dvh !important;
    padding: 78px 14px 24px !important;
    transform: translateX(-105%);
    flex-direction: column !important;
    overflow-y: auto !important;
    border-right: 1px solid rgba(78,67,80,.8) !important;
    border-top: 0 !important;
    background: rgba(18,12,19,.985) !important;
    transition: transform .24s ease !important;
  }

  body.wachya-menu-open #sidebar { transform: translateX(0); }
  body.wachya-menu-open { overflow: hidden; }

  #sidebar::-webkit-scrollbar { display: none; }
  #sidebar > div { display: block; }
  #sidebar > div > div:first-child { display: none !important; }
  #sidebar ul { flex-direction: column !important; align-items: stretch !important; gap: 2px !important; }
  #sidebar li { display: block; }
  #sidebar a.nav-item {
    width: 100%; min-width: 0; min-height: 50px;
    padding: 12px 14px !important; flex-direction: row !important;
    justify-content: flex-start !important; gap: 14px !important;
    border-left: 3px solid transparent !important; border-top: 0;
    border-radius: 14px;
  }
  #sidebar a.nav-item.active { border-left-color: var(--wachya-focus) !important; background: rgba(157,80,187,.22); }
  #sidebar a.nav-item > span:last-child { display: inline !important; opacity: 1 !important; }
  #sidebar a.nav-item .material-symbols-outlined { font-size: 25px; }

  .px-margin-desktop { padding-left: 16px !important; padding-right: 16px !important; }
  [class*="text-[76px]"], [class*="text-[64px]"] { font-size: clamp(36px, 11vw, 58px) !important; }
  .content-card { max-width: 100%; }
  .wachya-install-app { right: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); }
  .h-\[870px\] { height: auto !important; min-height: 680px !important; padding-top: 120px !important; padding-bottom: 110px !important; }
  .min-h-screen { min-height: calc(100dvh - 68px); }
  video, iframe { max-width: 100%; }
  button, a { -webkit-user-select: none; user-select: none; }
}

/* Navegación inferior en todas las secciones. Música conserva el cajón
   lateral porque su reproductor utiliza el borde inferior. */
@media (max-width: 768px) {
  body:not(.music-performance) .wachya-mobile-menu-button,
  body:not(.music-performance) .wachya-menu-scrim { display: none !important; }

  body:not(.music-performance) #sidebar {
    left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
    width: 100% !important; height: calc(68px + env(safe-area-inset-bottom)) !important;
    padding: 0 8px env(safe-area-inset-bottom) !important; transform: none !important;
    flex-direction: row !important; align-items: stretch !important; justify-content: flex-start !important;
    overflow-x: auto !important; overflow-y: hidden !important; border-right: 0 !important;
    border-top: 1px solid rgba(78,67,80,.7) !important; z-index: 150 !important;
  }
  body:not(.music-performance) #sidebar > div { display: contents; }
  body:not(.music-performance) #sidebar ul { flex-direction: row !important; align-items: stretch !important; flex-shrink: 0; }
  body:not(.music-performance) #sidebar li { display: flex; }
  body:not(.music-performance) #sidebar a.nav-item {
    width: 62px; min-width: 62px; min-height: 62px; padding: 9px 6px !important;
    flex-direction: column !important; justify-content: center !important; gap: 2px !important;
    border-left: 0 !important; border-top: 3px solid transparent !important; border-radius: 12px 12px 0 0;
  }
  body:not(.music-performance) #sidebar a.nav-item.active { border-top-color: var(--wachya-focus) !important; }
  body:not(.music-performance) #sidebar a.nav-item > span:last-child { display: none !important; }
  body:not(.music-performance) main { padding-bottom: max(96px, env(safe-area-inset-bottom)) !important; }

  body.music-performance #sidebar { z-index: 155 !important; }
  body.music-performance.wachya-menu-open #sidebar { transform: translateX(0) !important; }
}

.wachya-mobile-menu-button { display: none; }
@media (max-width: 768px) {
  .wachya-mobile-menu-button {
    display: grid; position: fixed; left: 14px; top: max(14px, env(safe-area-inset-top));
    z-index: 160; width: 48px; height: 48px; place-items: center;
    border-radius: 16px; border: 1px solid rgba(237,177,255,.4);
    background: rgba(18,12,19,.9); color: #fff; backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0,0,0,.38);
  }
  .wachya-menu-scrim { display: none; position: fixed; inset: 0; z-index: 145; background: rgba(0,0,0,.62); }
  body.wachya-menu-open .wachya-menu-scrim { display: block; }
}

@media (min-width: 1000px) and (hover: none), (min-width: 1200px) and (pointer: coarse) {
  .wachya-focusable:focus, a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
    outline-width: 4px;
    outline-offset: 6px;
    transform: scale(1.045);
  }
  button, a, [role="button"] { scroll-margin: 110px; }
}


#sidebar:focus-within {
  width: 260px !important;
}

#sidebar:focus-within .group-hover\:opacity-100 {
  opacity: 1 !important;
}

#sidebar:focus-within .group-hover\:border-primary {
  border-color: #edb1ff !important;
}

/* Flechas laterales para PC en carruseles horizontales */
.wachya-rail-wrap {
  position: relative;
}

.wachya-rail-arrow {
  display: none;
  position: absolute;
  top: calc(50% + 16px);
  transform: translateY(-50%);
  z-index: 35;
  width: 46px;
  height: 74px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(237,177,255,.36);
  background: linear-gradient(145deg, rgba(36,30,37,.94), rgba(18,12,19,.88));
  color: #fff3fd;
  box-shadow: 0 16px 42px rgba(0,0,0,.42), 0 0 22px rgba(237,177,255,.16);
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease, background .18s ease;
}

.wachya-rail-arrow:hover,
.wachya-rail-arrow:focus-visible {
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(237,177,255,.82);
  background: linear-gradient(145deg, rgba(157,80,187,.92), rgba(255,69,161,.76));
}

.wachya-rail-arrow:disabled {
  opacity: .25;
  pointer-events: none;
}

.wachya-rail-arrow-left {
  left: -22px;
}

.wachya-rail-arrow-right {
  right: -22px;
}

.wachya-rail-arrow .material-symbols-outlined {
  font-size: 34px;
  font-variation-settings: 'FILL' 1;
}

@media (min-width: 769px) {
  .has-scrollable-rail > .wachya-rail-arrow:not([hidden]) {
    display: flex;
  }
}

@media (max-width: 768px) {
  .wachya-rail-arrow {
    display: none !important;
  }
}