/* Doctor Online MX v3 — blog: índice (bi-) y guías (bl-)
   Índice: inicio oscuro con auroras y un abanico 3D de guías destacadas, banda tipográfica,
   las 10 guías en una galería horizontal fijada (tramos como capítulos) y el cierre de servicios.
   Guía: inicio oscuro con su ilustración 3D, lectura en una hoja clara que sube como tarjeta
   (prosa de ~66 caracteres, índice con la sección activa), cierre oscuro con el precio grande.
   Sin animaciones infinitas propias: solo las del kit (auroras, halo del botón, marquesina). */

/* =====================================================================
   Comunes
   ===================================================================== */
.page-blog { --prose-ink: #24324E; --r-xl: clamp(22px, 1rem + .8vw, 30px); }

.bl-progress { position: fixed; z-index: 95; inset: 0 0 auto 0; height: 3px; pointer-events: none; }
.bl-progress i { display: block; height: 100%; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, var(--electric), var(--sky), var(--mint)); box-shadow: 0 0 14px rgba(0, 85, 255, .55); transform-origin: 0 50%; transform: scaleX(0); }

.bl-rail { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.bl-rail li { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .14); }
.bl-rail .is-past { background: rgba(143, 182, 255, .55); }
.bl-rail .is-now { background: #fff; box-shadow: 0 0 12px rgba(143, 182, 255, .9); }

/* Títulos en Clash Display: aire entre palabras (nada de palabras pegadas) */
.bl-h1, .bi-h1, .bl-prose h2, .bl-faq h2, .bl-cta__title, .bl-svc__name, .bl-pn__t, .bl-rel__t, .bi-card__title, .bi-chap__name, .bi-cover__t, .bi-end__t { font-family: var(--font-display); font-weight: 600; word-spacing: .07em; text-wrap: balance; }

/* =====================================================================
   GUÍA · Inicio oscuro
   ===================================================================== */
.bl-hero { position: relative; overflow: clip; padding-top: calc(var(--header-h) + clamp(1.5rem, 1rem + 2.6vw, 3.5rem)); padding-bottom: calc(clamp(2.75rem, 2rem + 3.6vw, 5.5rem) + 2.5rem); }
.bl-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .bl-hero__grid { grid-template-columns: minmax(0, 1.32fr) minmax(0, .78fr); gap: clamp(3rem, 1rem + 4vw, 6rem); } }

.bl-crumbs li:last-child { flex: 1 1 10rem; min-width: 0; }
.bl-crumbs li:last-child > span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bl-hero__top { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1.25rem; }
.bl-serie-chip, .bi-hero__free { display: inline-flex; align-items: center; padding: .35rem .8rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 640; color: rgba(255, 255, 255, .82); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-variant-numeric: tabular-nums; }

.bl-h1 { font-size: clamp(2.05rem, 1.1rem + 3.1vw, 3.75rem); line-height: 1.02; letter-spacing: -.02em; color: #fff; max-width: 22ch; }
.bl-h1 .rise-line > span { text-wrap: balance; }
.bl-dek { margin-top: 1.25rem; max-width: 52ch; font-size: var(--fs-lead); line-height: 1.5; color: rgba(255, 255, 255, .78); text-wrap: pretty; }
.bl-meta { list-style: none; padding: 0; margin: 1.35rem 0 0; display: flex; flex-wrap: wrap; gap: .45rem 1.25rem; font-size: var(--fs-small); color: rgba(255, 255, 255, .68); }
.bl-meta li { display: inline-flex; align-items: center; gap: .4rem; }
.bl-meta .i { color: var(--sky); }
.bl-meta time { color: #fff; font-weight: 600; }
.bl-hero__ctas { margin-top: 1.75rem; }
@media (max-width: 559px) {
  .bl-hero__ctas { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: .6rem; }
  .bl-hero__ctas .btn { --btn-h: 50px; padding-inline: .9em; font-size: .95rem; white-space: nowrap; }
}
@media (max-width: 379px) { .bl-hero__ctas { grid-template-columns: minmax(0, 1fr); } }
.bl-rail--hero { margin-top: 1.5rem; max-width: 20rem; }
@media (min-width: 1024px) { .bl-rail--hero { display: none; } }

/* Palabra gigante hueca al fondo del inicio (la categoría de la guía): se hunde bajo la hoja de lectura
   y se desliza de lado con el scroll (blog.js). Es decoración: aria-hidden. */
.bl-word { position: absolute; z-index: -1; left: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); bottom: .35rem; margin-left: -.06em; pointer-events: none; white-space: nowrap; font-family: var(--font-display); font-weight: 600; font-size: clamp(5.25rem, 2.5rem + 13.5vw, 15.5rem); line-height: .8; letter-spacing: -.035em; word-spacing: .05em; color: transparent; -webkit-text-stroke: 1.5px rgba(143, 182, 255, .2); background: linear-gradient(180deg, rgba(143, 182, 255, .13), rgba(143, 182, 255, 0) 62%); -webkit-background-clip: text; background-clip: text; will-change: transform; }
.bl-word > span { display: block; animation: bl-word-in 1.8s var(--ease-out) .35s both; }
@keyframes bl-word-in { from { opacity: 0; transform: translateY(22%); } }
@media (max-width: 759px) { .bl-word { bottom: .15rem; font-size: clamp(4.25rem, 2rem + 13vw, 6rem); -webkit-text-stroke-width: 1.2px; } }

/* Ilustración 3D de la guía (solo escritorio) */
.bl-visual { display: none; }
@media (min-width: 1024px) {
  .bl-visual { position: relative; display: block; justify-self: end; width: min(100%, 24.5rem); margin-right: 1.5rem; }
}
.bl-visual__halo { position: absolute; inset: 8% -18% -6% -18%; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 85, 255, .55), rgba(0, 85, 255, 0) 72%); pointer-events: none; }
.bl-visual__frame { position: relative; z-index: 1; aspect-ratio: 4 / 5; border-radius: 32px; overflow: hidden; background: var(--night); box-shadow: inset 0 0 0 1px rgba(143, 182, 255, .28), 0 0 0 8px rgba(255, 255, 255, .03), 0 60px 110px -40px rgba(0, 30, 150, .95); transform: perspective(1100px) rotateY(-9deg) rotateX(3deg) rotate(-1.5deg); transition: transform .8s var(--ease-out); }
.bl-visual__img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.bl-visual__shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 38%), radial-gradient(60% 40% at 50% 100%, rgba(4, 11, 32, .55), rgba(4, 11, 32, 0)); }
.bl-visual__chip { position: absolute; z-index: 2; top: 1.6rem; left: -2.6rem; }
.bl-visual__facts { position: absolute; z-index: 2; right: -1.75rem; bottom: 1.75rem; display: grid; gap: .8rem; width: 15.75rem; padding: 1rem 1.1rem 1.05rem; }
.bl-visual__facts ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; font-size: var(--fs-small); color: rgba(255, 255, 255, .86); line-height: 1.3; }
.bl-visual__facts li { display: flex; align-items: center; gap: .5rem; }
.bl-visual__facts .i { color: var(--mint); }

/* =====================================================================
   GUÍA · Hoja de lectura (sube como tarjeta sobre el inicio)
   ===================================================================== */
