/* =========================================================
   TUTORIAL CATEGORÍAS
   Cuadro responsive sin afectar funcionalidad
========================================================= */

.tutorial-categorias {

  --tutorial-top: calc(100% + clamp(32px, 5vh, 58px));
  --tutorial-right: 0px;

  --tutorial-width: clamp(190px, 32vw, 360px);
  --tutorial-padding-y: clamp(22px, 4vw, 30px);
  --tutorial-padding-x: clamp(28px, 6vw, 50px);

  --tutorial-font-size: clamp(15px, 3.8vw, 20px);
  --tutorial-radius: clamp(12px, 2vw, 16px);

  position: absolute;

  top: var(--tutorial-top);
  right: var(--tutorial-right);

  width: var(--tutorial-width);
  max-width: calc(100vw - 40px);

  padding: var(--tutorial-padding-y) var(--tutorial-padding-x);

  background: rgba(0,0,0,0.82);
  color: white;

  border-radius: var(--tutorial-radius);
  border: 1px solid rgba(127,179,255,0.55);

  box-shadow:
    0 12px 35px rgba(0,0,0,0.55),
    inset 0 0 28px rgba(127,179,255,0.12);

  backdrop-filter: blur(10px);

  font-size: var(--tutorial-font-size);
  line-height: 1.18;

  z-index: 300;

  animation: tutorialFade 1s ease;
}

/* Brillo pequeño superior */
.tutorial-categorias::before {
  content: "✦";

  position: absolute;

  top: clamp(16px, 3vw, 22px);
  left: clamp(22px, 5vw, 34px);

  color: #7fb3ff;
  font-size: clamp(14px, 3vw, 18px);

  text-shadow:
    0 0 8px rgba(127,179,255,1),
    0 0 16px rgba(127,179,255,0.8);

  pointer-events: none;
}

/* Línea luminosa inferior */
.tutorial-categorias::after {
  content: "";

  position: absolute;

  bottom: clamp(14px, 3vw, 18px);
  left: 50%;

  width: clamp(60px, 16vw, 90px);
  height: 4px;

  transform: translateX(-50%);

  background: linear-gradient(
    to right,
    transparent,
    #38bdf8,
    transparent
  );

  border-radius: 20px;

  box-shadow:
    0 0 8px rgba(56,189,248,0.9),
    0 0 16px rgba(56,189,248,0.65);

  pointer-events: none;
}

/* Entrada suave del cuadro */
@keyframes tutorialFade {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   LÍNEA FUTURISTA HACIA CATEGORÍAS
========================================================= */

.tutorial-arrow {
  --arrow-right: clamp(36px, 8vw, 72px);
  --arrow-top: clamp(-58px, -7vw, -64px);
  --arrow-height: clamp(48px, 9vh, 70px);

  position: absolute;

  top: var(--arrow-top);
  right: var(--arrow-right);

  width: 18px;
  height: var(--arrow-height);

  display: flex;
  flex-direction: column;
  align-items: center;

  z-index: 5;
  pointer-events: none;
}

/* Punto luminoso superior */
.tutorial-arrow-dot {
  width: clamp(8px, 2vw, 10px);
  height: clamp(8px, 2vw, 10px);

  background: #38bdf8;
  border-radius: 50%;

  box-shadow:
    0 0 8px rgba(56,189,248,1),
    0 0 18px rgba(56,189,248,0.9);
}

/* Línea vertical luminosa */
.tutorial-arrow-line {
  width: 3px;
  height: calc(var(--arrow-height) - 10px);

  background: linear-gradient(
    to bottom,
    rgba(56,189,248,1),
    rgba(56,189,248,0.15)
  );

  box-shadow: 0 0 14px rgba(56,189,248,0.9);
}

/* =========================================================
   PANTALLAS MUY ANGOSTAS
   Evita que se monte sobre buscador o hamburguesa
========================================================= */

@media (max-width: 380px) {
  .tutorial-categorias {
    --tutorial-top: calc(100% + 36px);
    --tutorial-right: -4px;
    --tutorial-width: clamp(180px, 58vw, 220px);
    --tutorial-padding-y: 18px;
    --tutorial-padding-x: 26px;
    --tutorial-font-size: clamp(13px, 3.8vw, 16px);
  }

  .tutorial-arrow {
    --arrow-right: 36px;
  }
}