/* tutorial.css — el recorrido guiado: una sombra sobre el dojo y un hueco de luz.

   El truco entero es un solo elemento. .tut-hole no dibuja la sombra dentro de
   sí: la dibuja HACIA AFUERA, con un box-shadow de 100vmax que llena la pantalla
   en todas direcciones. Lo que queda dentro de la caja es la página, intacta y a
   su tamaño real — no una copia, no un recorte, la cosa misma. Por eso el foco
   puede viajar entre secciones animando cuatro números (top, left, width, height)
   en vez de repintar nada, y por eso lo alumbrado no necesita subir de capa. */

.tut {
  position: fixed; inset: 0; z-index: 70;   /* sobre modales (50) y toasts (60) */
  opacity: 0; transition: opacity .26s ease;
}
.tut.on { opacity: 1; }
/* La página queda mirable pero intocable mientras dura el recorrido: un clic
   perdido en el board no debe robarle el paso a nadie. */
.tut-block { position: absolute; inset: 0; }

.tut-hole {
  position: fixed; top: 50%; left: 50%; width: 0; height: 0;
  pointer-events: none;
  box-shadow:
    0 0 0 100vmax rgba(5, 4, 3, .84),
    inset 0 0 0 2px rgba(246, 194, 67, .85),
    inset 0 0 22px rgba(246, 194, 67, .22),
    0 0 34px rgba(246, 194, 67, .28);
  transition: top .44s cubic-bezier(.32, .72, .24, 1), left .44s cubic-bezier(.32, .72, .24, 1),
              width .44s cubic-bezier(.32, .72, .24, 1), height .44s cubic-bezier(.32, .72, .24, 1),
              border-radius .3s ease;
}
/* El anillo respira. Lento y bajo — es una señal, no una alarma. */
@media (prefers-reduced-motion: no-preference) {
  .tut.on .tut-hole { animation: tut-breathe 2.6s ease-in-out infinite; }
}
@keyframes tut-breathe {
  0%, 100% { box-shadow: 0 0 0 100vmax rgba(5,4,3,.84), inset 0 0 0 2px rgba(246,194,67,.85),
                         inset 0 0 22px rgba(246,194,67,.22), 0 0 34px rgba(246,194,67,.28); }
  50%      { box-shadow: 0 0 0 100vmax rgba(5,4,3,.84), inset 0 0 0 2px rgba(246,194,67,1),
                         inset 0 0 26px rgba(246,194,67,.34), 0 0 52px rgba(246,194,67,.46); }
}

/* ---------- la tarjeta ---------- */
.tut-card {
  position: fixed; top: 0; left: 0;
  /* Ancha de más y el texto respira; angosta de más y cada frase deja una
     palabra sola colgando en su propia línea. 400px es el punto donde las
     frases más largas del recorrido (el paso de retar) todavía cierran limpio. */
  width: min(400px, calc(100vw - 24px));
  background: linear-gradient(180deg, #1c1710, #14110c);
  border: 1.5px solid var(--gold); border-radius: 16px;
  padding: 18px 20px 16px; text-align: left;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 240, 205, .08);
  transition: opacity .2s ease, transform .2s ease,
              top .44s cubic-bezier(.32, .72, .24, 1), left .44s cubic-bezier(.32, .72, .24, 1);
}
/* El cruce entre pasos: el texto viejo se va antes de que llegue el nuevo, para
   que nunca se lea media explicación de una sección sobre otra. */
.tut-card.swap { opacity: 0; transform: translateY(6px); }

/* La flecha que amarra la tarjeta con la luz. --ax la fija app-side sobre el
   centro real del objetivo, aunque la tarjeta se haya recortado contra un borde. */
.tut-card.below::before, .tut-card.above::before {
  content: ''; position: absolute; left: var(--ax, 50%); margin-left: -8px;
  width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent;
}
.tut-card.below::before { top: -9px; border-bottom: 9px solid var(--gold); }
.tut-card.above::before { bottom: -9px; border-top: 9px solid var(--gold); }

