/* ============================================================
   PÁGINAS DE LIBROS · Serie Revolve
   Cada libro trae su propio mundo visual, tomado de su portada:
   · Isometrics  → mármol y azul petróleo (claro)
   · Revolve     → acuarela: crema, teal y naranja quemado (claro)
   · Guerreros   → luz de velas: negro, ocre y rojo ladrillo (oscuro)
   ============================================================ */

body.bkpage { --bk-max: 1240px; background: var(--bk-bg); color: var(--bk-ink); }
body.book-iso {
  --bk-bg: #eff0eb; --bk-surface: #e3e7e6; --bk-ink: #10232e; --bk-muted: #4d5f69;
  --bk-accent: #015077; --bk-accent-2: #5f8499; --bk-line: rgba(1, 80, 119, .18);
  --bk-display: "Poppins", "Helvetica Neue", sans-serif; --bk-serif: "Crimson Pro", Georgia, serif;
  color-scheme: light;
}
body.book-rev {
  --bk-bg: #f7eed3; --bk-surface: #f1e2b8; --bk-ink: #2b1d17; --bk-muted: #6a4d3f;
  --bk-accent: #1d5a55; --bk-accent-2: #c9501b; --bk-line: rgba(126, 63, 44, .22);
  --bk-display: "Poppins", "Helvetica Neue", sans-serif; --bk-serif: "Lora", Georgia, serif;
  color-scheme: light;
}
body.book-gue {
  --bk-bg: #0a0708; --bk-surface: #1b1113; --bk-ink: #f4ead9; --bk-muted: #c2ab97;
  --bk-accent: #d9a276; --bk-accent-2: #cd3a30; --bk-line: rgba(217, 162, 118, .22);
  --bk-display: "Lato", "Helvetica Neue", sans-serif; --bk-serif: "Cormorant Garamond", Georgia, serif;
  color-scheme: dark;
}
/* Header y footer conservan los colores del sitio en cualquier tema */
body.bkpage .site-header, body.bkpage .site-footer { color: var(--bone); }
/* En las páginas claras el header va siempre sólido para no perder contraste */
body.book-iso .site-header, body.book-rev .site-header { background: rgba(11, 10, 9, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
/* Con el menú móvil abierto, sin desenfoque: si no, el menú fijo queda encerrado en el header */
body.bkpage.menu-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--iron); }

.bk-wrap { width: min(100% - 2 * var(--gutter), var(--bk-max)); margin-inline: auto; }
.bk-section { padding: clamp(72px, 10vw, 150px) 0; position: relative; }
.bk-section--surface { background: var(--bk-surface); }
.bk-kicker { display: inline-flex; align-items: center; gap: .8em; font-family: var(--f-body); font-size: .78rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--bk-accent); margin: 0 0 1.2rem; }
.bk-kicker::before { content: ""; width: 34px; height: 2px; background: currentColor; }
.bk-h1 { font-family: var(--bk-display); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; line-height: .92; margin: 0; font-size: clamp(3rem, 9vw, 8.5rem); color: var(--bk-accent); }
.bk-h2 { font-family: var(--bk-display); font-weight: 800; line-height: 1; margin: 0 0 1.2rem; font-size: clamp(2.2rem, 5vw, 4.2rem); letter-spacing: -.01em; text-wrap: balance; }
.bk-h3 { font-family: var(--bk-display); font-weight: 700; line-height: 1.1; margin: 0 0 .6rem; font-size: clamp(1.25rem, 2vw, 1.6rem); }
.bk-serif { font-family: var(--bk-serif); }
.bk-lead { font-family: var(--bk-serif); font-size: clamp(1.25rem, 1.6vw + .7rem, 1.75rem); line-height: 1.45; max-width: 44ch; margin: 0 0 1.2em; }
.bk-body { max-width: 64ch; color: var(--bk-ink); }
.bk-body p { margin: 0 0 1.1em; }
.bk-muted { color: var(--bk-muted); }
.bk-accent { color: var(--bk-accent); }
.bk-accent-2 { color: var(--bk-accent-2); }

