/* ============================================================
   CELULAR: mismo esquema que en escritorio.
   Temario angosto a la izquierda, contenido a la derecha.
   ============================================================ */
@media (max-width: 760px) {
  :root { --head: 62px; --stageH: calc(100svh - var(--head) - 18px); }

  /* cabecera: menú a la izquierda, logo, y la acción a la derecha */
  .top { gap: 10px; }
  .nav { position: fixed; inset: var(--head) 0 auto; flex-direction: column; gap: 0;
    background: rgba(11,14,19,.98); border-bottom: 1px solid var(--line);
    padding: 6px 18px 16px; display: none; text-align: left; }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .burger { display: block; order: 0; margin-left: -6px; padding: 10px 8px; }
  .burger span { width: 20px; }
  .brand { order: 1; }
  .brand img { height: 28px; }
  .cta { order: 2; margin-left: auto; padding: 9px 14px; font-size: 13px; }
  .cta .dot { display: none; }
  .brand-tag, .brand-sep { display: none; }

  /* portada compacta */
  .hero { padding: calc(var(--head) + 26px) 18px 86px; min-height: auto; }
  .hero-in { max-width: none; }
  h1 { font-size: 42px; }
  .lead { font-size: 15.5px; }
  .chips { gap: 7px; margin-top: 18px; }
  .chips li { font-size: 11px; padding: 7px 12px; }
  .hero-btns { gap: 10px; margin-top: 22px; }
  .hero-btns .btn { flex: 1 1 100%; }
  .jump { margin-top: 22px; }
  .scroll-hint { display: none; }

  /* recorrido: dos columnas, igual que en escritorio */
  .tour { padding: 26px 9px 20px; }
  .tour-head { margin-bottom: 18px; }
  .tour-head h2 { font-size: 26px; }
  .tour-head .eyebrow { margin-bottom: 12px; }
  .tour-grid { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; }

  .toc { position: sticky; top: calc(var(--head) + 8px); align-self: start;
    background: none; border: 0; margin: 0; padding: 0; z-index: 5; }
  .toc-title { display: block; font-size: 8.5px; letter-spacing: .18em; margin: 0 0 8px 2px; }
  .toc ol { display: block; max-height: calc(var(--stageH) - 34px); overflow: auto;
    scrollbar-width: none; padding: 0; }
  .toc ol::-webkit-scrollbar { display: none; }
  .toc li { white-space: normal; border: 0; border-left: 2px solid transparent; border-radius: 0;
    padding: 7px 4px 7px 22px; font-size: 11.5px; line-height: 1.22; margin: 0 0 1px; background: none; }
  .toc li::before { left: 2px; top: 8px; font-size: 9px; }
  .toc li.on { border-left-color: var(--red); background: rgba(227,6,19,.12); border-radius: 0 8px 8px 0; }
  .toc-bar { margin-top: 8px; }

  .stage { top: calc(var(--head) + 8px); height: var(--stageH); min-height: 0; }
  .scene { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px; }
  .sc-chip { font-size: 9px; padding: 4px 9px; margin-bottom: 6px; }
  .sc-title { font-size: 21px; }
  .sc-sub { font-size: 12.5px; margin-top: 4px; max-width: none; }
  .sc-top { display: contents; }
  .sc-play { grid-row: 4; width: 100%; align-items: center; text-align: center;
    padding: 11px 14px; border-radius: 12px; }
  .sc-play b { font-size: 14px; }
  .sc-play small { font-size: 10px; }
  .sc-fit { container-type: normal; }
  .sc-shot { width: 100%; box-shadow: 0 10px 26px rgba(0,0,0,.45); border-radius: 10px; }
  .hot { border-width: 2px; }
  .hot b { width: 16px; height: 16px; font-size: 9px; left: -7px; top: -7px; }
  .hot .tip { display: none; }
  .hot.show { box-shadow: 0 0 0 2px rgba(255,237,0,.55), 0 0 22px rgba(227,6,19,.8); }

  /* los puntos, como lista legible debajo de la pantalla */
  .pts { list-style: none; margin: 0; padding: 0 2px 2px 0; display: grid; gap: 2px; align-content: start;
    overflow: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .pts li { display: flex; gap: 9px; align-items: flex-start; padding: 8px 9px; border-radius: 9px;
    font-size: 13px; line-height: 1.35; color: var(--tx2); border: 1px solid transparent; cursor: pointer; }
  .pts li .n { flex: 0 0 19px; height: 19px; border-radius: 50%; background: rgba(227,6,19,.18);
    color: var(--red); font-family: var(--mono); font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; margin-top: 1px; }
  .pts li.on { background: rgba(227,6,19,.14); border-color: rgba(227,6,19,.5); color: var(--tx); }
  .pts li.on .n { background: var(--red); color: #fff; }

  /* video */
  .videosec { padding: 30px 14px 56px; }
  .v-head { margin-bottom: 16px; }
  .videosec h2 { font-size: 26px; }
  .switches { margin-top: 14px; gap: 8px; }
  #swFmt { display: none; }
  .v-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .player { border-radius: 14px; position: sticky; top: calc(var(--head) + 6px); z-index: 6;
    box-shadow: 0 14px 30px rgba(11,14,19,.85); }
  .v-grid { position: relative; }
  .player video { max-height: 52svh; }
  .chapters { max-height: none; overflow: visible; border-radius: 12px; }
  .chapters::before, .chapters::after { display: none; }
  .chapters li { scroll-margin-top: calc(var(--head) + 58svh); }
  .chapters li { padding: 12px 13px; }
  .chapters .n { font-size: 14px; }
  .bigplay { width: 62px; height: 62px; font-size: 21px; }
  .round { width: 40px; height: 40px; font-size: 14px; }
  .round.small { width: 34px; height: 34px; font-size: 12px; }
  .v-ctrls { gap: 8px; padding: 10px; }
  .time { font-size: 10.5px; }
  .v-now { font-size: 9.5px; left: 10px; top: 10px; padding: 5px 9px; }

  /* resto */
  .gallery, .downloads, .help { padding: 40px 16px; }
  .g-head, .d-head { margin-bottom: 22px; }
  .gallery h2, .downloads h2, .help h2 { font-size: 26px; }
  .g-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .g-grid figcaption { font-size: 9px; padding: 7px 8px; }
  .d-grid { grid-template-columns: 1fr; gap: 10px; }
  .dcard { padding: 16px; }
  .help-btns .btn { flex: 1 1 100%; }
  .foot { padding: 34px 16px; gap: 12px; }
  .foot .small { margin: 0; }
  .secnum { display: none; }
  .totop { right: 12px; bottom: 12px; width: 38px; height: 38px; }
  .lb { padding: 2vh 3vw; }
  .lb-prev { left: 4px; }
  .lb-next { right: 4px; }
  .lb-close { top: 10px; right: 10px; }
}

/* pantallas muy angostas */
@media (max-width: 380px) {
  .tour-grid { grid-template-columns: 84px minmax(0, 1fr); }
  .toc li { font-size: 11px; padding-left: 20px; }
  .sc-title { font-size: 19px; }
}