.tut-x {
  position: absolute; top: 8px; right: 10px; width: 26px; height: 26px;
  background: none; border: none; color: #6f6350; font-size: 15px; line-height: 1;
  border-radius: 8px; transition: color .12s ease, background .12s ease;
}
.tut-x:hover { color: var(--gold); background: rgba(246, 194, 67, .1); }

.tut-count {
  font-family: var(--font-head); font-weight: 900; font-size: 9px;
  letter-spacing: .2em; text-transform: uppercase; color: #8d7f5c; margin-bottom: 9px;
}
/* Trying the card with no visible title — just testing the read without it.
   Kept in the DOM (it still labels the dialog for screen readers via
   aria-labelledby) but pulled out of the visual flow entirely. */
.tut-title.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.tut-body {
  font-size: 16px; line-height: 1.5; color: var(--text);
  /* Balances line lengths instead of leaving one short word stranded on its
     own last line — the fix for widows that doesn't depend on guessing a
     width in pixels. */
  text-wrap: balance;
}
.tut-body b { color: var(--cream); font-weight: 700; }
.tut-body .tut-up { color: #4fd97a; }
.tut-body .tut-down { color: #ff6b76; }

/* ---------- progreso ---------- */
.tut-dots { display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0 2px; }
.tut-dot {
  width: 7px; height: 7px; padding: 0; border-radius: 50%; border: none;
  background: #3a332a; transition: background .18s ease, transform .18s ease, width .28s ease;
}
.tut-dot.past { background: rgba(246, 194, 67, .45); }
.tut-dot.on { background: var(--gold); width: 18px; border-radius: 4px; }
.tut-dot:hover { transform: scale(1.25); }
.tut-dot.on:hover { transform: none; filter: brightness(1.15); }

/* ---------- botones ---------- */
/* One real button, one quiet way out — not two equal slabs. Siguiente is the
   only thing that needs to look pressable; Más tarde recedes to a label. */
.tut-btns { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.tut-next { flex: none; padding: 10px 22px; font-size: 10px; letter-spacing: .1em; border-radius: 9px; }
.tut-later {
  flex: none; background: none; border: none; box-shadow: none; padding: 8px 2px;
  color: #8d7f5c; font-family: var(--font-head); font-weight: 900; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; transition: color .12s ease;
}
.tut-later:hover { color: var(--cream); }
.tut-later:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.tut-never {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  padding-top: 11px; border-top: 1px solid rgba(201, 169, 79, .16);
  font-size: 11.5px; color: #8d7f5c; cursor: pointer; user-select: none;
  transition: color .12s ease;
}
.tut-never:hover { color: var(--cream); }
.tut-never input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 15px; height: 15px; border-radius: 4px;
  border: 1.5px solid #4a4132; background: #0f0d0a; cursor: pointer;
  display: grid; place-content: center;
  transition: border-color .12s ease, background .12s ease;
}
.tut-never input::after {
  content: ''; width: 8px; height: 8px; border-radius: 2px;
  transform: scale(0); background: var(--ink); transition: transform .12s ease;
}
.tut-never input:checked { background: var(--gold); border-color: var(--gold); }
.tut-never input:checked::after { transform: scale(1); }
.tut-never input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- teléfonos: la tarjeta se ancla abajo y deja ver el board ---------- */
@media (max-width: 560px) {
  .tut-card { width: calc(100vw - 16px); padding: 16px 16px 14px; }
  .tut-body { font-size: 15px; }
  .tut-next { padding: 10px 20px; }
}

/* ---------- el enganche para repetirlo, en CÓMO FUNCIONA ---------- */
.fq-replay {
  display: inline-flex; align-items: center; gap: 8px; margin: -6px 0 18px;
  padding: 9px 15px; border-radius: 999px;
  background: rgba(246, 194, 67, .07); border: 1px solid rgba(246, 194, 67, .38);
  color: var(--gold); font-family: var(--font-head); font-weight: 900;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.fq-replay:hover { background: var(--gold); border-color: var(--gold); color: #14100a; }
.fq-replay svg { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  .tut, .tut-hole, .tut-card, .tut-dot { transition: none; }
  .tut-card.swap { opacity: 0; transform: none; }
}