/* Botones con el color de cada libro */
.bk-btn { display: inline-flex; align-items: center; justify-content: center; gap: .7em; min-height: 54px; padding: 0 1.6em; font-family: var(--f-body); font-weight: 700; font-size: .92rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-radius: 999px; border: 2px solid var(--bk-accent); background: var(--bk-accent); color: #fff; transition: transform .3s var(--ease), background .3s, color .3s; }
.bk-btn:hover { transform: translateY(-2px); }
.bk-btn svg { width: 18px; height: 18px; }
.bk-btn--ghost { background: transparent; color: var(--bk-accent); }
.bk-btn--ghost:hover { background: var(--bk-accent); color: #fff; }
body.book-rev .bk-btn { background: var(--bk-accent-2); border-color: var(--bk-accent-2); }
body.book-rev .bk-btn--ghost { background: transparent; color: var(--bk-accent); border-color: var(--bk-accent); }
body.book-rev .bk-btn--ghost:hover { background: var(--bk-accent); color: #fff; }
body.book-gue .bk-btn { background: var(--bk-accent-2); border-color: var(--bk-accent-2); border-radius: 0; }
body.book-gue .bk-btn--ghost { background: transparent; color: var(--bk-ink); border-color: rgba(244, 234, 217, .5); }
body.book-gue .bk-btn--ghost:hover { background: var(--bk-ink); color: #0a0708; }
.bk-btns { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Héroe con video ---------- */
.bk-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: calc(var(--header-h) + 40px) 0 60px; }
.bk-hero__media { position: absolute; inset: 0; z-index: 0; }
.bk-hero__media video, .bk-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.bk-hero__veil { position: absolute; inset: 0; z-index: 1; }
.bk-hero .bk-wrap { position: relative; z-index: 2; }
.bk-hero__copy { max-width: 620px; }
.bk-hero__sub { font-family: var(--bk-serif); font-style: italic; font-size: clamp(1.3rem, 1.8vw + .6rem, 2rem); line-height: 1.25; margin: 1rem 0 .6rem; }
.bk-hero__tag { font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; margin: 0 0 2rem; color: var(--bk-muted); }

/* ---------- Libro 3D ---------- */
.bk-cover { perspective: 1400px; }
.bk-cover img { width: 100%; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .08); transform: rotateY(-14deg) rotateX(3deg); transform-origin: left center; transition: transform .9s var(--ease); border-radius: 2px 6px 6px 2px; }
.bk-cover:hover img { transform: rotateY(-4deg) translateY(-6px); }

/* ---------- Semblanza ---------- */
.bk-about { display: grid; grid-template-columns: minmax(220px, 4fr) 7fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 860px) { .bk-about { grid-template-columns: 1fr; } .bk-about .bk-cover { max-width: 300px; margin-inline: auto; } }
.bk-facts { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--bk-line); border: 1px solid var(--bk-line); }
.bk-facts li { background: var(--bk-bg); padding: 16px 18px; display: grid; gap: 4px; }
.bk-section--surface .bk-facts li { background: var(--bk-surface); }
.bk-facts strong { font-family: var(--bk-display); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; color: var(--bk-accent); }
.bk-facts span { font-size: .85rem; color: var(--bk-muted); line-height: 1.35; }

/* ---------- Ideas clave ---------- */
.bk-ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(16px, 2vw, 24px); }
.bk-idea { background: var(--bk-surface); padding: clamp(22px, 2.6vw, 32px); border-top: 3px solid var(--bk-accent); display: grid; gap: .6rem; align-content: start; }
.bk-section--surface .bk-idea { background: var(--bk-bg); }
.bk-idea__n { font-family: var(--bk-display); font-weight: 800; font-size: .9rem; color: var(--bk-accent-2); letter-spacing: .1em; }
.bk-idea p { margin: 0; color: var(--bk-ink); }
.bk-idea img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: .4rem; }

