/* NexoPrice · web — guías de uso con videotutorial (/guias/). */

.guias-indice { display: flex; flex-wrap: wrap; gap: 10px; }
.guias-indice a { border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; text-decoration: none; color: inherit; font-size: 15px; }
.guias-indice a:hover { border-color: var(--orange); }
.guias-indice .mono { color: var(--muted); margin-left: 4px; font-size: 13px; }

.guias-categoria { padding-top: 26px; padding-bottom: 40px; scroll-margin-top: 90px; }
.guias-categoria .h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 22px; }
.guias-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.guias-categoria:last-of-type { padding-bottom: 110px; }

.guia-tarjeta { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; }
.guia-tarjeta .h3 { margin: 0; }
.guia-tarjeta .body { margin: 0; color: var(--muted); }
.guia-tarjeta__poster { position: relative; display: block; border-radius: 3px; overflow: hidden; background: var(--ink); }
.guia-tarjeta__poster img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.guia-tarjeta__dur { position: absolute; right: 8px; bottom: 8px; background: rgba(20, 23, 26, .85); color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 3px; }

/* ── Una guía ── */
.guia { max-width: 860px; padding-top: 130px; padding-bottom: 110px; }
.guia-migas { font-size: 14px; color: var(--muted); display: flex; gap: 8px; }
.guia-migas a { color: inherit; }
.guia-cabecera { margin-top: 22px; }
.guia-titulo { font-size: clamp(32px, 4.6vw, 54px); }
.guia-intro { margin-top: 30px; }

.guia-video { margin: 36px 0 0; }
.guia-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--ink); border-radius: 6px; }
.guia-capitulos { margin-top: 16px; border: 1px solid var(--line); border-radius: 4px; padding: 16px 18px; }
.guia-capitulos ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 18px; }
.guia-capitulos button, .guia-paso__ver {
  background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit; color: inherit; text-align: left;
}
.guia-capitulos button:hover, .guia-paso__ver:hover { color: var(--orange); }
.guia-capitulos .mono { color: var(--orange); margin-right: 6px; font-size: 13px; }

.guia-pasos { margin-top: 56px; }
.guia-pasos ol { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.guia-paso { display: grid; grid-template-columns: 64px 1fr; gap: 18px; border: 1px solid var(--line); border-radius: 4px; padding: 22px 24px; background: var(--white); scroll-margin-top: 90px; }
.guia-paso__num { font-family: 'JetBrains Mono', monospace; font-size: 26px; color: var(--orange); font-weight: 600; }
.guia-paso h3 { margin: 0 0 8px; font-size: 21px; }
.guia-paso p { margin: 0 0 10px; line-height: 1.6; }
.guia-paso__ruta { color: var(--muted); font-size: 15px; }
.guia-paso__ver { font-size: 14px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--orange); }

.guia-faq { margin-top: 56px; }
.guia-faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.guia-faq summary { cursor: pointer; font-weight: 600; font-size: 18px; }
.guia-faq details p { margin: 10px 0 0; line-height: 1.65; color: var(--muted); }

.guia-transcripcion { margin-top: 40px; border: 1px solid var(--line); border-radius: 4px; padding: 14px 18px; }
.guia-transcripcion summary { cursor: pointer; font-weight: 600; }
.guia-transcripcion .prose { margin-top: 14px; font-size: 16px; }

.guia-relacionadas { margin-top: 64px; }
.guia-relacionadas .guias-grid { margin-top: 22px; }

.guia-nav { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.guia-nav a { border: 1px solid var(--line); border-radius: 4px; padding: 16px 18px; color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 6px; }
.guia-nav a:hover { border-color: var(--orange); }
.guia-nav__sig { text-align: right; }

@media (max-width: 720px) {
  .guia { padding-top: 104px; }
  .guia-paso { grid-template-columns: 1fr; gap: 6px; padding: 18px; }
  .guia-nav { grid-template-columns: 1fr; }
  .guia-nav__sig { text-align: left; }
}