.bl-body { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.bl-body .fx-dots { -webkit-mask-image: radial-gradient(40% 30% at 92% 4%, #000 0%, transparent 70%); mask-image: radial-gradient(40% 30% at 92% 4%, #000 0%, transparent 70%); }
.bl-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 1100px) { .bl-layout { grid-template-columns: 15.5rem minmax(0, 44rem); column-gap: clamp(3rem, 1rem + 5vw, 7.5rem); align-items: start; } }

.bl-aside { display: none; }
@media (min-width: 1100px) {
  .bl-aside { display: block; align-self: stretch; }
  .bl-aside__in { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1.4rem; max-height: calc(100vh - var(--header-h) - 3rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: .25rem .25rem .25rem 0; }
  .bl-mtoc { display: none; }
}
.bl-aside__title { font-size: var(--fs-xs); font-weight: 650; color: var(--ink-2); }
.bl-toc ol { position: relative; list-style: none; padding: 0; margin: 0; display: grid; }
.bl-toc ol::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: var(--line); }
.bl-toc a { position: relative; display: block; padding: .46rem 0 .46rem 1.1rem; font-size: var(--fs-small); line-height: 1.35; color: var(--ink-2); transition: color .25s var(--ease-out); }
.bl-toc a::before { content: ""; position: absolute; left: 0; top: .3rem; bottom: .3rem; width: 2px; border-radius: 2px; background: var(--electric); transform: scaleY(0); transition: transform .35s var(--ease-out); }
.bl-toc a::after { content: ""; position: absolute; left: -2px; top: calc(.46rem + .5em); width: 6px; height: 6px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: background-color .3s, box-shadow .3s; }
.bl-toc a:hover { color: var(--ink); }
.bl-toc a.is-read::after { background: var(--electric); box-shadow: none; }
.bl-toc a.is-on { color: var(--electric-600); font-weight: 620; }
.bl-toc a.is-on::before { transform: scaleY(1); }
.bl-toc a.is-on::after { opacity: 0; }

.bl-aside__svc { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: .3rem; padding: 1.1rem 1.2rem 1.15rem; border-radius: var(--r-card); color: rgba(255, 255, 255, .76); background: radial-gradient(90% 90% at 100% 0%, rgba(0, 85, 255, .6), rgba(0, 85, 255, 0) 70%), linear-gradient(160deg, #0B1D3B, #040B20); box-shadow: var(--shadow-2); transition: transform .4s var(--ease-out), box-shadow .3s var(--ease-out); }
.bl-aside__svc:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
.bl-aside__svc:focus-visible { outline-color: var(--electric); }
.bl-aside__svc-k { font-size: var(--fs-xs); font-weight: 650; color: var(--sky); }
.bl-aside__svc b { color: #fff; font-weight: 640; line-height: 1.25; }
.bl-aside__svc small { font-size: var(--fs-xs); line-height: 1.4; }
.bl-aside__svc .num { display: block; margin: .3rem 0 .1rem; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; color: #fff; }

/* Índice plegable en celular y tableta */
.bl-mtoc { margin-bottom: 2rem; border-radius: var(--r-card); background: var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
.bl-mtoc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 54px; padding: .7rem 1.1rem; cursor: pointer; font-weight: 640; }
.bl-mtoc summary::-webkit-details-marker { display: none; }
.bl-mtoc summary > span { display: inline-flex; align-items: center; gap: .55rem; }
.bl-mtoc summary .i { color: var(--electric); }
.bl-mtoc summary small { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--fs-xs); font-weight: 520; color: var(--ink-2); }
.bl-mtoc summary small::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--ease-out); }
.bl-mtoc[open] summary small::after { transform: rotate(225deg) translateY(-2px); }
.bl-mtoc nav { padding: 0 1.1rem .75rem; }
.bl-mtoc ol { list-style: none; margin: 0; padding: .35rem 0 0; display: grid; border-top: 1px solid var(--line); }
.bl-mtoc a { position: relative; display: flex; align-items: center; min-height: 44px; padding: .35rem 0 .35rem 1.1rem; font-size: var(--fs-small); line-height: 1.35; color: var(--ink-2); }
.bl-mtoc a::before { content: ""; position: absolute; left: .1rem; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.bl-mtoc a.is-read::before { background: var(--electric); box-shadow: none; }
.bl-mtoc a.is-on { color: var(--electric-600); font-weight: 620; }
.bl-mtoc a.is-on::before { background: var(--electric); box-shadow: 0 0 0 4px rgba(0, 85, 255, .14); }

/* =====================================================================
   GUÍA · Prosa
   ===================================================================== */
.bl-article { min-width: 0; scroll-margin-top: calc(var(--header-h) + 1rem); }
.bl-prose { color: var(--prose-ink); font-size: 1.0625rem; line-height: 1.72; }
@media (min-width: 760px) { .bl-prose { font-size: 1.125rem; } .bl-prose .bl-intro { font-size: 1.16em; } }
.bl-prose > * { max-width: 66ch; }
.bl-prose > * + * { margin-top: 1.15em; }
.bl-prose .bl-intro { font-size: 1.08em; line-height: 1.6; color: var(--ink); font-weight: 460; text-wrap: pretty; }
.bl-prose p { text-wrap: pretty; overflow-wrap: break-word; }

.bl-prose h2, .bl-faq h2 { font-size: clamp(1.5rem, 1.12rem + 1.3vw, 2.1rem); line-height: 1.1; letter-spacing: -.012em; color: var(--ink); scroll-margin-top: calc(var(--header-h) + 1.25rem); }
.bl-prose h2 { margin-top: 2.4em; padding-top: 1.35em; border-top: 1px solid var(--line); }
.bl-prose h2 + * { margin-top: .8em; }
.bl-step { display: block; width: max-content; margin-bottom: .7rem; padding: .34rem .75rem; border-radius: 999px; background: var(--electric); color: #fff; font-family: var(--font); font-size: .78rem; font-weight: 680; letter-spacing: .01em; word-spacing: normal; line-height: 1.1; box-shadow: 0 8px 18px -10px rgba(0, 85, 255, .9); font-variant-numeric: tabular-nums; }

.bl-prose strong { color: var(--ink); font-weight: 650; }
.bl-prose a { color: var(--electric-600); font-weight: 580; text-decoration: underline; text-decoration-color: rgba(0, 85, 255, .35); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color .2s var(--ease-out), color .2s var(--ease-out); overflow-wrap: anywhere; }
.bl-prose a:hover { text-decoration-color: currentColor; }
.bl-prose a.ext::after { content: ""; display: inline-block; width: .7em; height: .7em; margin-left: .2em; vertical-align: .02em; background: currentColor; opacity: .7; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat; }
.bl-prose code { padding: .1em .45em; border-radius: 7px; background: var(--electric-050); color: var(--electric-600); font-family: var(--font); font-size: .9em; font-weight: 650; overflow-wrap: anywhere; }
.bl-ph { -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: .04em .32em; border-radius: 6px; background: rgba(0, 85, 255, .1); color: var(--electric-600); font-weight: 620; }

/* Listas */
.bl-prose ul:not([class]):not(.bl-prompt__text *), .bl-prose ol:not([class]):not(.bl-prompt__text *) { list-style: none; padding: 0; display: grid; gap: .7em; }
.bl-prose ul:not([class]):not(.bl-prompt__text *) > li { position: relative; padding-left: 1.55em; }
.bl-prose ul:not([class]):not(.bl-prompt__text *) > li::before { content: ""; position: absolute; left: .3em; top: .66em; width: .46em; height: .46em; border-radius: 2px; background: var(--electric); transform: rotate(45deg); }
.bl-prose ol:not([class]):not(.bl-prompt__text *) { counter-reset: paso; }
.bl-prose ol:not([class]):not(.bl-prompt__text *) > li { position: relative; min-height: 1.9em; padding-left: 2.55em; counter-increment: paso; }
.bl-prose ol:not([class]):not(.bl-prompt__text *) > li::before { content: counter(paso); position: absolute; left: 0; top: .02em; width: 1.85em; height: 1.85em; border-radius: 50%; display: grid; place-items: center; background: var(--electric-050); color: var(--electric); font-size: .8em; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px rgba(0, 85, 255, .18); }
.bl-prose li > ul, .bl-prose li > ol { margin-top: .6em; }
.bl-prose li > p + p { margin-top: .6em; }

/* Sí / no */
.bl-dd { list-style: none; padding: 0; display: grid; gap: .6rem; }
.bl-dd li { position: relative; padding: .85rem 1rem .85rem 3rem; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line); line-height: 1.5; font-size: .96em; }
.bl-dd li::before { content: ""; position: absolute; left: .95rem; top: 1rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; }
.bl-dd .is-no::before { background: #FDEDEC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B42318' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 52% no-repeat; }
.bl-dd .is-yes { background: linear-gradient(180deg, #fff, var(--electric-050)); box-shadow: 0 0 0 1.5px rgba(0, 85, 255, .32); color: var(--ink); }
.bl-dd .is-yes::before { background: var(--electric) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 56% no-repeat; }

/* Etiquetas de colores */
.bl-tags { list-style: none; padding: 0; display: grid; gap: .55rem; }
.bl-tags li { position: relative; padding: .7rem 1rem .7rem 2.75rem; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line); line-height: 1.5; font-size: .96em; }
.bl-dot { position: absolute; left: 1rem; top: 1.02rem; width: 1rem; height: 1rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(11, 29, 59, .16), 0 0 0 3px rgba(11, 29, 59, .04); }
.bl-dot--verde { background: #25D366; }
.bl-dot--azul { background: #0055FF; }
.bl-dot--amarilla { background: #F5B83D; }
.bl-dot--roja { background: #E5484D; }
.bl-dot--blanca { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(11, 29, 59, .28); }

/* Avisos */
.bl-callout { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); gap: .9rem; align-items: start; padding: 1.1rem 1.25rem; border-radius: var(--r-card); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); font-size: .96em; line-height: 1.6; }
.bl-callout > .i { width: 2.3rem; height: 2.3rem; padding: .52rem; border-radius: 12px; background: #fff; color: var(--ink-2); box-shadow: 0 0 0 1px var(--line); }
.bl-callout--warn { background: var(--electric-050); box-shadow: inset 0 0 0 1px rgba(0, 85, 255, .22); }
.bl-callout--warn > .i { background: var(--electric); color: #fff; box-shadow: 0 8px 18px -10px rgba(0, 85, 255, .9); }

/* Tarjeta copiable (prompts y plantillas) */
.bl-prose > .bl-prompt { max-width: 46rem; margin-block: 2em; }
.bl-prompt { position: relative; overflow: hidden; isolation: isolate; border-radius: 22px; color: rgba(255, 255, 255, .9); background: radial-gradient(80% 120% at 100% 0%, rgba(0, 85, 255, .42), rgba(0, 85, 255, 0) 60%), linear-gradient(160deg, #0B1D3B, #050E26); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -30px rgba(4, 11, 32, .65); }
.bl-prompt::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(143, 182, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 182, 255, .06) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(60% 70% at 90% 0%, #000, transparent 75%); mask-image: radial-gradient(60% 70% at 90% 0%, #000, transparent 75%); }
.bl-prompt__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .6rem .6rem 1.2rem; background: rgba(255, 255, 255, .035); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.bl-prompt__label { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-xs); font-weight: 650; color: var(--sky); }
.bl-prompt__btn { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1.05rem; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: var(--fs-small); font-weight: 640; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: background-color .25s var(--ease-out), color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .3s var(--ease-out); }
.bl-prompt__btn:hover { background: rgba(255, 255, 255, .18); }
.bl-prompt__btn:active { transform: scale(.96); }
.bl-prompt__btn:focus-visible { outline-color: #fff; }
.bl-prompt__btn .i { width: 1.05rem; height: 1.05rem; }
.bl-prompt__btn .i-ok { display: none; }
.bl-prompt__btn.is-done { background: var(--mint); color: #053B35; box-shadow: none; }
.bl-prompt__btn.is-done .i-copy { display: none; }
.bl-prompt__btn.is-done .i-ok { display: block; }
.bl-prompt__text { padding: 1.2rem 1.35rem 1.4rem; font-size: .93em; line-height: 1.66; }
.bl-prompt__text > * + * { margin-top: .9em; }
.bl-prompt__text strong { color: #fff; }
.bl-prompt__text ol, .bl-prompt__text ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6em; }
.bl-prompt__text > ol { counter-reset: pr; }
.bl-prompt__text > ol > li { position: relative; padding-left: 2.1em; counter-increment: pr; }
.bl-prompt__text > ol > li::before { content: counter(pr) "."; position: absolute; left: 0; top: 0; color: var(--sky); font-weight: 700; font-variant-numeric: tabular-nums; }
.bl-prompt__text ul > li { position: relative; padding-left: 1.2em; }
.bl-prompt__text ul > li::before { content: ""; position: absolute; left: .15em; top: .7em; width: .38em; height: .38em; border-radius: 50%; background: var(--sky); }
.bl-prompt__text li > ul { margin-top: .5em; }
.bl-prompt .bl-ph { background: rgba(143, 182, 255, .18); color: #D6E4FF; }
.bl-prompt code { background: rgba(255, 255, 255, .1); color: #D6E4FF; }

/* Lista de verificación interactiva */
.bl-prose > .bl-check { max-width: 46rem; }
.bl-check { margin-block: 1.6em; padding: clamp(1.15rem, 1rem + 1vw, 1.75rem); border-radius: var(--r-panel); background: var(--card); box-shadow: var(--shadow-2), 0 0 0 1px var(--line); --p: 0; }
.bl-check__intro { font-weight: 640; color: var(--ink); }
.bl-check__list { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .15rem; font-size: .96em; }
@media (min-width: 640px) { .bl-check__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .75rem; } }
.bl-check__list label { display: flex; align-items: center; gap: .75rem; min-height: 46px; padding: .35rem .6rem; margin-inline: -.6rem; border-radius: 12px; cursor: pointer; line-height: 1.35; transition: background-color .2s var(--ease-out); }
.bl-check__list label:hover { background: var(--paper); }
.bl-check__list input { appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; margin: 0; border-radius: 7px; border: 1.5px solid var(--line-strong); background: #fff; cursor: pointer; transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out); }
.bl-check__list input::after { content: ""; width: .85rem; height: .85rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; transform: scale(0); transition: transform .35s var(--ease-out); }
.bl-check__list input:checked { background: var(--electric); border-color: var(--electric); }
.bl-check__list input:checked::after { transform: scale(1); }
.bl-check__list input:focus-visible { outline: 2.5px solid var(--electric); outline-offset: 2px; }
.bl-check__list input:checked + span { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(11, 29, 59, .3); }
.bl-check__foot { display: flex; align-items: center; gap: .9rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.bl-check__bar { flex: 1; height: 6px; border-radius: 6px; background: var(--paper-2); overflow: hidden; }
.bl-check__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--electric), var(--sky)); transform-origin: 0 50%; transform: scaleX(var(--p)); transition: transform .5s var(--ease-out); }
.bl-check__count { flex: none; font-size: var(--fs-small); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bl-check__count b { color: var(--ink); }
.bl-check.is-done .bl-check__bar i { background: var(--mint); }
.bl-check.is-done .bl-check__count { color: var(--mint-ink); font-weight: 620; }

/* Preguntas frecuentes de la guía */
.bl-faq { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding-top: 1.75rem; border-top: 1px solid var(--line); max-width: 46rem; }
.bl-faq h2 { margin-bottom: 1.25rem; }
.bl-faq .faq__a { line-height: 1.62; }

/* =====================================================================
   GUÍA · Cierre oscuro: el precio es el clímax
   ===================================================================== */
.bl-cta-sec { overflow: clip; padding-block: clamp(4.5rem, 3rem + 5vw, 8rem) calc(clamp(4.5rem, 3rem + 5vw, 8rem) + 2.5rem); }
.bl-cta { position: relative; display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .bl-cta { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); align-items: center; gap: clamp(3rem, 1rem + 5vw, 6.5rem); } }
.bl-cta__copy { display: grid; gap: 1.2rem; justify-items: start; }
.bl-cta__title { font-size: clamp(2rem, 1.2rem + 2.9vw, 3.7rem); line-height: 1.02; letter-spacing: -.018em; color: #fff; max-width: 17ch; }
.bl-cta__text { max-width: 56ch; color: rgba(255, 255, 255, .78); font-size: var(--fs-lead); line-height: 1.55; text-wrap: pretty; }
.bl-cta__text strong { color: #fff; font-weight: 640; }
.bl-cta__btns { margin-top: .4rem; }
@media (max-width: 559px) { .bl-cta__btns, .bl-cta__btns .btn { width: 100%; } }

.bl-svc { display: grid; gap: 1rem; }
.bl-svc__card { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: .6rem; justify-items: start; padding: clamp(1.5rem, 1rem + 1.6vw, 2.35rem); border-radius: var(--r-xl); color: rgba(255, 255, 255, .78); background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03) 60%); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: inset 0 0 0 1px rgba(143, 182, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .16), 0 50px 90px -36px rgba(0, 20, 120, .95); transition: transform .6s var(--ease-out), box-shadow .3s var(--ease-out); }
.bl-svc__card:hover { box-shadow: inset 0 0 0 1.5px rgba(143, 182, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .2), 0 50px 90px -30px rgba(0, 40, 180, .95); }
.bl-svc__glow { position: absolute; z-index: -1; width: 26rem; height: 26rem; right: -11rem; top: -13rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 85, 255, .75), rgba(0, 85, 255, 0)); pointer-events: none; }
.bl-svc__top { display: flex; align-items: center; gap: .75rem; }
.bl-svc__ico { width: 3rem; height: 3rem; border-radius: 15px; display: grid; place-items: center; background: var(--electric); color: #fff; box-shadow: 0 12px 26px -12px rgba(0, 85, 255, .9); }
.bl-svc__k { font-size: var(--fs-xs); font-weight: 650; color: var(--sky); }
.bl-svc__name { margin-top: .4rem; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); line-height: 1.12; letter-spacing: -.01em; color: #fff; }
.bl-svc__price { font-size: var(--fs-small); line-height: 1.45; color: rgba(255, 255, 255, .74); font-variant-numeric: tabular-nums; }
.bl-svc__price .num { display: block; margin: .5rem 0 .25rem; font-family: var(--font-display); font-size: clamp(3rem, 2.2rem + 2.8vw, 4.6rem); font-weight: 600; letter-spacing: -.025em; line-height: .95; color: #fff; text-shadow: 0 0 40px rgba(0, 85, 255, .55); }
.bl-svc__price:not(:has(.num)) { font-family: var(--font-display); font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); font-weight: 600; line-height: 1.1; color: #fff; word-spacing: .06em; margin-top: .3rem; }
.bl-svc__go { display: inline-flex; align-items: center; gap: .45rem; margin-top: .6rem; padding: .6rem 1.1rem; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); font-weight: 640; font-size: var(--fs-small); color: #fff; transition: background-color .3s var(--ease-out); }
.bl-svc__go .i { width: 1rem; height: 1rem; transition: transform .3s var(--ease-out); }
.bl-svc__card:hover .bl-svc__go { background: var(--electric); }
.bl-svc__card:hover .bl-svc__go .i { transform: translateX(4px); }
.bl-svc__extra { font-size: var(--fs-small); color: rgba(255, 255, 255, .72); padding-inline: .25rem; }

/* Después del cierre: serie y relacionados (hoja clara con esquinas redondas sobre el pie) */
.bl-after { position: relative; z-index: 2; display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem); padding-block: clamp(3rem, 2rem + 3vw, 5rem) clamp(4rem, 3rem + 4vw, 6.5rem); margin-bottom: -2.5rem; border-radius: 2.5rem; }
@media (max-width: 759px) { .bl-after { border-radius: 1.5rem; margin-bottom: -1.5rem; } }

.bl-series { display: grid; gap: 1.25rem; }
.bl-series__head { display: none; }
@media (min-width: 900px) { .bl-series__head { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } }
.bl-series__k { font-size: var(--fs-small); font-weight: 640; color: var(--ink-2); }
.bl-stops { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; }
.bl-stops li { display: flex; align-items: center; }
.bl-stops li + li::before { content: ""; width: clamp(.5rem, 1.4vw, 1.5rem); height: 2px; background: var(--line-strong); }
.bl-stops li.is-past + li::before { background: var(--electric); }
.bl-stops a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--card); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: background-color .25s var(--ease-out), color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .35s var(--ease-out); }
.bl-stops a:hover { color: var(--electric); box-shadow: inset 0 0 0 1.5px var(--electric); transform: translateY(-2px); }
.bl-stops .is-past a { background: var(--electric-050); color: var(--electric); box-shadow: inset 0 0 0 1.5px rgba(0, 85, 255, .3); }
.bl-stops .is-now a { background: var(--electric); color: #fff; box-shadow: 0 8px 18px -8px rgba(0, 85, 255, .85); transform: scale(1.12); }

/* Siguiente (clímax del cierre, oscura con la ilustración de la próxima guía) + anterior (compacta) */
.bl-series__pn { display: grid; gap: .75rem; }
@media (min-width: 900px) { .bl-series__pn { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); gap: 1rem; } }
.bl-pn { display: grid; gap: .3rem; align-content: center; min-height: 7.5rem; padding: 1.25rem 1.4rem; border-radius: var(--r-card); background: var(--card); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .3s var(--ease-out), transform .4s var(--ease-out); }
.bl-pn:hover { box-shadow: 0 0 0 1.5px var(--electric), var(--shadow-2); transform: translateY(-2px); }
.bl-pn__dir { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-xs); font-weight: 680; color: var(--electric-600); }
.bl-pn__dir .i { width: 1rem; height: 1rem; transition: transform .3s var(--ease-out); }
.bl-pn--prev:hover .bl-pn__dir .i { transform: translateX(-4px); }
.bl-pn__n { font-size: var(--fs-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bl-pn__t { font-size: 1.2rem; line-height: 1.18; letter-spacing: -.008em; color: var(--ink); }
.bl-pn--idx { background: var(--paper-2); box-shadow: none; }

.bl-next { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 7.25rem); min-height: 12rem; border-radius: var(--r-xl); color: rgba(255, 255, 255, .76); background: radial-gradient(70% 90% at 0% 100%, rgba(0, 85, 255, .42), rgba(0, 85, 255, 0) 70%), linear-gradient(160deg, #0B1D3B, #040B20 72%); box-shadow: inset 0 0 0 1px rgba(143, 182, 255, .2), 0 40px 80px -40px rgba(0, 30, 150, .85); transition: box-shadow .35s var(--ease-out), transform .6s var(--ease-out); }
@media (min-width: 640px) { .bl-next { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); min-height: 17rem; } }
.bl-next:hover { box-shadow: inset 0 0 0 1.5px rgba(143, 182, 255, .65), 0 46px 90px -36px rgba(0, 40, 180, .95); }
.bl-next:focus-visible { outline: 2.5px solid var(--electric); outline-offset: 3px; }
.bl-next__glow { position: absolute; z-index: -1; width: 30rem; height: 30rem; left: -14rem; top: -16rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 85, 255, .55), rgba(0, 85, 255, 0)); pointer-events: none; }
.bl-next__copy { display: grid; gap: .5rem; align-content: center; justify-items: start; min-width: 0; padding: 1.15rem 0 1.25rem 1.15rem; }
@media (min-width: 640px) { .bl-next__copy { padding: clamp(1.5rem, 1rem + 1.6vw, 2.4rem); padding-right: 1rem; } }
.bl-next__k { display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .85rem; border-radius: 999px; background: var(--electric); color: #fff; font-size: var(--fs-xs); font-weight: 680; box-shadow: 0 10px 24px -10px rgba(0, 85, 255, .95); }
.bl-next__k .i { width: 1rem; height: 1rem; transition: transform .3s var(--ease-out); }
.bl-next:hover .bl-next__k .i { transform: translateX(4px); }
.bl-next__n { margin-top: .3rem; font-size: var(--fs-xs); font-weight: 620; color: var(--sky); font-variant-numeric: tabular-nums; }
.bl-next__t { font-family: var(--font-display); font-weight: 600; word-spacing: .07em; text-wrap: balance; font-size: clamp(1.2rem, .95rem + 1.25vw, 2.15rem); line-height: 1.06; letter-spacing: -.014em; color: #fff; max-width: 24ch; }
.bl-next__sum { display: none; font-size: var(--fs-small); line-height: 1.5; color: rgba(255, 255, 255, .72); max-width: 54ch; text-wrap: pretty; }
@media (min-width: 640px) { .bl-next__sum { display: block; } }
.bl-next__meta { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); font-weight: 560; color: rgba(255, 255, 255, .64); }
.bl-next__media { position: relative; overflow: hidden; }
.bl-next__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; transition: transform .9s var(--ease-out); }
.bl-next:hover .bl-next__img { transform: scale(1.07); }
/* La ilustración se funde con la tarjeta por su borde izquierdo (sin costura vertical) */
.bl-next__media:not(.bl-next__media--fan) { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 22%, #000 52%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 22%, #000 52%); }
.bl-next__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4, 11, 32, .45), rgba(4, 11, 32, 0) 40%); pointer-events: none; }
/* Fin de la serie: abanico de tres portadas */
.bl-next__media--fan { overflow: visible; }
.bl-next__media--fan::after { display: none; }
.bl-next__media--fan .bl-next__img { inset: auto; left: 46%; top: 50%; width: 50%; height: auto; aspect-ratio: 4 / 5; border-radius: 14px; box-shadow: 0 0 0 1px rgba(143, 182, 255, .3), 0 24px 40px -18px rgba(0, 0, 0, .85); transform: translate(-50%, -50%) translateX(calc(var(--j) * 46%)) translateY(calc(var(--j) * var(--j) * 6%)) rotate(calc(var(--j) * 10deg)); }
.bl-next__media--fan .bl-next__img:nth-child(2) { z-index: 2; }
.bl-next--end:hover .bl-next__media--fan .bl-next__img { transform: translate(-50%, -53%) translateX(calc(var(--j) * 58%)) rotate(calc(var(--j) * 14deg)); }

.bl-rel__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1.5rem; }
.bl-rel__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
@media (min-width: 760px) { .bl-rel__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bl-rel__item { position: relative; display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: .85rem 1.1rem .85rem .85rem; border-radius: var(--r-card); background: var(--card); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .3s var(--ease-out), transform .5s var(--ease-out); }
.bl-rel__item:hover, .bl-rel__item:focus-within { box-shadow: 0 0 0 1.5px var(--electric), var(--shadow-2); }
.bl-rel__media { display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--night); }
/* Escritorio y tableta: la ilustración arriba, grande (la tarjeta se inclina con el cursor) */
@media (min-width: 760px) {
  .bl-rel__item { grid-template-columns: minmax(0, 1fr); gap: 0; align-items: stretch; align-content: start; padding: 0; overflow: hidden; border-radius: var(--r-xl); }
  .bl-rel__media { aspect-ratio: 16 / 10; border-radius: 0; }
  .bl-rel__img { object-position: 50% 34%; }
  .bl-rel__txt { align-content: start; padding: 1.05rem 1.25rem 1.25rem; }
  .bl-rel__t { font-size: 1.16rem; }
}
.bl-rel__img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.bl-rel__item:hover .bl-rel__img { transform: scale(1.08); }
.bl-rel__txt { display: grid; gap: .4rem; align-content: center; min-width: 0; }
.bl-rel__cat { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); font-weight: 650; color: var(--electric-600); }
.bl-rel__t { font-size: 1.08rem; line-height: 1.18; letter-spacing: -.008em; color: var(--ink); }
.bl-rel__t::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.bl-rel__t:focus-visible { outline: none; }
.bl-rel__item:has(.bl-rel__t:focus-visible) { outline: 2.5px solid var(--electric); outline-offset: 3px; }
.bl-rel__meta { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); color: var(--ink-2); }

/* =====================================================================
   ÍNDICE · Inicio oscuro con abanico 3D
   ===================================================================== */
.bi-hero { position: relative; overflow: clip; padding-top: calc(var(--header-h) + clamp(1.5rem, 1rem + 3vw, 4rem)); padding-bottom: clamp(3rem, 2.25rem + 3.6vw, 6rem); }
.bi-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .bi-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 1rem + 3vw, 4.5rem); } }
.bi-hero__copy { container-type: inline-size; }
.bi-hero__top { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1.25rem; }
.bi-h1 { font-size: clamp(2.3rem, 8.3cqi, 5.25rem); line-height: .98; letter-spacing: -.022em; color: #fff; }
.bi-hero__lead { margin-top: 1.4rem; max-width: 56ch; }
.bi-hero__ctas { margin-top: 1.9rem; }
@media (max-width: 559px) { .bi-hero__ctas .btn { width: 100%; } }
.bi-hero__facts { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: .55rem 1.3rem; font-size: var(--fs-small); color: rgba(255, 255, 255, .72); }
.bi-hero__facts li { display: inline-flex; align-items: center; gap: .45rem; }
.bi-hero__facts .i { color: var(--sky); }

.bi-hero__visual { display: none; }
@media (min-width: 1024px) { .bi-hero__visual { display: grid; justify-items: center; gap: 1rem; } }
.bi-stack__label { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-xs); font-weight: 650; color: rgba(255, 255, 255, .7); }
.bi-stack__label .i { color: #F5B83D; }
.bi-deck { --rx: 0; --ry: 0; position: relative; width: min(100%, 36rem); height: clamp(24rem, 31vw, 29rem); perspective: 1500px; transform-style: preserve-3d; }
.bi-cover { --x: 0%; --y: 0%; --z: 0px; --ry0: 0deg; --rz: 0deg; position: absolute; left: 50%; top: 50%; width: clamp(13rem, 16.5vw, 16.5rem); aspect-ratio: 3 / 4.15; display: block; border-radius: 24px; overflow: hidden; isolation: isolate; color: #fff; background: var(--night); box-shadow: inset 0 0 0 1px rgba(143, 182, 255, .26), 0 40px 70px -28px rgba(0, 8, 50, .95); transform: translate(-50%, -50%) translate3d(var(--x), var(--y), var(--z)) rotateY(calc(var(--ry0) + var(--rx) * 9deg)) rotateX(calc(var(--ry) * -7deg)) rotateZ(var(--rz)); transition: transform .8s var(--ease-out), box-shadow .4s var(--ease-out); }
.bi-cover--a { --x: -74%; --y: 4%; --z: -90px; --ry0: 30deg; --rz: -2deg; }
.bi-cover--b { --x: 0%; --y: -4%; --z: 40px; }
.bi-cover--c { --x: 74%; --y: 6%; --z: -90px; --ry0: -30deg; --rz: 2deg; }
.bi-cover:hover, .bi-cover:focus-visible { --z: 140px; --ry0: 0deg; --rz: 0deg; box-shadow: inset 0 0 0 1.5px rgba(143, 182, 255, .7), 0 60px 90px -30px rgba(0, 30, 160, .95); }
/* Las de los lados muestran solo su ilustración; el texto aparece al traerlas al frente */
.bi-cover--a .bi-cover__body, .bi-cover--c .bi-cover__body { opacity: 0; transform: translateY(12px); transition: opacity .4s var(--ease-out), transform .5s var(--ease-out); }
.bi-cover--a:hover .bi-cover__body, .bi-cover--c:hover .bi-cover__body, .bi-cover--a:focus-visible .bi-cover__body, .bi-cover--c:focus-visible .bi-cover__body { opacity: 1; transform: none; }
.bi-cover--a::after, .bi-cover--c::after { opacity: .35; transition: opacity .4s var(--ease-out); }
.bi-cover--a:hover::after, .bi-cover--c:hover::after, .bi-cover--a:focus-visible::after, .bi-cover--c:focus-visible::after { opacity: 1; }
.bi-deck:has(.bi-cover--a:hover, .bi-cover--c:hover, .bi-cover--a:focus-visible, .bi-cover--c:focus-visible) .bi-cover--b { --z: -40px; }
.bi-cover:focus-visible { outline: 2.5px solid #fff; outline-offset: 4px; }
.bi-cover__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .9s var(--ease-out); }
.bi-cover:hover .bi-cover__img { transform: scale(1.06); }
.bi-cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 11, 32, 0) 24%, rgba(4, 11, 32, .78) 52%, rgba(4, 11, 32, .96) 76%); }
.bi-cover__body { position: absolute; inset: auto 0 0 0; display: grid; gap: .45rem; padding: 1.1rem 1.15rem 1.2rem; }
.bi-cover__top { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: var(--fs-xs); font-weight: 650; color: rgba(255, 255, 255, .86); }
.bi-cover__ico { width: 1.8rem; height: 1.8rem; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bi-cover__ico .i { width: .95rem; height: .95rem; }
.bi-cover__gift, .bi-card__gift { padding: .14rem .55rem; border-radius: 999px; background: var(--electric); color: #fff; font-size: .7rem; font-weight: 700; }
.bi-cover__t { font-size: 1.08rem; line-height: 1.14; letter-spacing: -.008em; }
.bi-cover__meta { font-size: var(--fs-xs); font-weight: 600; color: rgba(255, 255, 255, .66); font-variant-numeric: tabular-nums; }

/* Banda tipográfica */
.kinetic-band + .stack-panel { margin-top: 0; }

/* =====================================================================
   ÍNDICE · Galería horizontal de las 10 guías
   ===================================================================== */
.bi-guias__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem 2.5rem; align-items: center; }
.bi-guias .t-d2 { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.7rem); }
.bi-guias__lead { max-width: 34rem; }
@media (min-width: 1024px) {
  .bi-guias__head { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); row-gap: 1.25rem; }
  .bi-guias__head .t-d2 { grid-column: 1; grid-row: 1; }
  .bi-guias__lead { grid-column: 2; grid-row: 1; justify-self: end; }
  .bi-guias__head .bi-tramos { grid-column: 1; grid-row: 2; }
  .bi-guias__head .hg__progress { grid-column: 2; grid-row: 2; justify-self: end; }
}
.bi-tramos { list-style: none; padding: 0; margin: 0; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.bi-tramos::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .bi-tramos { margin-inline: 0; padding-inline: 0; overflow: visible; flex-wrap: wrap; } }
.bi-tramos li { flex: none; }
.bi-tramos a { display: inline-flex; align-items: center; gap: .45rem; min-height: 42px; padding: .3rem .85rem .3rem .35rem; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-1); font-size: .875rem; font-weight: 620; color: var(--ink-2); white-space: nowrap; transition: background-color .3s var(--ease-out), color .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.bi-tramos a:hover { color: var(--ink); box-shadow: 0 0 0 1.5px var(--electric); }
.bi-tramos__n { width: 1.85rem; height: 1.85rem; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--ink-2); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; transition: background-color .3s var(--ease-out), color .3s var(--ease-out); }
.bi-tramos a.is-past .bi-tramos__n { background: var(--electric-050); color: var(--electric); }
.bi-tramos a.is-on { background: var(--ink); color: #fff; box-shadow: 0 10px 24px -12px rgba(11, 29, 59, .8); }
.bi-tramos a.is-on .bi-tramos__n { background: var(--electric); color: #fff; }
.bi-guias .hg__progress { width: min(320px, 100%); }

.bi-guias .hg__track > * { width: min(80vw, 330px); }
@media (min-width: 1024px) { .bi-guias .hg__track > * { width: clamp(17.5rem, 21vw, 21rem); } }
.bi-guias .hg__track { align-items: stretch; }

/* Tarjeta de guía */
.bi-card { position: relative; isolation: isolate; display: flex; flex-direction: column; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-2), 0 0 0 1px var(--line); overflow: hidden; transition: box-shadow .4s var(--ease-out); }
.bi-card:hover { box-shadow: var(--shadow-3), 0 0 0 1.5px var(--electric); }
.bi-card__media { position: relative; margin: 0; height: clamp(11rem, 50vw, 13.5rem); background: var(--night); overflow: hidden; }
@media (min-width: 1024px) { .bi-card__media { height: clamp(9rem, 29vh, 17rem); } }
.bi-card__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(180deg, rgba(4, 11, 32, 0), rgba(4, 11, 32, .55)); pointer-events: none; }
.bi-card__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; transition: transform .9s var(--ease-out); }
.bi-card:hover .bi-card__img { transform: scale(1.07); }
.bi-card__body { display: flex; flex-direction: column; gap: .55rem; flex: 1; padding: 1.15rem 1.3rem 1.25rem; }
.bi-card__cat { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: var(--fs-xs); font-weight: 650; color: var(--electric-600); }
.bi-card__title { font-size: clamp(1.18rem, 1.08rem + .35vw, 1.36rem); line-height: 1.14; letter-spacing: -.01em; color: var(--ink); }
.bi-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.bi-card__title a:focus-visible { outline: none; }
.bi-card:has(.bi-card__title a:focus-visible) { outline: 2.5px solid var(--electric); outline-offset: 3px; }
.bi-card__sum { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.bi-card__meta { margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: var(--fs-xs); font-weight: 560; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bi-card__meta span { display: inline-flex; align-items: center; gap: .35rem; }
@media (min-width: 1024px) and (max-height: 760px) { .bi-card__sum { display: none; } .bi-guias .t-d2 { font-size: clamp(2rem, 1.2rem + 2.2vw, 3.1rem); } .bi-card__media { height: 25vh; } }

/* Destacadas: tarjeta oscura con filo de luz */
.bi-card--feature { color: rgba(255, 255, 255, .78); background: radial-gradient(90% 60% at 100% 100%, rgba(0, 85, 255, .45), rgba(0, 85, 255, 0) 70%), linear-gradient(175deg, #0B1D3B, #040B20 72%); box-shadow: 0 0 0 1.5px rgba(0, 85, 255, .55), 0 34px 70px -28px rgba(0, 50, 200, .65); }
.bi-card--feature:hover { box-shadow: 0 0 0 1.5px var(--sky), 0 40px 80px -26px rgba(0, 50, 200, .8); }
.bi-card--feature .bi-card__media::after { background: linear-gradient(180deg, rgba(4, 11, 32, 0), #071230); height: 55%; }
.bi-card--feature .bi-card__cat { color: var(--sky); }
.bi-card--feature .bi-card__title { color: #fff; }
.bi-card--feature .bi-card__sum { color: rgba(255, 255, 255, .74); }
.bi-card--feature .bi-card__meta { color: rgba(255, 255, 255, .66); border-top-color: rgba(255, 255, 255, .12); }

/* Portada de tramo (capítulo) */
.bi-guias .hg__track > .bi-chap { width: min(66vw, 250px); }
@media (min-width: 1024px) { .bi-guias .hg__track > .bi-chap { width: clamp(14rem, 16vw, 16.5rem); } }
.bi-chap { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .7rem; padding: 1.6rem 1.45rem; border-radius: var(--r-xl); color: rgba(255, 255, 255, .78); background: linear-gradient(175deg, #0B1D3B, #040B20 70%); box-shadow: inset 0 0 0 1px rgba(143, 182, 255, .16), var(--shadow-3); scroll-margin-top: calc(var(--header-h) + 1rem); }
.bi-chap::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(143, 182, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 182, 255, .08) 1px, transparent 1px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(90% 70% at 20% 10%, #000 10%, transparent 75%); mask-image: radial-gradient(90% 70% at 20% 10%, #000 10%, transparent 75%); }
.bi-chap__glow { position: absolute; z-index: -1; width: 22rem; height: 22rem; left: -9rem; top: -10rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 85, 255, .7), rgba(0, 85, 255, 0)); pointer-events: none; }
.bi-chap:nth-child(n + 4) .bi-chap__glow { left: auto; right: -10rem; }
/* Abanico 3D con las ilustraciones de las guías del tramo (se abre al pasar el cursor) */
.bi-chap__fan { position: relative; flex: 1 1 0; min-height: 0; margin: .4rem -.4rem .2rem; }
.bi-chap__img { position: absolute; left: 50%; top: 50%; width: auto; height: min(84%, 11rem); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 32%; border-radius: 16px; box-shadow: 0 0 0 1px rgba(143, 182, 255, .3), 0 26px 44px -18px rgba(0, 0, 0, .9); transform: translate(-50%, -50%) translateX(calc(var(--o) * 30%)) translateY(calc(var(--o) * var(--o) * 7%)) rotate(calc(var(--o) * 8deg)); transition: transform .8s var(--ease-out); }
.bi-chap:hover .bi-chap__img { transform: translate(-50%, -54%) translateX(calc(var(--o) * 40%)) translateY(calc(var(--o) * var(--o) * 6%)) rotate(calc(var(--o) * 12deg)); }
@media (min-width: 1024px) and (max-height: 760px) { .bi-guias.is-pinned .bi-chap__fan { display: none; } }
@media (prefers-reduced-motion: reduce) { .bi-chap__img { transition: none; } }
.bi-chap__k { align-self: flex-start; padding: .3rem .7rem; border-radius: 999px; background: rgba(143, 182, 255, .14); box-shadow: inset 0 0 0 1px rgba(143, 182, 255, .22); font-size: var(--fs-xs); font-weight: 650; color: var(--sky); }
.bi-chap__name { margin-top: auto; font-size: clamp(1.7rem, 1.3rem + 1vw, 2.2rem); line-height: 1.02; letter-spacing: -.016em; color: #fff; }
.bi-chap__txt { font-size: var(--fs-small); line-height: 1.45; }
.bi-chap__n { padding-top: .75rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: var(--fs-xs); font-weight: 600; color: rgba(255, 255, 255, .64); }

/* Cierre de la galería */
.bi-guias .hg__track > .bi-end { width: min(72vw, 280px); }
@media (min-width: 1024px) { .bi-guias .hg__track > .bi-end { width: clamp(15rem, 18vw, 18rem); } }
.bi-end { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.1rem; padding: 1.75rem 1.6rem; border-radius: var(--r-xl); color: #fff; background: radial-gradient(90% 70% at 100% 0%, rgba(143, 182, 255, .45), rgba(143, 182, 255, 0) 60%), linear-gradient(160deg, #1E63FF, #0046D6); box-shadow: 0 30px 60px -26px rgba(0, 70, 214, .8); }
.bi-end__t { font-size: clamp(1.5rem, 1.2rem + .8vw, 1.95rem); line-height: 1.06; letter-spacing: -.015em; }
.bi-end .link { color: #fff; }
.bi-end :focus-visible { outline-color: #fff; }

/* =====================================================================
   ÍNDICE · Lo hacemos por ti (cierre oscuro, precios grandes)
   ===================================================================== */
/* Oscura sobre el pie (también oscuro): termina como panel redondeado con filo de luz, sin corte plano */
.bi-porti { overflow: clip; z-index: 2; margin-bottom: -2.5rem; padding-bottom: calc(var(--space-section, 6rem) + 2.5rem); border-radius: 2.5rem; box-shadow: 0 -30px 60px -40px rgba(4, 11, 32, .45), inset 0 -1px 0 rgba(143, 182, 255, .2), 0 60px 90px -50px rgba(0, 0, 0, .9); }
@media (max-width: 759px) { .bi-porti { margin-bottom: -1.5rem; padding-bottom: calc(var(--space-section, 4rem) + 1.5rem); border-radius: 1.5rem; } }
.bi-porti__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 1024px) { .bi-porti__grid { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: center; gap: clamp(3rem, 1rem + 4vw, 6rem); } }
.bi-porti__copy { display: grid; gap: 1.2rem; justify-items: start; }
.bi-porti .t-d2 { max-width: 14ch; }
@media (max-width: 559px) { .bi-porti__copy .cluster, .bi-porti__copy .btn { width: 100%; } }
.bi-svc { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.bi-svc li { position: relative; display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; gap: .35rem 1rem; align-items: center; padding: 1.05rem 1.15rem; border-radius: 22px; background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .45s var(--ease-out); }
.bi-svc li:hover, .bi-svc li:focus-within { background-color: rgba(143, 182, 255, .07); box-shadow: inset 0 0 0 1.5px rgba(143, 182, 255, .6), 0 24px 50px -28px rgba(0, 40, 180, .8); }
.bi-svc__ico { grid-row: 1 / span 2; align-self: start; width: 2.9rem; height: 2.9rem; border-radius: 14px; display: grid; place-items: center; background: rgba(143, 182, 255, .14); color: var(--sky); box-shadow: inset 0 0 0 1px rgba(143, 182, 255, .2); transition: background-color .3s, color .3s; }
.bi-svc li:hover .bi-svc__ico { background: var(--electric); color: #fff; }
.bi-svc__txt { grid-column: 2; display: grid; gap: .2rem; min-width: 0; }
.bi-svc__name { font-weight: 650; line-height: 1.25; color: #fff; }
.bi-svc__name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.bi-svc__name:focus-visible { outline: none; }
.bi-svc li:has(.bi-svc__name:focus-visible) { outline: 2.5px solid #fff; outline-offset: 3px; }
.bi-svc__from { font-size: var(--fs-xs); font-weight: 600; color: var(--sky); }
.bi-svc__price { grid-column: 2; font-size: var(--fs-xs); line-height: 1.4; color: rgba(255, 255, 255, .72); font-variant-numeric: tabular-nums; }
.bi-svc__price .num { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; color: #fff; margin-inline: .1em; }
.bi-svc__chev { grid-column: 3; grid-row: 1 / span 2; width: 1rem; height: 1rem; color: rgba(255, 255, 255, .55); transition: transform .3s var(--ease-out), color .3s; }
.bi-svc li:hover .bi-svc__chev { transform: translateX(3px); color: #fff; }
@media (min-width: 640px) {
  .bi-svc li { grid-template-columns: 2.9rem minmax(0, 1fr) minmax(0, 12.5rem) auto; }
  .bi-svc__ico { grid-row: auto; align-self: center; }
  .bi-svc__price { grid-column: 3; text-align: right; }
  .bi-svc__price .num { display: block; margin: .15rem 0; font-size: 1.85rem; }
  .bi-svc__chev { grid-column: 4; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .bi-cover, .bl-visual__frame, .bi-card__img, .bi-cover__img, .bl-rel__img, .bl-next, .bl-next__img { transition: none; }
  .bl-word > span { animation: none; }
}

/* Celular: los cinco servicios se deslizan de lado (la sección queda mucho más corta) */
@media (max-width: 639px) {
  .bi-svc { display: flex; gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: .25rem var(--gutter) .75rem; scroll-padding-inline: var(--gutter); }
  .bi-svc::-webkit-scrollbar { display: none; }
  .bi-porti .bi-svc li { flex: none; width: min(78vw, 300px); scroll-snap-align: start; grid-template-columns: 2.9rem minmax(0, 1fr); grid-template-rows: auto 1fr auto; align-content: start; gap: .8rem .9rem; padding: 1.15rem 1.15rem 1.25rem; }
  .bi-porti .bi-svc__ico { grid-row: 1; grid-column: 1; align-self: center; }
  .bi-porti .bi-svc__txt { grid-row: 1 / span 2; grid-column: 2; align-self: start; }
  .bi-porti .bi-svc__price { grid-row: 3; grid-column: 1 / -1; padding-top: .8rem; border-top: 1px solid rgba(255, 255, 255, .1); }
  .bi-porti .bi-svc__price .num { display: block; margin: .1rem 0 .15rem; font-size: 2rem; }
  .bi-porti .bi-svc__chev { display: none; }
}
@media (max-width: 639px) { .bi-porti ul.bi-svc { padding: .25rem var(--gutter) .75rem; } }

/* Celular: la primera tarjeta arranca alineada con el margen, no pegada al borde */
.bi-guias .hg__viewport { scroll-padding-inline: var(--gutter); }
.bi-guias .hg__track > :first-child { scroll-snap-align: start; }

/* Celular: el cierre de la guía es más corto (anterior/siguiente en dos columnas, relacionados deslizables) */
@media (max-width: 759px) {
  .bl-cta-sec { padding-block: 3.25rem calc(3.25rem + 1.5rem); }
  .bl-after { padding-block: 2.25rem 3.25rem; gap: 2.25rem; }
  .bl-series__pn { gap: .6rem; }
  .bl-pn { min-height: 0; padding: .95rem 1.05rem 1rem; }
  .bl-pn__n { display: none; }
  .bl-pn__t { font-size: 1rem; line-height: 1.2; }
  .bl-rel__list { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: .25rem var(--gutter) .75rem; scroll-padding-inline: var(--gutter); }
  .bl-rel__list::-webkit-scrollbar { display: none; }
  .bl-rel__item { flex: none; width: min(80vw, 320px); scroll-snap-align: start; }
  .bl-rel__item:hover, .bl-rel__item:focus-within { transform: none; }
}
.bl-after > * { min-width: 0; }

/* El reinicio ol[class]/ul[class] { padding: 0 } de base.css pesa más que una sola clase:
   aquí se sube la especificidad para que las filas deslizables respeten el margen lateral. */
.bi-guias .hg__track { padding: .5rem max(var(--gutter), calc((100vw - var(--wrap)) / 2)) 1.25rem; }
@media (max-width: 1023px) { .bi-guias .bi-tramos { padding-inline: var(--gutter); } }
@media (max-width: 759px) { .bl-rel .bl-rel__list { padding: .25rem var(--gutter) .75rem; } }

/* Galería fijada (escritorio): la altura de las tarjetas sale del alto de la ventana y la ilustración
   absorbe la diferencia, así nada se corta de 1366x700 a 1920x1080. */
@media (min-width: 1024px) {
  .bi-guias.is-pinned .hg__track > * { height: clamp(20rem, calc(100svh - var(--header-h) - 18.5rem), 38rem); }
  .bi-guias.is-pinned .bi-card__media { flex: 1 1 0; height: auto; min-height: 6rem; }
}
@media (min-width: 1024px) and (max-height: 820px) { .bi-guias.is-pinned .bi-card__sum { display: none; } }