/* ---------- Citas ---------- */
.bk-quotes { display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 760px); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 28px; scrollbar-width: thin; }
.bk-quote { scroll-snap-align: center; margin: 0; padding: clamp(28px, 4vw, 56px); background: var(--bk-surface); border-left: 4px solid var(--bk-accent-2); }
.bk-quote p { font-family: var(--bk-serif); font-style: italic; font-size: clamp(1.4rem, 2.4vw + .5rem, 2.4rem); line-height: 1.25; margin: 0 0 1rem; }
.bk-quote cite { font-style: normal; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--bk-muted); }
.bk-quotes-nav { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 1rem; }
.bk-quotes-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--bk-accent); background: transparent; color: var(--bk-accent); font-size: 1.2rem; cursor: pointer; }
.bk-quotes-nav button:hover { background: var(--bk-accent); color: #fff; }

/* ---------- Para quién ---------- */
.bk-who { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
@media (max-width: 760px) { .bk-who { grid-template-columns: 1fr; } }
.bk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bk-list li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; line-height: 1.5; }
.bk-list li::before { content: "✓"; font-weight: 800; color: var(--bk-accent); font-size: 1.1rem; line-height: 1.4; }
.bk-list--no li::before { content: "✕"; color: var(--bk-accent-2); }
.bk-note { margin-top: 2rem; padding: 18px 20px; border: 1.5px dashed var(--bk-line); font-size: .95rem; color: var(--bk-muted); }

/* ---------- Cierre ---------- */
.bk-cta { text-align: center; }
.bk-cta .bk-h2 { margin-inline: auto; max-width: 18ch; }
.bk-cta .bk-btns { justify-content: center; margin-top: 2rem; }
.bk-series { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; margin-top: 3rem; }
.bk-series a { display: grid; grid-template-columns: 80px 1fr; gap: 16px; align-items: center; text-decoration: none; padding: 14px; background: var(--bk-surface); border: 1px solid var(--bk-line); text-align: left; transition: transform .3s var(--ease); }
.bk-series a:hover { transform: translateY(-3px); }
.bk-series img { width: 80px; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .5); }
.bk-series strong { display: block; font-family: var(--bk-display); font-size: 1.05rem; line-height: 1.2; }
.bk-series span { font-size: .85rem; color: var(--bk-muted); }
.bk-edition { margin-top: 1.4rem; font-size: .85rem; color: var(--bk-muted); max-width: 60ch; margin-inline: auto; }

/* ============================================================
   ISOMETRICS
   ============================================================ */
