/* ═══════════════════════════════════════════════════════════
   Postik — página «Tutorial»
   Hecha con las piezas de la propia Postik, como la portada: notas
   de papel con su chinche, banderitas (cuadradito de color + etiqueta
   a mano) y el marcador amarillo. Los colores y los marcos vienen de
   styles.css; aquí va solo lo propio de esta página.
   ═══════════════════════════════════════════════════════════ */
.nav__links a.is-here{color:var(--ink);font-weight:750}

/* Cada parte del tutorial tiene su papel y su banderita. */
.tut,[data-group="basics"]{--g-paper:var(--paper-yellow);--g-tab:#ffd84d;--g-ink:#3d3207}
[data-group="organize"]{--g-paper:var(--paper-green);--g-tab:#66d98d;--g-ink:#143d22}
[data-group="planner"]{--g-paper:var(--paper-blue);--g-tab:#2e67e8;--g-ink:#fff}
[data-group="extras"]{--g-paper:var(--paper-pink);--g-tab:#f25a8e;--g-ink:#fff}

.tut{max-width:1240px;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem) 3.5rem}

/* ─── Cabecera: el título y las cuatro partes, como notas en un corcho ─── */
.tut__hero{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;padding:clamp(2.2rem,6vw,4.4rem) 0 clamp(2rem,5vw,3.6rem);
}
.tut__hero h1{font-size:clamp(2.1rem,4.8vw,3.4rem);line-height:1.08;font-weight:820;letter-spacing:-.02em;margin-bottom:1rem;text-wrap:balance}
.tut__lede{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--ink-soft);max-width:40ch}
.tut__meta{margin-top:1.1rem;font-size:.88rem;color:var(--ink-soft)}

.tut__board{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 1.3rem;padding:.6rem .4rem}
.tnote{
  position:relative;display:block;aspect-ratio:1/.86;padding:1.7rem 1rem 1.5rem;
  background:var(--g-paper);border-radius:3px;color:var(--ink);
  box-shadow:0 1em 1.8em -1em rgba(60,45,10,.6),0 .2em .4em -.2em rgba(0,0,0,.3);
  transform:rotate(-2.2deg);transition:transform .25s ease, box-shadow .25s ease;
}
.tnote:nth-child(2){transform:rotate(1.7deg) translateY(.5rem)}
.tnote:nth-child(3){transform:rotate(1.3deg)}
.tnote:nth-child(4){transform:rotate(-1.5deg) translateY(.4rem)}
.tnote:hover,.tnote:focus-visible{transform:rotate(0deg) translateY(-3px);box-shadow:0 1.4em 2.2em -1em rgba(60,45,10,.6),0 .2em .4em -.2em rgba(0,0,0,.3)}
.tnote:focus-visible{outline:2px solid var(--pin);outline-offset:3px}
/* La chinche roja de siempre. */
.tnote::before,.tgroup__note::before,.tut__endnote::before{
  content:"";position:absolute;top:-10px;left:50%;margin-left:-10px;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 34% 32%, #ff8a8a 0%, var(--pin) 45%, var(--pin-dark) 100%);
  box-shadow:0 .25em .4em -.1em rgba(120,10,10,.5);
}
.tnote__title{display:block;font-family:var(--hand);font-weight:700;font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.15}
.tnote__list{display:block;margin-top:.45rem;font-family:var(--hand);font-size:clamp(.92rem,1.25vw,1.05rem);line-height:1.3;color:rgba(43,36,16,.78)}
.tnote__range{position:absolute;right:.7rem;bottom:.5rem;font-size:.72rem;font-weight:800;letter-spacing:.04em;color:rgba(43,36,16,.55);font-variant-numeric:tabular-nums}

/* ─── Índice + capítulos ─── */
.tut__layout{display:grid;grid-template-columns:14.5rem minmax(0,1fr);gap:clamp(1.6rem,3.4vw,3rem);align-items:start}
.tut__toc{position:sticky;top:4.8rem;max-height:calc(100vh - 5.6rem);overflow:auto;padding:.2rem .3rem 1rem 0;scrollbar-width:thin}
.tut__toc h2{font-size:.78rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--pin-dark)}
.tut__tochint{font-family:var(--hand);font-size:1.02rem;line-height:1.25;color:var(--ink-soft);margin:.25rem 0 .7rem;max-width:20ch}
.toc__group{font-family:var(--hand);font-weight:700;font-size:1.12rem;color:var(--ink);margin:1rem 0 .3rem}
.toc__group:first-child{margin-top:0}

/* Una banderita: el cuadradito de color y su etiqueta. */
.tflag{display:flex;align-items:center;gap:.5rem;padding:.17rem 0;color:var(--ink-soft)}
.tflag__tab{
  flex:none;width:2.05rem;height:1.45rem;border-radius:.34rem;display:grid;place-items:center;
  background:var(--g-tab);color:var(--g-ink);font-size:.7rem;font-weight:800;font-variant-numeric:tabular-nums;
  box-shadow:0 .3em .6em -.3em rgba(0,0,0,.5);transition:transform .2s ease;
}
.tflag__label{
  font-size:.92rem;line-height:1.25;padding:.14rem .5rem;border-radius:.4rem;border:1px solid transparent;
  transition:background .15s, color .15s;
}
.tflag:hover .tflag__label{color:var(--ink)}
.tflag:hover .tflag__tab{transform:translateX(3px)}
.tflag.is-current .tflag__tab{transform:translateX(4px)}
.tflag.is-current .tflag__label{background:#fff;border-color:var(--line);color:var(--ink);font-weight:650;box-shadow:0 .3em .6em -.4em rgba(0,0,0,.35)}
.tflag:focus-visible{outline:2px solid var(--pin);outline-offset:2px;border-radius:.4rem}

.tut__chapters{min-width:0}
.tut__nojs{background:var(--paper-pink);border-radius:14px;padding:1rem 1.2rem;font-weight:600}

/* Cada parte empieza con su nota. */
.tgroup{display:flex;align-items:center;gap:1.2rem;margin:clamp(2.2rem,5vw,3.4rem) 0 .4rem;scroll-margin-top:5.5rem}
.tgroup:first-child{margin-top:.6rem}
.tgroup::after{content:"";flex:1;border-top:1px dashed var(--line)}
.tgroup__note{
  position:relative;padding:.95rem 1.2rem .55rem;background:var(--g-paper);border-radius:3px;
  font-family:var(--hand);font-weight:700;font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.1;color:var(--ink);
  box-shadow:0 .9em 1.6em -.9em rgba(60,45,10,.6),0 .2em .4em -.2em rgba(0,0,0,.3);transform:rotate(-1.6deg);
}

/* ─── Un capítulo: abierto sobre el papel, como las funciones de la portada ─── */
.tchap{padding:clamp(1.8rem,4vw,2.8rem) 0;scroll-margin-top:4.6rem}
.tchap + .tchap{border-top:1px dashed var(--line)}
.tchap__head{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.4rem}
.tchap__flag{
  flex:none;min-width:3.1rem;height:2.15rem;padding:0 .5rem;border-radius:.45rem;display:grid;place-items:center;
  background:var(--g-tab);color:var(--g-ink);font-weight:820;font-size:1.02rem;font-variant-numeric:tabular-nums;
  box-shadow:0 .35em .7em -.3em rgba(0,0,0,.5);transform:rotate(-3deg);margin-top:.15rem;
}
.tchap__head h2{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:800;letter-spacing:-.015em;line-height:1.12;text-wrap:balance}
:lang(ja) .tchap__head h2,:lang(ja) .tut__hero h1{word-break:auto-phrase}
.tchap__sum{color:var(--ink-soft);font-size:1.08rem;margin-top:.3rem;max-width:54ch}

.tchap__body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(1.2rem,3vw,2.4rem);align-items:start}
/* El vídeo, en su marco de papel con chinche; se endereza al reproducirse. */
.tchap__shot{background:var(--g-paper);padding:10px;transform:rotate(-.7deg)}
.tchap:nth-of-type(even) .tchap__shot{transform:rotate(.6deg)}
.tchap__shot:hover,.tchap__shot.is-playing,.tchap:nth-of-type(even) .tchap__shot:hover,.tchap:nth-of-type(even) .tchap__shot.is-playing{transform:rotate(0deg)}
.tvideo{display:block;width:100%;height:auto;aspect-ratio:16/10;border-radius:9px;background:#1f1d1a;object-fit:contain}
.tchap__meta{margin-top:.8rem;font-size:.84rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.tchap__text .demo-steps{margin-top:0;max-width:none}
.tut__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ─── Botones y opciones: una banderita que abre la lista ─── */
.topts{margin-top:1.7rem}
.topts summary{
  display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;list-style:none;user-select:none;
}
.topts summary::-webkit-details-marker{display:none}
.topts__label{
  font-family:var(--hand);font-size:1.16rem;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:.4em;padding:.1em .6em;box-shadow:0 .3em .6em -.4em rgba(0,0,0,.35);
}
.topts__tab{
  width:1.75rem;height:1.5rem;border-radius:.32rem;display:grid;place-items:center;
  background:var(--g-tab);color:var(--g-ink);font-size:.72rem;font-weight:800;
  box-shadow:0 .3em .6em -.3em rgba(0,0,0,.5);transition:transform .2s ease;
}
.topts[open] .topts__tab{transform:rotate(-4deg)}
.topts summary:focus-visible{outline:2px solid var(--pin);outline-offset:3px;border-radius:6px}
.topts dl{columns:2;column-gap:clamp(1.4rem,3vw,2.6rem);margin-top:1.1rem}
.topts dl > div{break-inside:avoid;padding-bottom:1rem}
.topts dt{display:inline;font-weight:700;font-size:.97rem;line-height:1.5;background:linear-gradient(180deg,transparent 60%,var(--g-paper) 60%);padding:0 .12em;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.topts dd{color:var(--ink-soft);font-size:.95rem;line-height:1.5;margin-top:.25rem}

/* ─── Cierre: una última nota ─── */
.tut__end{display:grid;place-items:center;margin-top:clamp(2.6rem,6vw,4rem)}
.tut__endnote{
  position:relative;max-width:30rem;text-align:center;padding:2.1rem 1.8rem 1.6rem;background:var(--paper-yellow);border-radius:3px;
  box-shadow:0 1em 1.8em -1em rgba(60,45,10,.6),0 .2em .4em -.2em rgba(0,0,0,.3);transform:rotate(-1deg);
}
.tut__endnote h2{font-family:var(--hand);font-weight:700;font-size:clamp(1.6rem,3.2vw,2.1rem);line-height:1.15}
.tut__endnote p{color:rgba(43,36,16,.75);margin:.5rem 0 1.2rem}
.tut__endcta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}

/* ─── Pantallas estrechas ─── */
@media (max-width:980px){
  .tut__hero{grid-template-columns:minmax(0,1fr)}
  .tut__lede{max-width:56ch}
  .tut__board{max-width:34rem}
  .tut__layout{grid-template-columns:minmax(0,1fr)}
  /* El índice pasa a ser una tira de banderitas que se desliza. */
  .tut__toc{
    top:3.5rem;z-index:20;max-height:none;overflow:visible;padding:.45rem 0;margin:0 calc(-1 * clamp(1rem,4vw,2.5rem));
    background:rgba(251,247,238,.9);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line);
  }
  .tut__toc h2,.tut__tochint,.toc__group{display:none}
  #tut-toc{display:flex;gap:.9rem;overflow-x:auto;padding:.1rem clamp(1rem,4vw,2.5rem);scrollbar-width:none}
  #tut-toc::-webkit-scrollbar{display:none}
  .tflag{flex:none;white-space:nowrap;padding:0}
  .tflag__label{padding:.14rem .35rem}
  .tchap{scroll-margin-top:7rem}
  .tgroup{scroll-margin-top:7.6rem}
}
@media (max-width:760px){
  .tchap__body{grid-template-columns:minmax(0,1fr)}
  .topts dl{columns:1}
}
@media (max-width:480px){
  .tut__board{gap:1.2rem .9rem}
  .tnote{padding:1.5rem .75rem .8rem}
  .tnote__list{display:none}
  .tchap__flag{min-width:2.6rem;height:1.9rem;font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){
  .tnote,.tflag__tab,.tflag__label,.topts__tab,.tchap__shot{transition:none}
}