.iso-hero .bk-hero__veil { background: linear-gradient(90deg, rgba(239, 240, 235, .98) 0%, rgba(239, 240, 235, .9) 38%, rgba(239, 240, 235, .35) 52%, rgba(239, 240, 235, 0) 64%); }
.iso-hero .bk-h1 { letter-spacing: .08em; font-size: clamp(2.8rem, 6vw, 5.8rem); }
@media (max-width: 860px) {
  .iso-hero { align-items: flex-end; }
  .iso-hero .bk-hero__media video, .iso-hero .bk-hero__media img { object-position: 62% 50%; }
  .iso-hero .bk-hero__veil { background: linear-gradient(180deg, rgba(239, 240, 235, 0) 18%, rgba(239, 240, 235, .92) 52%, #eff0eb 72%); }
}

/* Tres generaciones: escena fija que se revela con el scroll */
.gen { height: 320vh; position: relative; background: #0e3348; }
.gen__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-rows: 1fr auto; }
.gen__cols { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.gen__col { position: relative; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; container-type: size; }
.gen__col:nth-child(1) { background: linear-gradient(168deg, #f0f6fa, #b4cddf); }
.gen__col:nth-child(2) { background: linear-gradient(168deg, #a6c5da, #4f87aa); }
.gen__col:nth-child(3) { background: linear-gradient(168deg, #3c7a9d, #01486d); }
.gen__col img { --s: min(1cqh, 3.2cqw); position: relative; z-index: 1; height: calc(var(--h) * var(--s)); margin-bottom: calc(var(--b) * var(--s)); width: auto; max-width: none; object-fit: contain; object-position: bottom; opacity: 0; transform: translateY(12%); transition: opacity 1s var(--ease), transform 1.2s var(--ease); filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .25)); }
.gen__col.is-on img { opacity: 1; transform: none; }
/* Estaturas reales en una sola escala (1 unidad ≈ 2.25 cm): Roberto 1.70 m, Jaime 1.75 m, Isaac 1.68 m.
   Las tres figuras se alinean en los tobillos (la foto de 1957 termina ahí); los pies quedan bajo el borde. */
.gen__col:nth-child(1) img { --h: 72.9; --b: 0; }
.gen__col:nth-child(2) img { --h: 78.4; --b: -3.9; }
.gen__col:nth-child(3) img { --h: 75.5; --b: -3.9; }
.gen__year { z-index: 2; position: absolute; top: calc(var(--header-h) + 18px); left: 50%; transform: translateX(-50%); font-family: "Poppins", sans-serif; font-weight: 800; font-size: clamp(2.2rem, 6vw, 5.5rem); letter-spacing: .04em; color: rgba(255, 255, 255, .0); -webkit-text-stroke: 1.5px rgba(255, 255, 255, .85); transition: color .8s; }
.gen__col:nth-child(1) .gen__year { -webkit-text-stroke-color: rgba(1, 72, 109, .7); }
.gen__col.is-on .gen__year { color: rgba(255, 255, 255, .9); }
.gen__col:nth-child(1).is-on .gen__year { color: #015077; }
.gen__bar { background: #11445f; color: #eff0eb; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding: 14px 0; }
.gen__bar span { font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; opacity: .35; transition: opacity .6s; }
.gen__bar span.is-on { opacity: 1; }
.gen__title { position: absolute; left: 0; right: 0; bottom: 70px; text-align: center; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .8s; }
.gen__title.is-on { opacity: 1; }
.gen__title p { display: inline-block; font-family: "Crimson Pro", serif; font-style: italic; font-size: clamp(1.4rem, 3vw, 2.6rem); color: #fff; background: rgba(1, 72, 109, .82); padding: .3em .8em; margin: 0; }
@media (max-width: 640px) { .gen__bar { padding: 10px 6px; gap: 6px; } .gen__bar span { font-size: .75rem; letter-spacing: .04em; line-height: 1.25; } }
@media (prefers-reduced-motion: reduce) { .gen { height: auto; } .gen__stage { position: relative; height: 90vh; } .gen__col img, .gen__title { opacity: 1; transform: none; } .gen__col .gen__year { color: rgba(255, 255, 255, .9); } }

/* Escalera Fibonacci: temporizador interactivo */
.fib { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 860px) { .fib { grid-template-columns: 1fr; } }
.fib__dial { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin-inline: auto; border-radius: 50%; background: conic-gradient(var(--bk-accent) calc(var(--p, 0) * 1turn), rgba(1, 80, 119, .12) 0); display: grid; place-items: center; }
.fib__dial::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--bk-bg); }
.fib__read { position: relative; z-index: 1; text-align: center; }
.fib__sec { display: block; font-family: "Poppins", sans-serif; font-weight: 800; font-size: clamp(4rem, 10vw, 7rem); line-height: 1; color: var(--bk-accent); font-variant-numeric: tabular-nums; }
.fib__phase { display: block; margin-top: .4rem; font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--bk-muted); }
.fib__steps { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.6rem 0; }
.fib__steps button { min-width: 72px; min-height: 52px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--bk-accent); background: transparent; color: var(--bk-accent); font: 700 1.05rem "Poppins", sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.fib__steps button[aria-pressed="true"], .fib__steps button:hover { background: var(--bk-accent); color: #fff; }

.iso-plates { display: flex; justify-content: center; margin-top: 2rem; }
.iso-plates img { width: min(100%, 280px); height: auto; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .5); transition: transform .4s var(--ease); }
.iso-plates img:hover { transform: rotate(-1.5deg) scale(1.03); }

.iso-gold { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .iso-gold { grid-template-columns: 1fr; } }
.iso-gold figure { margin: 0; }
.iso-gold figure img { width: 100%; filter: sepia(.25) contrast(1.05); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.iso-gold figcaption { font-size: .78rem; color: var(--bk-muted); margin-top: .6rem; }
.iso-timeline { list-style: none; margin: 1.6rem 0 0; padding: 0; border-left: 2px solid var(--bk-line); display: grid; gap: 18px; }
.iso-timeline li { padding-left: 22px; position: relative; }
.iso-timeline li::before { content: ""; position: absolute; left: -7px; top: .5em; width: 12px; height: 12px; border-radius: 50%; background: var(--bk-accent); }
.iso-timeline b { font-family: "Poppins", sans-serif; color: var(--bk-accent); margin-right: .5em; }
.iso-engravings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 2rem; }
.iso-engravings img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.iso-mentor { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .iso-mentor { grid-template-columns: 1fr; } }
.iso-mentor img { width: 100%; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); }

/* ============================================================
   REVOLVE
   ============================================================ */
.rev-hero .bk-hero__veil { background: linear-gradient(90deg, rgba(247, 238, 211, .96) 0%, rgba(247, 238, 211, .82) 38%, rgba(247, 238, 211, .08) 70%); }
.rev-hero .bk-h1 { color: #1d5a55; letter-spacing: .04em; }
.rev-hero .bk-hero__sub { color: #c9501b; font-style: normal; font-family: "Poppins", sans-serif; font-weight: 600; }
@media (max-width: 860px) {
  .rev-hero { align-items: flex-end; }
  .rev-hero .bk-hero__veil { background: linear-gradient(180deg, rgba(247, 238, 211, 0) 22%, rgba(247, 238, 211, .92) 55%, #f7eed3 74%); }
}
.rev-promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 32px); }
@media (max-width: 860px) { .rev-promise { grid-template-columns: 1fr; } }
.rev-promise article { position: relative; overflow: hidden; background: #fff8e6; }
.rev-promise img, .rev-promise video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.rev-promise .rev-promise__txt { padding: 22px 24px 26px; }
.rev-promise .rev-word { font-family: "Poppins", sans-serif; font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; color: #c9501b; margin: 0 0 .5rem; }

.rev-clock { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .rev-clock { grid-template-columns: 1fr; } }
.rev-clock video { width: 100%; border-radius: 50% 50% 8px 8px / 30% 30% 8px 8px; }
.rev-protocols { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rev-protocols li { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; padding: 14px 18px; background: #fff8e6; border-left: 4px solid #1d5a55; }
.rev-protocols li.is-warn { border-left-color: #c9501b; }
.rev-protocols b { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 1.5rem; color: #1d5a55; }
.rev-protocols li.is-warn b { color: #c9501b; }
.rev-protocols span { line-height: 1.45; }

.rev-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .rev-levels { grid-template-columns: 1fr; } }
.rev-level { padding: 26px; background: #fff8e6; border-radius: 16px; }
.rev-level b { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font: 800 1.4rem "Poppins", sans-serif; color: #fff; margin-bottom: .8rem; }
.rev-level:nth-child(1) b { background: #1d5a55; } .rev-level:nth-child(2) b { background: #3e7f78; } .rev-level:nth-child(3) b { background: #c9501b; }

.rev-sleep { position: relative; min-height: 70vh; display: flex; align-items: center; overflow: hidden; color: #fff8e6; }
.rev-sleep video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rev-sleep::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(29, 58, 55, .88), rgba(29, 58, 55, .2)); }
.rev-sleep .bk-wrap { position: relative; z-index: 1; }
.rev-sleep .bk-kicker { color: #f7eabe; }
.rev-disclaimer { margin-top: 2rem; padding: 22px 24px; background: #fff8e6; border: 2px solid #c9501b; border-radius: 12px; }
.rev-disclaimer strong { color: #c9501b; }

/* ============================================================
   GUERREROS
   ============================================================ */
.gue-hero .chapter { text-shadow: 0 2px 30px rgba(0, 0, 0, .8); }
.gue-hero .scrub__shade { background: linear-gradient(180deg, rgba(10, 7, 8, .6) 0%, rgba(10, 7, 8, .05) 25%, rgba(10, 7, 8, .1) 50%, rgba(10, 7, 8, .92) 100%), linear-gradient(90deg, rgba(10, 7, 8, .7), rgba(10, 7, 8, 0) 60%); }
.gue-hero .bk-h1 { color: #faf8f2; font-weight: 900; letter-spacing: .01em; }
.gue-hero .bk-h1 span { color: var(--bk-accent); }
.gue-hero .bk-hero__sub { color: var(--bk-ink); }
.gue-hero .scrub__bar i { background: var(--bk-accent-2); }
.gue-big { font-family: var(--bk-display); font-weight: 900; text-transform: uppercase; line-height: .95; font-size: clamp(2.4rem, 6vw, 5.4rem); margin: 0; max-width: 16ch; }
.gue-big em { font-style: normal; color: var(--bk-accent); }

/* Despensa de la historia: recorrido horizontal fijado al scroll */
.hs { position: relative; }
.hs__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.hs__head { width: min(100% - 2 * var(--gutter), var(--bk-max)); margin: calc(var(--header-h) + 8px) auto 16px; display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.hs__head .bk-h2 { margin: 0; }
.hs__count { font-family: var(--bk-display); font-weight: 900; font-size: 1.1rem; color: var(--bk-accent); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.hs__track { display: flex; gap: clamp(16px, 2vw, 28px); padding: 0 var(--gutter); will-change: transform; }
.civ { flex: 0 0 clamp(300px, 34vw, 480px); background: var(--bk-surface); border: 1px solid var(--bk-line); display: grid; grid-template-rows: auto 1fr; }
.civ__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.civ__media img, .civ__media video { width: 100%; height: 100%; object-fit: cover; }
.civ__era { position: absolute; left: 12px; top: 12px; background: rgba(10, 7, 8, .85); color: var(--bk-accent); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; padding: 6px 10px; }
.civ__plate { position: absolute; right: 12px; bottom: -34px; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; border: 3px solid var(--bk-accent); background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .6); }
.civ__plate img { width: 100%; height: 100%; object-fit: cover; }
.civ__body { padding: 22px 22px 24px; display: grid; gap: .7rem; align-content: start; }
.civ__body h3 { font-family: var(--bk-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.5rem, 2.2vw, 2rem); margin: 0; padding-right: 100px; line-height: 1; }
.civ__row { font-size: .95rem; line-height: 1.5; color: var(--bk-ink); margin: 0; }
.civ__row b { display: block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bk-accent); margin-bottom: 2px; }
.civ__src { font-size: .8rem; color: var(--bk-muted); margin: 0; font-style: italic; }
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .hs { height: auto !important; }
  .hs__stage { position: relative; height: auto; padding: 72px 0; }
  .hs__track { overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important; padding-bottom: 20px; }
  .civ { flex-basis: min(84vw, 380px); scroll-snap-align: center; }
}

.gue-lessons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--bk-line); border: 1px solid var(--bk-line); }
@media (max-width: 960px) { .gue-lessons { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gue-lessons { grid-template-columns: 1fr; } }
.gue-lessons article { background: var(--bk-bg); padding: 28px 24px; }
.gue-lessons b { font-family: var(--bk-display); font-weight: 900; font-size: 2.6rem; color: var(--bk-accent-2); line-height: 1; }
.gue-honest { margin-top: 2.4rem; padding: 22px 24px; border: 1px solid var(--bk-line); background: var(--bk-surface); max-width: 70ch; }