/* Landing Tales of the Valiant — /tov. Clonada de nosolorol_adom (ver nosolorol_vampiro/LANDING.md).
   Paleta muestreada del LOGO oficial de ToV y del arte de Kobold. Todo bajo .nsr-tov.

   NOTA sobre el acento: Vampiro y ADOM tienen UN solo color vivo. ToV tiene dos, a propósito:
   el AZUL es la marca (estructura, kickers, enlaces) y el ORO es el comercio (precios, CTA,
   carrito). No los mezcles: si un botón vende, va en oro. */

.nsr-tov{
  --void:#0d141c; --night:#111926; --panel:#141d28; --panel-2:#1e2a38;
  --hair:#2c3d4f; --hair-2:#22303f;
  --blue:#0f5d99; --blue-hi:#2f8fd6; --blue-deep:#0c4e86; --blue-glow:#63b6f0;
  /* ACENTO COMERCIAL: la plata del logo (muestreada: #ccccd8 / #c0c0cc), con filo azul.
     Antes era oro; el oro no está en la identidad del juego. */
  --plata:#ccccd8; --plata-hi:#eaeaf2; --plata-lo:#a8a8ba; --plata-ink:#0c2438;
  --amber:#e0a83c;   /* SEMÁNTICO: solo aviso de stock bajo. NUNCA acento ni precio. */
  --ink:#d8dade; --ink-dim:#98a2ad; --muted:#5a7083;
  --parch:#f2e9d8; --parch-2:#e6d9c0; --parch-3:#d9c9a8;    /* banda clara del catálogo */
  --parch-ink:#241c14; --parch-dim:#5d5140;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --nsr-bar:52px;
  color:var(--ink); font-family:var(--sans); line-height:1.62;
}
.nsr-tov *{box-sizing:border-box}
/* Oculto a la vista, NO para buscadores ni lectores de pantalla. Nada de display:none ni
   visibility:hidden: eso lo borraría también para ellos, que es lo contrario de lo que se busca. */
.nsr-tov-oculto{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}
/* height:auto es OBLIGATORIO junto a los atributos width/height del <img>: sin él, el
   atributo height se aplica literal y la imagen sale deformada (nos pasó con el logo). */
.nsr-tov img{max-width:100%; display:block; height:auto}
.nsr-tov a{color:inherit; text-decoration:none}
.nsr-tov strong{color:#fff; font-weight:700}
.nsr-tov-wrap{max-width:1160px; margin:0 auto; padding:0 24px}

/* ---------- integración con el tema (solo en /tov) ----------
   Copiado de nosolorol_adom (ver nosolorol_vampiro/LANDING.md §5), adaptado a ToV. */
#module-nosolorol_tov-display nav.breadcrumb{display:none}
#module-nosolorol_tov-display #wrapper{padding:0; margin:0; background:#0d141c; overflow-x:clip; display:flow-root}
/* el tema deja ~25px de aire fantasma sobre el contenedor de contenido; lo pegamos al header */
#module-nosolorol_tov-display #wrapper > .container{margin-top:-25px}
#module-nosolorol_tov-display #notifications{display:none !important}
#module-nosolorol_tov-display #content.page-content{padding:0; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none}
/* pie del tema fuera: la landing lleva el suyo a medida */
#module-nosolorol_tov-display #footer{display:none !important}
/* Barra fina flotante. CLAVE: el desenfoque va en ::before, NO en #header — backdrop-filter
   crea bloque contenedor y dejaría el cajón lateral (fixed) atado a la altura de la barra. */
#module-nosolorol_tov-display #header{
  position:fixed !important; top:0; left:0; right:0; width:100%; z-index:1000; background:transparent !important;
  height:auto !important; min-height:0 !important;
  border-bottom:1px solid rgba(47,143,214,.18); transition:border-color .25s ease}
#module-nosolorol_tov-display #header::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:rgba(13,20,28,.16); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:background .25s ease}
#module-nosolorol_tov-display #header.nsr-scrolled::before{background:rgba(13,20,28,.86)}
#module-nosolorol_tov-display #header.nsr-scrolled{border-bottom-color:rgba(47,143,214,.42)}
/* ocultar lo que no queremos. OJO: el cajón y la hamburguesa van FUERA de #header (fixed),
   así que hay que ocultarlos por su id, no como descendientes. */
#module-nosolorol_tov-display nav.header-nav,
#module-nosolorol_tov-display #nsr-drawer,
#module-nosolorol_tov-display #nsr-drawer-overlay,
#module-nosolorol_tov-display #_desktop_main_menu,
#module-nosolorol_tov-display #header .header-top-inner,
#module-nosolorol_tov-display #header #search_widget,
#module-nosolorol_tov-display #header .head-wishlist,
#module-nosolorol_tov-display #header .header-top .overlay,
#module-nosolorol_tov-display #header button[aria-label*="men" i],
#module-nosolorol_tov-display #nsr-hamburger-fixed{display:none !important}
#module-nosolorol_tov-display #header .header-top{position:relative !important; z-index:1; background:transparent !important; padding:0 !important; margin:0 !important; min-height:0 !important; height:auto !important; box-shadow:none !important}
#module-nosolorol_tov-display #header .header-top .container{display:flex !important; flex-wrap:nowrap !important; align-items:center !important; gap:20px; padding:9px 40px !important; min-height:0 !important; height:auto !important; max-width:none !important}
@media (max-width:600px){#module-nosolorol_tov-display #header .header-top .container{padding-left:16px !important; padding-right:16px !important}}
#module-nosolorol_tov-display #header .header_logo,
#module-nosolorol_tov-display #header #desktop_cart,
#module-nosolorol_tov-display #header .user-info{width:auto !important; max-width:none !important; flex:0 0 auto !important; float:none !important}
#module-nosolorol_tov-display #header .blockcart,
#module-nosolorol_tov-display #header .blockcart-header,
#module-nosolorol_tov-display #header .user-info{margin:0 !important}
#module-nosolorol_tov-display #header .header_logo{order:0; position:static !important; margin:0 auto 0 0 !important}
#module-nosolorol_tov-display #header .header_logo h1{margin:0}
#module-nosolorol_tov-display #header .logo{height:33px !important; width:auto !important; margin:0 !important}
#module-nosolorol_tov-display #header .user-info{order:1}
#module-nosolorol_tov-display #header #desktop_cart{order:2}
#module-nosolorol_tov-display #header .user-info,
#module-nosolorol_tov-display #header .user-info *,
#module-nosolorol_tov-display #header .blockcart,
#module-nosolorol_tov-display #header .blockcart *{color:#d8dade !important}
/* el CONTADOR (burbuja) sí lleva fondo del acento; el IMPORTE va sin fondo, solo texto */
#module-nosolorol_tov-display #header .blockcart .mobile_count{background:#0f5d99 !important; color:#fff !important}
#module-nosolorol_tov-display #header .blockcart .cart-products-count{background:transparent !important; color:#fff !important}
/* Los iconos de la cabecera (carrito, cuenta) NO se colorean con `color`: van pintados con
   una máscara CSS (cart.svg / user.svg) y lo que se ve es su background-color. El tema los
   pasa a su amarillo (#FFB303) en hover; aquí van al oro, que es el acento comercial de ToV. */
#module-nosolorol_tov-display #header #desktop_cart:hover .shopping-cart .icon,
#module-nosolorol_tov-display #header .user-info:hover .user-info-title{background-color:#2f8fd6 !important}

/* secciones a sangre completa (el tema las mete en un .container estrecho) */
.nsr-tov-hero,.nsr-tov-intro,.nsr-tov-cine,.nsr-tov-comp,.nsr-tov-cls,.nsr-tov-est,
.nsr-tov-ab,.nsr-tov-bf,.nsr-tov-kob,.nsr-tov-end,.nsr-tov-footer,.nsr-tov-libro{width:100vw; margin-left:calc(50% - 50vw); position:relative}

/* ---------- tipografía base ---------- */
/* TODOS los titulares llevan 10px abajo, y se declara AQUÍ, en un único sitio.
   Antes cada clase traía el suyo (16, 14, 9, 11, 8, 3...) y encima este reset era `margin:0`,
   que con especificidad (0,1,1) se los comía todos: 18 de los 22 salían pegados al texto y
   había cuatro parches sueltos tapando el agujero a mano. Ni el ritmo era el diseñado ni el
   CSS decía la verdad. Se unifica en 10 porque 14/16 daban demasiado aire.
   Las clases (.nsr-tov-h2 y compañía) ya NO declaran margen: solo van en titulares
   (verificado: 22 elementos, todos h1/h2/h3), asi que este reset les llega a todas.
   Para cambiar el aire de los titulares, se toca este 10px y ya. */
.nsr-tov h1,.nsr-tov h2,.nsr-tov h3{margin:0 0 10px; font-weight:400}
/* balance SOLO en títulos, a cualquier ancho. En el cuerpo, NI balance NI pretty:
   acortan las líneas y dejan hueco al final (LANDING.md §8). */
.nsr-tov-h1,.nsr-tov-h2,.nsr-tov-quote,.nsr-tov-est__t,.nsr-tov-end__t,
.nsr-tov-cc__t,.nsr-tov-cls__t,.nsr-tov-ab__nom{text-wrap:balance}
.nsr-tov-h1{font:700 clamp(30px,4.4vw,50px)/1.06 var(--serif); color:#fff}
.nsr-tov-h2{font:700 clamp(27px,3.6vw,42px)/1.1 var(--serif); color:#fff}
.nsr-tov-lead{font-size:16.5px; color:var(--ink); margin:0; max-width:62ch}
.nsr-tov-prose{font-size:15.5px; color:var(--ink-dim); margin:0 0 14px}
.nsr-tov-eyebrow{font:700 11px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--blue-hi); margin:0 0 12px}
.nsr-tov-eyebrow--gold{color:var(--plata)}
.nsr-tov-kick{font:700 11px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--plata); margin:0 0 16px}

/* ---------- botones ----------
   OJO con la especificidad: los botones son <a>, y `.nsr-tov a{color:inherit}` pesa 0,1,1,
   más que un `.nsr-tov-btn--x` a secas (0,1,0). Sin el `.nsr-tov ` delante, el color del
   botón NUNCA se aplica y el enlace hereda --ink. Con el oro no se veía; con la plata sí. */
.nsr-tov-btn{display:inline-flex; align-items:center; justify-content:center; font:700 12.5px/1 var(--sans);
  letter-spacing:.13em; text-transform:uppercase; padding:15px 24px; border-radius:2px;
  border:1px solid transparent; cursor:pointer; transition:transform .16s, background .16s}
.nsr-tov .nsr-tov-btn--gold{background:linear-gradient(180deg,var(--plata-hi),var(--plata-lo)); color:var(--plata-ink);
  border-color:var(--blue); box-shadow:0 6px 22px rgba(15,93,153,.3)}
.nsr-tov .nsr-tov-btn--gold:hover{background:linear-gradient(180deg,#fff,var(--plata)); border-color:var(--blue-hi); transform:translateY(-2px)}
.nsr-tov .nsr-tov-btn--blue{background:var(--blue); color:#fff}
.nsr-tov .nsr-tov-btn--blue:hover{background:var(--blue-hi); transform:translateY(-2px)}
.nsr-tov .nsr-tov-btn--ghost{background:rgba(255,255,255,.04); border-color:var(--hair); color:var(--ink)}
.nsr-tov .nsr-tov-btn--ghost:hover{border-color:var(--blue-hi); color:#fff}
.nsr-tov-cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.nsr-tov-cta--center{justify-content:center}

/* línea de stock: NUNCA con el formato del precio (LANDING.md §6-bis) */
.nsr-tov-stock{display:inline-flex; align-items:center; gap:8px; font:600 12.5px/1 var(--sans);
  letter-spacing:.06em; color:var(--ink-dim); margin:0}
.nsr-tov-stock i{width:7px; height:7px; border-radius:50%; background:#4ec07a; box-shadow:0 0 0 3px rgba(78,192,122,.18)}
.nsr-tov-stock--low{color:var(--amber)}
.nsr-tov-stock--low i{background:var(--amber); box-shadow:0 0 0 3px rgba(224,168,60,.2)}
.nsr-tov-stock--out{color:var(--muted)}
.nsr-tov-stock--out i{background:var(--muted); box-shadow:none}

/* ================= HERO ================= */
.nsr-tov-hero{min-height:min(88vh,760px); display:flex; align-items:center; overflow:hidden; background:#05080c}
.nsr-tov-hero__art{position:absolute; inset:0; background-position:calc(62% + 100px) 42%; background-size:cover; background-repeat:no-repeat;
  transform:scale(1.15) translate3d(0,var(--par,0px),0); will-change:transform}
/* El vídeo se funde encima al empezar a reproducir; debajo queda el dragón como respaldo. */
/* El velo cubre DONDE HAY TEXTO, no media imagen. Medido: el texto del hero acaba en el
   54%, así que el negro aguanta hasta el 46% y se va del todo en el 66%. Antes seguía al
   42% en el 62% y no desaparecía hasta el 88%: oscurecía un tercio de arte sin motivo. */
.nsr-tov-hero__veil{position:absolute; inset:0; background:
  linear-gradient(96deg,rgba(5,8,12,.95) 0%,rgba(5,8,12,.88) 30%,rgba(5,8,12,.5) 46%,rgba(5,8,12,.12) 58%,transparent 66%),
  linear-gradient(0deg,var(--void) 1%,transparent 26%)}
.nsr-tov-hero__in{position:relative; z-index:2; max-width:1160px; margin:0 auto; padding:96px 24px 64px; width:100%}
.nsr-tov-hero__copy{max-width:610px}
.nsr-tov-hero__flag{display:inline-flex; font:700 10.5px/1 var(--sans); letter-spacing:.2em;
  text-transform:uppercase; color:#231806; background:var(--plata); padding:8px 13px; margin:0 0 22px}
.nsr-tov-hero__logo{width:min(440px,84%); margin:0 0 22px; filter:drop-shadow(0 8px 28px rgba(0,0,0,.9))}
.nsr-tov-hero__lead{font-size:16.5px; color:var(--ink); margin:0 0 26px; max-width:44ch}
.nsr-tov-hero__trust{font:600 11px/1.6 var(--sans); letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin:22px 0 0}

/* ================= QUÉ ES + VÍDEOS ================= */
.nsr-tov-intro{padding:78px 0 68px; background:linear-gradient(180deg,var(--void),var(--night))}
.nsr-tov-intro__grid{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start}
.nsr-tov-intro__vids{display:grid; gap:14px}

/* facade de YouTube: miniatura + play; el iframe entra al hacer clic (9 iframes = ~9 MB) */
.nsr-tov-yt{position:relative; display:block; border:1px solid var(--hair); border-radius:4px;
  overflow:hidden; background:#000; cursor:pointer; aspect-ratio:16/9}
.nsr-tov-yt img{width:100%; height:100%; object-fit:cover; transition:transform .4s, opacity .3s}
.nsr-tov-yt:hover img{transform:scale(1.04); opacity:.75}
.nsr-tov-yt__play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none}
.nsr-tov-yt__play i{width:60px; height:60px; border-radius:50%; background:rgba(15,93,153,.94);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 26px rgba(0,0,0,.6); transition:transform .2s, background .2s}
.nsr-tov-yt:hover .nsr-tov-yt__play i{transform:scale(1.1); background:var(--blue-hi)}
.nsr-tov-yt__play i::after{content:""; border-left:17px solid #fff; border-top:10px solid transparent;
  border-bottom:10px solid transparent; margin-left:5px}
.nsr-tov-yt__cap{position:absolute; left:0; right:0; bottom:0; padding:26px 14px 11px;
  background:linear-gradient(0deg,rgba(0,0,0,.92),transparent); font:600 13px/1.35 var(--sans); color:#fff; pointer-events:none}
.nsr-tov-yt iframe{width:100%; height:100%; border:0; display:block}
/* Al reproducir, el handler hace a.replaceWith(iframe): el iframe SUSTITUYE a la fachada, así
   que deja de estar dentro de .nsr-tov-yt y la regla de arriba ya no lo alcanza. Sin esto se
   queda a su tamaño por defecto (304x154). Las fichas de clase tienen su propia regla
   (.is-playing iframe); los dos vídeos generales viven en #nsr-tov-vstage y necesitan esta. */
#nsr-tov-vstage iframe{width:100%; aspect-ratio:16/9; height:auto; border:0; display:block; border-radius:4px}
.nsr-tov-yt__by{font:600 10.5px/1 var(--sans); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-dim); margin:8px 0 0}
/* pestañas de los dos vídeos generales */
/* justify-self:start NO sobra: el padre es un grid, y el grid BLOQUIFICA a sus hijos —
   convierte este inline-flex en flex, y entonces la caja se estira a toda la celda (534px
   en vez de los 270 que mide su contenido). El display no se puede arreglar desde aquí;
   lo que se arregla es que el grid deje de estirarlo. */
.nsr-tov-tabs{display:inline-flex; justify-self:start; gap:4px; padding:4px; margin:0 0 12px;
  background:rgba(255,255,255,.05); border:1px solid var(--hair); border-radius:3px}
.nsr-tov-tabs button{font:700 11.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim); background:transparent; border:0; padding:10px 15px; border-radius:2px;
  cursor:pointer; transition:.16s}
.nsr-tov-tabs button:hover{color:#fff}
.nsr-tov-tabs button.is-on{background:var(--blue); color:#fff}

/* ================= BANDA CINEMÁTICA =================
   La holgura del arte (inset) DEBE superar el recorrido del parallax (±data-par px),
   o al desplazarse asoma el borde. En % dependía de la altura de la banda -> px fijos. */
.nsr-tov-cine{min-height:clamp(460px,72vh,660px); display:flex; align-items:center; overflow:hidden; background:#05080c}
.nsr-tov-cine__img{position:absolute; inset:-150px 0; background-position:center; background-size:cover;
  transform:translate3d(0,var(--par,0px),0); will-change:transform}
.nsr-tov-cine__veil{position:absolute; inset:0}
.nsr-tov-cine__in{position:relative; z-index:2; max-width:1160px; margin:0 auto; padding:0 24px; width:100%}
.nsr-tov-cine__copy{max-width:540px}
.nsr-tov-cine--right .nsr-tov-cine__in{display:flex; justify-content:flex-end}
.nsr-tov-cine--left .nsr-tov-cine__veil{background:
  linear-gradient(96deg,rgba(5,8,12,.94) 4%,rgba(5,8,12,.8) 32%,rgba(5,8,12,.34) 46%,rgba(5,8,12,.06) 60%,transparent 68%),
  linear-gradient(0deg,var(--void) 1%,transparent 20%), linear-gradient(180deg,var(--void) 1%,transparent 18%)}
.nsr-tov-cine--right .nsr-tov-cine__veil{background:
  linear-gradient(264deg,rgba(5,8,12,.96) 8%,rgba(5,8,12,.88) 42%,rgba(5,8,12,.5) 58%,rgba(5,8,12,.12) 74%,transparent 84%),
  linear-gradient(0deg,var(--void) 1%,transparent 20%), linear-gradient(180deg,var(--void) 1%,transparent 18%)}
.nsr-tov-quote{font:700 clamp(26px,3.6vw,40px)/1.16 var(--serif); color:#fff}
.nsr-tov-quote .r{display:block; color:var(--blue-glow)}

/* ================= COMPATIBILIDAD ================= */
.nsr-tov-comp{padding:76px 0; background:var(--night); border-top:1px solid var(--hair-2)}
.nsr-tov-comp__hd{max-width:660px; margin:0 0 40px}
.nsr-tov-comp__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.nsr-tov-cc{border:1px solid var(--hair); border-radius:5px; padding:26px 22px;
  background:linear-gradient(180deg,rgba(47,143,214,.07),transparent)}
.nsr-tov-cc__n{font:700 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--blue-hi); margin:0 0 12px}
.nsr-tov-cc__t{font:700 19px/1.2 var(--serif); color:#fff}
.nsr-tov-cc__p{font-size:14.5px; color:var(--ink-dim); margin:0}
.nsr-tov-cc__p em{color:var(--ink); font-style:normal}

/* ================= SELECTOR DE CLASES =================
   El arte manda: retrato recortado del manual + su símbolo de marca de agua. El vídeo de
   Míchel acompaña en pequeño, no de protagonista (a tamaño grande la miniatura de YouTube
   se ve pixelada: la mejor que sirve es 1280x720). */
/* sin relleno abajo: la banda de papel va a sangre y entrega directamente a la sección
   siguiente. Con padding quedaba una franja oscura vacía entre las dos. */
.nsr-tov-cls{padding:80px 0 0; background:var(--void); border-top:1px solid var(--hair-2); overflow:hidden}
.nsr-tov-cls__bg{position:absolute; inset:-90px 0; background-position:center; background-size:cover; opacity:.16;
  transform:translate3d(0,var(--par,0px),0); will-change:transform}
.nsr-tov-cls__bg::after{content:""; position:absolute; inset:0; background:
  linear-gradient(0deg,var(--void),transparent 55%), linear-gradient(180deg,var(--void),transparent 40%)}
.nsr-tov-cls__in{position:relative; z-index:2}
.nsr-tov-cls__hd{max-width:640px; margin:0 0 34px}
.nsr-tov-cls__stage{display:block}

/* SELECTOR: fila de sellos. La navegación ES la iconografía del juego, no una barra de
   pestañas — un widget de interfaz encima de una página de libro se nota ajeno por mucho
   que se estilice. El símbolo va de máscara CSS para que tome el color del estado. */
/* gap 20 y no 10: el nombre va bajo el sello y los largos (Explorador) se montaban con el
   vecino. En móvil solo se anuncia el activo, así que esto es cosa de escritorio. */
.nsr-tov-cls__list{display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin:0 0 42px;
  padding:0; border:0; background:none}
.nsr-tov-cls__list button{position:relative; width:55px; height:55px; flex:none; border-radius:50%;
  border:1px solid var(--hair); background:rgba(255,255,255,.05); cursor:pointer;
  display:grid; place-items:center; padding:0; transition:transform .18s, border-color .18s, background .18s}
.nsr-tov-cls__list button i{width:28px; height:28px; background-color:var(--plata-lo);
  -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat; transition:background-color .18s}
.nsr-tov-cls__list button:hover{border-color:var(--blue-hi); transform:translateY(-3px)}
.nsr-tov-cls__list button:hover i{background-color:var(--blue-glow)}
.nsr-tov-cls__list button.is-on{background:var(--blue); border-color:var(--blue)}
.nsr-tov-cls__list button.is-on i{background-color:#fff}
/* el nombre, SIEMPRE visible: sin él los símbolos solos no se reconocen */
/* CARRIL CON FLECHAS — pieza compartida (sellos de clase y tira de aventuras).
   Las flechas NO se muestran solas: el JS les pone .is-on solo si scrollWidth > clientWidth,
   así que donde el contenido cabe (escritorio) ni aparecen.
   --fl-y: la altura a la que se centran. Por defecto el medio del carril, PERO el de los
   sellos mide de más (lleva 22px de padding-bottom para que quepan las etiquetas, que van
   absolutas), y centrarse ahí dejaba la flecha 9px por debajo de los sellos. */
.nsr-tov-rail{position:relative; --fl-y:50%}
.nsr-tov-flecha{position:absolute; top:var(--fl-y); transform:translateY(-50%); z-index:3;
  width:24px; height:44px; padding:0; cursor:pointer; border:0; background:none;
  opacity:0; pointer-events:none; transition:opacity .18s}
.nsr-tov-flecha.is-on{opacity:.5; pointer-events:auto}
.nsr-tov-flecha.is-on:hover{opacity:1}
/* FUERA del carril, en el margen del .nsr-tov-wrap (24px a cada lado): ni le reservan hueco
   al deslizador ni le tapan contenido. 24 de ancho contra 24 de margen = encajan exactas.
   Si alguien toca el padding del wrap, hay que tocar esto. */
.nsr-tov-flecha--izq{left:-24px}
.nsr-tov-flecha--dch{right:-24px}
/* sin círculo: solo el galón, con sombra para que aguante sobre el arte */
.nsr-tov-flecha i{display:block; width:9px; height:9px; margin:0 auto;
  border-right:2px solid #fff; border-bottom:2px solid #fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.95))}
.nsr-tov-flecha--izq i{transform:rotate(135deg); margin-left:11px}
.nsr-tov-flecha--dch i{transform:rotate(-45deg); margin-left:7px}

.nsr-tov-cls__list button b{position:absolute; bottom:-21px; left:50%; transform:translateX(-50%);
  white-space:nowrap; font:700 9.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim); transition:color .18s}
.nsr-tov-cls__list button:hover b{color:var(--blue-glow)}
.nsr-tov-cls__list button.is-on b{color:#fff}
/* la marca de "nueva" del Mecanicista: un punto, no una etiqueta */
.nsr-tov-cls__list button.is-new::after{content:""; position:absolute; top:4px; right:4px; width:9px; height:9px;
  border-radius:50%; background:var(--plata); border:2px solid var(--void)}

/* escenario: PANEL DE PAPEL, como la página del libro.
   Este arte está pintado para fondo claro; sobre oscuro no encaja. El personaje se ancla
   abajo a la izquierda y NO se recorta a lo ancho: se disuelve en el papel por detrás del
   texto con un degradado, para que no parezca un recorte pegado. */
/* A TODO ANCHO: la banda se sale del wrap y ocupa el viewport. --k escala el encuadre
   COMPLETO (izq, top y alto a la vez); si se toca solo uno, se descoloca.
   FONDO: paisaje del manual (pág. 7), desenfocado y desaturado. El personaje está pintado
   para papel, así que el velo lo lleva al tono del pergamino sin matar la escena. */
.nsr-tov-cls__view{--k:1.34; position:relative; width:100vw; margin-left:calc(50% - 50vw);
  border-top:1px solid var(--parch-3); border-bottom:1px solid var(--parch-3); overflow:hidden;
  background:var(--parch)}
/* PARALLAX solo en el fondo (la figura NO se mueve: es la que ancla la escena).
   inset:-70px le da recorrido: el desplazamiento es ±43px con data-par=50, así que 70px
   de margen sobran. Si se sube data-par, hay que subir el inset o asomará el borde. */
.nsr-tov-cls__view::before{content:""; position:absolute; inset:-70px 0; z-index:0;
  background:url(../img/cls-fondo.webp) center/cover no-repeat;
  filter:blur(5px) saturate(.62) brightness(0.68);
  transform:translate3d(0,var(--par,0px),0); will-change:transform}
/* el velo de pergamino: sin él el paisaje pelea con la figura */
.nsr-tov-cls__view::after{content:""; position:absolute; inset:0; z-index:0;
  background:rgba(20,28,20,.18)}
.nsr-tov-cls__grid{position:relative; z-index:2; display:grid; grid-template-columns:46% 54%;
  gap:0; align-items:center; min-height:calc(420px * var(--k)); max-width:1160px; margin:0 auto; padding:0 24px}
/* la figura: ancla abajo-izquierda, altura por el zoom que elegiste, y se sale del grid a lo ancho */
/* ENCUADRE A MANO, clase por clase. El origen es la esquina superior izquierda del panel y
   son los MISMOS ejes del artefacto (marco 300x420):
       --izq = x * 300     --top = y * 420     --alto = vista(760) x zoom
   Los tres son obligatorios: van de -238px a -91px según la clase, así que anclarlas todas
   igual descoloca las caras. La diferencia con el artefacto es que aquí NO se recorta a lo
   ancho: la imagen sigue hacia la derecha y el degradado la funde en el papel. */
/* z-index:1 OBLIGATORIO: el velo de pergamino va en ::after, y un ::after se pinta DESPUÉS
   de los hijos. Sin esto el velo cae sobre el personaje y lo desatura; el texto se salva
   solo porque su tarjeta va a z-index:2. */
.nsr-tov-cls__figure{position:absolute; top:0; bottom:0; left:calc(50vw - 580px); width:1160px;
  z-index:1; pointer-events:none}
/* Halo oscuro: sin él la figura recortada se lee como pegatina sobre el paisaje. Van dos
   drop-shadow encadenados — uno ceñido que despega la silueta del fondo, y otro suave hacia
   abajo que la asienta. drop-shadow sigue el alfa, así que respeta el recorte.
   Se puede porque la sombra PINTADA que traen tres de ellas (explorador, mago, pícaro) es la
   del suelo y queda por debajo del corte de cintura: no hay doblado visible. */
.nsr-tov-cls__figure img{position:absolute;
  left:calc(var(--izq,0px) * var(--k)); top:calc(var(--top,0px) * var(--k));
  width:auto; max-width:none; height:calc(var(--alto,840px) * var(--k));
  filter:drop-shadow(0 0 14px rgba(12,20,14,.55)) drop-shadow(0 10px 30px rgba(12,20,14,.45))}
/* el degradado que hace legible el texto y funde al personaje en el papel */
/* Muerde tarde: hasta el 46% el personaje va limpio; de ahí a 66% se funde. Si empieza
   antes, se come el torso, que es justo lo que se quiere ver. */
/* SIN degradado de banda: borraba la mitad derecha y con ella todo el paisaje. El texto
   se lee sobre su propia tarjeta de papel (.nsr-tov-cls__body), y así el fondo sobrevive. */
.nsr-tov-cls__scrim{display:none}
.nsr-tov-cls__body{grid-column:2; position:relative; z-index:2; padding:34px 32px; align-self:center;
  background:rgba(246,239,225,.93); border:1px solid var(--parch-3); border-radius:5px;
  box-shadow:0 22px 50px -22px rgba(30,24,14,.5)}
.nsr-tov-cls__k{font:700 10.5px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--blue-deep); margin:0 0 9px}
.nsr-tov-cls__t{font:700 clamp(30px,3.4vw,44px)/1.05 var(--serif); color:var(--parch-ink)}
.nsr-tov-cls__p{font-size:16.5px; line-height:1.6; color:#4a4034; margin:0 0 12px; max-width:46ch}
.nsr-tov-cls__meta{font:600 11.5px/1.5 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  color:var(--parch-dim); margin:0 0 18px}

/* el vídeo, discreto, sobre el papel */
.nsr-tov-cls__vid{display:flex; align-items:center; gap:12px; border:1px solid var(--parch-3); border-radius:4px;
  padding:8px; background:rgba(255,255,255,.62); max-width:400px; cursor:pointer; transition:border-color .16s}
.nsr-tov-cls__vid:hover{border-color:var(--blue)}
.nsr-tov-cls__vid .nsr-tov-yt{width:132px; flex:none; border-radius:3px; border:0}
.nsr-tov-cls__vid .nsr-tov-yt__play i{width:30px; height:30px; box-shadow:none}
.nsr-tov-cls__vid .nsr-tov-yt__play i::after{border-left-width:9px; border-top-width:5px; border-bottom-width:5px; margin-left:3px}
.nsr-tov-cls__vid .nsr-tov-yt__cap{display:none}
.nsr-tov-cls__vidtxt{min-width:0}
.nsr-tov-cls__vidtxt b{display:block; font:700 12.5px/1.3 var(--sans); color:var(--parch-ink); margin:0 0 3px}
.nsr-tov-cls__vidtxt span{font:600 10.5px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--parch-dim)}
.nsr-tov-cls__vid.is-playing{display:block; max-width:none; padding:0}
.nsr-tov-cls__vid.is-playing .nsr-tov-cls__vidtxt{display:none}
.nsr-tov-cls__vid.is-playing iframe{width:100%; aspect-ratio:16/9; border:0; display:block; border-radius:3px}

/* Mecanicista: no hay vídeo porque no existe en 5E y no hay con qué compararlo */
.nsr-tov-cls__nov{display:inline-flex; align-items:center; gap:9px; border:1px solid rgba(204,204,216,.35);
  border-radius:4px; padding:10px 13px; max-width:400px}
.nsr-tov-cls__nov span{font:700 10px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase;
  color:#231806; background:var(--plata); padding:6px 9px}
.nsr-tov-cls__nov p{margin:0; font-size:12.5px; color:var(--ink-dim)}

/* --- entrada del personaje al cambiar de clase ---
   El paisaje NO se anima: es el escenario y su permanencia es lo que hace que se lea como
   "otro personaje entra en el mismo bosque". Solo opacity y transform: no tocan maquetación,
   así que el navegador lo resuelve en la GPU sin recalcular nada.
   La media query de reduced-motion del final las desactiva. */
@keyframes nsrTovFigura{ from{opacity:0; transform:translateX(-38px) scale(.985)} to{opacity:1; transform:none} }
@keyframes nsrTovFicha { from{opacity:0; transform:translateY(16px)}            to{opacity:1; transform:none} }
.nsr-tov-cls__figure img{animation:nsrTovFigura .46s cubic-bezier(.2,.7,.2,1) both}
.nsr-tov-cls__body{animation:nsrTovFicha .40s cubic-bezier(.2,.7,.2,1) .09s both}

/* ================= ESTUCHE ================= */
.nsr-tov-est{padding:84px 0; background:linear-gradient(180deg,var(--void),#0a1017)}
/* Estuche con la imagen a la IZQUIERDA (orden natural del marcado). La suscripción, que va
   justo detrás, lleva la imagen a la derecha: así la tira alterna I-D-I-D-I con Guía, Cubil
   y Pantalla. */
.nsr-tov-est__in{display:grid; grid-template-columns:1.08fr 1fr; gap:48px; align-items:center}
/* Sin marco ni caja: el estuche va suelto, como los mockups de los libros. La etiqueta
   deja de colgar de un borde que ya no existe y flota sobre la propia imagen. */
.nsr-tov-est__cover{position:relative; display:flex; justify-content:center}
/* El estuche viene con alfa: drop-shadow sigue el recorte; box-shadow dibujaría un rectángulo. */
.nsr-tov-est__cover img{width:100%; max-width:520px; height:auto; filter:drop-shadow(0 22px 38px rgba(0,0,0,.65))}
.nsr-tov-est__badge{position:absolute; top:4px; left:0; z-index:2; font:700 10px/1 var(--sans);
  letter-spacing:.17em; text-transform:uppercase; color:var(--plata-ink);
  background:linear-gradient(180deg,var(--plata-hi),var(--plata-lo)); padding:8px 12px; border-radius:2px}
.nsr-tov-est__t{font:700 clamp(28px,3.6vw,40px)/1.08 var(--serif); color:#fff}
.nsr-tov-est__lead{font-size:16px; color:var(--ink-dim); margin:0 0 22px; max-width:46ch}
.nsr-tov-est__list{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:11px}
.nsr-tov-est__list li{position:relative; padding-left:26px; font-size:14.8px; color:var(--ink)}
.nsr-tov-est__list li::before{content:""; position:absolute; left:0; top:8px; width:11px; height:11px;
  border:2px solid var(--plata); transform:rotate(45deg)}
/* mismo tratamiento que el remate de los libros: es la voz del producto, va como cita */
.nsr-tov-est__cierre{font:700 17px/1.3 var(--serif); color:var(--plata); margin:0 0 22px}
.nsr-tov-est__cierre strong{color:#fff}
.nsr-tov-est__buy{border-top:1px solid var(--hair); padding-top:22px}
.nsr-tov-est__prow{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin:0 0 16px}
.nsr-tov-est__price{font:700 34px/1 var(--serif); color:#fff; font-variant-numeric:tabular-nums}
.nsr-tov-est__form{margin:0}
.nsr-tov-est__cap{font:600 11px/1.5 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:14px 0 0}

/* ================= LOS TRES LIBROS =================
   Cada uno con su sección. Alternan lado y fondo para que la página respire. */
.nsr-tov-libro{padding:76px 0; background:var(--night); border-top:1px solid var(--hair-2)}
.nsr-tov-libro--alt{background:linear-gradient(180deg,var(--void),var(--night))}
.nsr-tov-libro--pant{background:var(--void)}
.nsr-tov-libro__in{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center}
/* La Guía pide más aire que las otras dos: su mockup va de tres cuartos y el lomo se
   proyecta hacia el texto, así que a igual gap se ve más cerca. Solo esta sección. */
/* La Guía: el mockup se APOYA A LA IZQUIERDA de su columna en vez de arrimarse al texto.
   Así se aleja usando el sobrante de la columna, sin robarle ancho al texto — que es lo que
   pasaba al agrandar el gap (a 180px "Linaje y Legado" ya se partía en dos líneas). */
#guia .nsr-tov-libro__mk{justify-content:flex-start; padding-left:55px}
/* pegados al texto, no centrados en su columna: si no quedan lejos y la sección se abre */
.nsr-tov-libro__mk{display:flex; justify-content:flex-end}
.nsr-tov-libro--alt .nsr-tov-libro__mk{justify-content:flex-start}
.nsr-tov-libro--pant .nsr-tov-libro__mk{justify-content:center}
/* SIN drop-shadow: la Guía y el Cubil traen LA SOMBRA PINTADA (11% de sus píxeles con
   alfa 1-39). Añadirle drop-shadow la dobla — es la trampa del §7-bis de LANDING.md.
   Además el recorte va por alfa>40, no >0: si no, el halo de esa sombra engorda el
   recuadro un tercio y el libro sale flotando con aire alrededor. */
.nsr-tov-libro__mk img{width:100%; max-width:362px; height:auto}

/* ENTRADA DE LOS MOCKUPS (.nsr-tov-gira): el libro gira hacia ti, como quien te lo enseña.
   La llevan los cuatro: Estuche, Guía, Cubil y Pantalla.
   Una idea a dos intensidades, no dos efectos: en escritorio entra además por SU lado, lo que
   refuerza el zigzag de la página; en móvil el mockup va arriba y a todo el ancho, así que no
   hay recorrido lateral y se queda el giro solo, con una subida corta.

   Observer PROPIO (.is-in), no el .in general de .nsr-tov-fade: ese dispara 320px ANTES de que
   el bloque entre en pantalla, a posta, para que las imágenes lazy lleguen cargadas. Colgando
   de él, el mockup giraba fuera de plano y al llegar ya estaba puesto.

   Nada de #guia aquí: un id pesa (1,1,0) y le ganaría al .is-in (0,2,0), dejando el libro
   girado para siempre. Por defecto entra por la izquierda (Estuche, Guía y Pantalla) y --alt
   lo invierte para el Cubil, que es el único con la imagen a la derecha.

   Va sobre el contenedor y NO sobre el <img>: el img de la Guía y el Cubil ya lleva su propio
   translateX en móvil (compensa que el libro está descentrado dentro del fichero) y el del
   Estuche lleva un drop-shadow. Y así la chapa "Unidades limitadas" gira con su estuche. */
.nsr-tov-libro__in,.nsr-tov-est__in{perspective:1200px}
.nsr-tov-gira{opacity:0; transform:translateX(-120px) rotateY(-26deg);
  transition:transform .95s cubic-bezier(.16,.84,.28,1), opacity .7s ease}
.nsr-tov-libro--alt .nsr-tov-gira{transform:translateX(120px) rotateY(26deg)}
.nsr-tov-gira.is-in{opacity:1; transform:none}

.nsr-tov-libro--pant .nsr-tov-libro__mk img{max-width:100%}
.nsr-tov-libro__t{font:700 clamp(27px,3.2vw,38px)/1.08 var(--serif); color:#fff; text-wrap:balance}
.nsr-tov-libro__lead{font-size:16.5px; color:var(--ink); margin:0 0 20px; max-width:46ch}
.nsr-tov-libro__list{list-style:none; margin:0 0 20px; padding:0; display:grid; gap:10px}
.nsr-tov-libro__list li{position:relative; padding-left:24px; font-size:14.8px; color:var(--ink-dim)}
.nsr-tov-libro__list li strong{color:var(--ink)}
.nsr-tov-libro__list li::before{content:""; position:absolute; left:0; top:8px; width:9px; height:9px;
  border:2px solid var(--blue-hi); transform:rotate(45deg)}
/* el remate de la contraportada: es la voz del libro, se trata como cita */
.nsr-tov-libro__cierre{font:700 17px/1.3 var(--serif); color:var(--plata); margin:0 0 22px}
.nsr-tov-libro__cierre strong{color:#fff}
.nsr-tov-libro__buy{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--hair); padding-top:20px}
.nsr-tov-libro__price{font:700 27px/1 var(--serif); color:#fff; font-variant-numeric:tabular-nums}
.nsr-tov-libro__form{margin:0}
.nsr-tov .nsr-tov-libro__pdf{font:600 12px/1 var(--sans); color:var(--ink-dim); border-bottom:1px dotted var(--muted); padding-bottom:2px}
.nsr-tov .nsr-tov-libro__pdf:hover{color:var(--blue-glow); border-color:var(--blue-glow)}

/* ================= SUSCRIPCIÓN DE AVENTURAS =================
   Sustituye a "La línea completa": todo lo que había allí ya se vende en su propia sección
   (Estuche, Guía, Cubil, Pantalla), así que la banda era repetición. Aquí va la novedad.
   Va justo detrás del Estuche: es lo segundo que se enseña, no un apéndice del final.
   Sin caja ni recuadro — como el resto de secciones, a todo ancho y con su propio fondo.
   Composición: ilustración a la izquierda, bloque de venta a la derecha (imagen-izquierda,
   que es lo que mantiene el I-D-I-D-I con Estuche, Guía, Cubil y Pantalla). */
.nsr-tov-ab{position:relative; padding:84px 0; background:var(--night); overflow:hidden}
/* La ilustración de la aventura elegida (la portada sin cartela ni logos). La cambia el JS.
   Más ancha que la franja que se ve: el sobrante se lo come el velo, y así no hay riesgo de
   que asome un borde recto si el degradado no cuadra al píxel. */
.nsr-tov-ab__art{position:absolute; z-index:0; inset:0 auto 0 0; width:42%;
  background:center/cover no-repeat}
/* Funde el arte hacia el azul justo donde arranca el bloque de texto (~44%). Los dos cortes
   verticales rematan arriba y abajo: sin ellos la ilustración choca en recto contra las
   secciones vecinas. */
.nsr-tov-ab__veil{position:absolute; z-index:0; inset:0; background:
  linear-gradient(90deg, rgba(17,25,38,.12) 0%, rgba(17,25,38,.28) 12%,
    rgba(17,25,38,.74) 22%, var(--night) 31%),
  linear-gradient(0deg, var(--night) 1%, transparent 24%),
  linear-gradient(180deg, var(--night) 1%, transparent 24%)}
.nsr-tov-ab > .nsr-tov-wrap{position:relative; z-index:1}
/* Columna vacía a la izquierda: ahí se ve la ilustración. El bloque se va entero a la
   derecha, sin desmontarse por dentro. Lo que fija su ancho es la tira: siete miniaturas de
   62px piden 482px, y con la portada al lado son ~830. De ahí que a la izquierda quede ~28%
   de hueco y no más. */
.nsr-tov-ab__in{display:grid; grid-template-columns:.28fr 1fr; gap:40px}
.nsr-tov-ab__block{grid-column:2}

.nsr-tov-ab__nuevo{display:inline-block; font:700 10px/1 var(--sans); letter-spacing:.18em;
  text-transform:uppercase; color:var(--plata-ink); border:1px solid var(--blue);
  background:linear-gradient(180deg,var(--plata-hi),var(--plata-lo));
  padding:6px 10px; border-radius:2px; margin:0 0 13px}
.nsr-tov-ab__t{font:700 clamp(25px,3vw,36px)/1.08 var(--serif); color:#fff; text-wrap:balance}
.nsr-tov-ab__lead{font-size:15px; color:var(--ink); margin:0; max-width:60ch}
.nsr-tov-ab__lead b{color:#fff}

/* Portada a la izquierda del bloque, ficha a la derecha, y dentro de la ficha todo lo demás. */
.nsr-tov-ab__H{display:grid; grid-template-columns:auto 1fr; gap:34px; align-items:center; margin:26px 0 0}
.nsr-tov-ab__ficha{min-width:0}
.nsr-tov-ab__cover{position:relative}
.nsr-tov-ab__cover img{width:310px; height:auto; display:block;
  border:2px solid var(--plata); border-radius:3px; box-shadow:0 24px 50px -14px #000}
/* Sello de formato, DENTRO de la portada y en diagonal con la etiqueta de entrega: marca el
   objeto que estás mirando, no la oferta.
   aria-hidden porque el pie ya lo dice con todas las letras: un lector de pantalla no
   necesita oír "PDF" tres veces. */
.nsr-tov-ab__fmt{position:absolute; z-index:2; bottom:10px; right:10px;
  font:700 11px/1 var(--sans); letter-spacing:.14em; padding:7px 10px; border-radius:2px;
  color:#fff; background:var(--blue-deep); border:1px solid var(--blue);
  box-shadow:0 4px 14px rgba(0,0,0,.55)}

/* La etiqueta va DESPUÉS de la imagen en el marcado y con z-index propio: sin las dos cosas,
   la portada (que pinta después) se le monta encima.
   Colores del tema, no ámbar: --amber está reservado al aviso de stock (ver los tokens).
   Plateado = la que ya tienes; azul oscuro = la que está por llegar. */
.nsr-tov-ab__tag{position:absolute; z-index:2; top:-12px; left:-10px; font:700 10px/1 var(--sans);
  letter-spacing:.16em; text-transform:uppercase; padding:7px 11px; border-radius:2px;
  color:#fff; background:var(--blue-deep); border:1px solid var(--blue)}
.nsr-tov-ab__tag--ya{color:var(--plata-ink); border-color:var(--blue);
  background:linear-gradient(180deg,var(--plata-hi),var(--plata-lo))}

.nsr-tov-ab__nom{font:700 20px/1.2 var(--serif); color:#fff}
/* min-height = 5 líneas. Los siete resúmenes miden 160-176 caracteres; sin suelo, todo lo que
   va debajo da un salto al cambiar de aventura. */
.nsr-tov-ab__res{font-size:14.2px; line-height:1.6; color:var(--ink); margin:0 0 10px;
  max-width:46ch; min-height:6.4em}
.nsr-tov-ab__meta{font:600 11px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:0}

.nsr-tov-ab__tira{display:flex; gap:8px; margin:16px 0 0; flex-wrap:wrap}
.nsr-tov-ab__thumb{padding:0; border:0; background:none; cursor:pointer; line-height:0; border-radius:2px}
.nsr-tov-ab__thumb img{width:62px; height:auto; display:block; border:1px solid var(--hair);
  border-radius:2px; opacity:.55; transition:opacity .18s, transform .18s, border-color .18s}
.nsr-tov-ab__thumb:hover img{opacity:.9; transform:translateY(-3px)}
.nsr-tov-ab__thumb.is-on img{opacity:1; border-color:var(--plata); transform:translateY(-3px)}
.nsr-tov-ab__thumb:focus-visible{outline:2px solid var(--blue-glow); outline-offset:3px}
.nsr-tov-ab__lab{font:600 10px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:16px 0 0}

.nsr-tov-ab__buy{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:20px 0 12px}
.nsr-tov-ab__price{font:700 33px/1 var(--serif); color:#fff; font-variant-numeric:tabular-nums}
.nsr-tov-ab__unico,.nsr-tov-ab__pdf{font:700 10px/1 var(--sans); letter-spacing:.14em;
  text-transform:uppercase; padding:5px 9px; border-radius:2px;
  color:var(--blue-glow); border:1px solid rgba(99,182,240,.45)}
/* Digital: se dice en la portada (sello), junto al precio (chip) y bajo el botón (pie). No es
   repetición gratuita: el resto de la página vende libros en papel y aquí el malentendido
   cuesta una devolución. Cada uno pilla un momento distinto — lo que miras, lo que pagas y
   lo que lees. En positivo siempre: "no incluye material impreso" evoca justo el papel. */
.nsr-tov-ab__pdf{color:#fff; background:var(--blue-deep); border-color:var(--blue)}
.nsr-tov-ab__form{margin:0}
.nsr-tov-ab__cap{font-size:12.5px; color:var(--ink-dim); margin:12px 0 0}

/* --- cambio de aventura: entran a la vez la portada y la ilustración de fondo --- */
@keyframes nsrTovAvEntra{from{opacity:0; transform:translateY(10px) scale(.985)} to{opacity:1; transform:none}}
@keyframes nsrTovArtEntra{from{opacity:0} to{opacity:1}}
.nsr-tov-ab__cover img.is-nueva{animation:nsrTovAvEntra .34s cubic-bezier(.2,.7,.2,1) both}
.nsr-tov-ab__art.is-nueva{animation:nsrTovArtEntra .5s ease both}

/* ================= BLACK FLAG ================= */
.nsr-tov-bf{padding:96px 0; overflow:hidden; background:#05080c}
.nsr-tov-bf__art{position:absolute; inset:-110px 0; background-position:center 40%; background-size:cover; opacity:.5;
  transform:translate3d(0,var(--par,0px),0); will-change:transform}
.nsr-tov-bf__veil{position:absolute; inset:0; background:
  linear-gradient(270deg,rgba(5,8,12,.97) 8%,rgba(5,8,12,.78) 46%,rgba(5,8,12,.3) 82%),
  linear-gradient(0deg,#05080c 2%,transparent 34%), linear-gradient(180deg,var(--parch) -14%,transparent 16%)}
.nsr-tov-bf__in{position:relative; z-index:2; max-width:1160px; margin:0 auto; padding:0 24px; display:flex; justify-content:flex-end}
.nsr-tov-bf__copy{max-width:530px}
.nsr-tov-pills{display:flex; gap:9px; flex-wrap:wrap; margin:22px 0 0}
.nsr-tov-pill{font:700 10.5px/1 var(--sans); letter-spacing:.15em; text-transform:uppercase; color:var(--plata);
  border:1px solid rgba(204,204,216,.34); padding:9px 12px; border-radius:2px}

/* ================= UNIVERSO KOBOLD ================= */
.nsr-tov-kob{padding:76px 0; background:var(--night); border-top:1px solid var(--hair-2)}
.nsr-tov-kob__hd{max-width:640px; margin:0 0 34px}
.nsr-tov-kob__row{display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin:0 0 28px}
.nsr-tov-kob__row a{display:block; border-radius:3px; overflow:hidden; border:1px solid var(--hair);
  transition:transform .2s, border-color .2s; background:#000}
.nsr-tov-kob__row a:hover{transform:translateY(-5px); border-color:var(--plata)}
.nsr-tov-kob__row img{width:100%; opacity:.88; transition:opacity .2s}
.nsr-tov-kob__row a:hover img{opacity:1}
.nsr-tov-kob__cta{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.nsr-tov-kob__cta p{margin:0; font-size:14.5px; color:var(--ink-dim)}

/* ================= DESCARGAS =================
   Va entre Kobold (--night) y el cierre (#05080c): --void hace de escalón entre los dos.
   Las hojas al 90% de la maqueta (193/167 en vez de 214/186). */
.nsr-tov-dl{position:relative; padding:70px 0; background:var(--void); overflow:hidden; text-align:center}
.nsr-tov-dl::before{content:""; position:absolute; left:50%; top:-38%; width:620px; height:620px;
  transform:translateX(-50%); background:radial-gradient(circle,rgba(47,143,214,.16),transparent 66%)}
.nsr-tov-dl__in{position:relative; z-index:1}
.nsr-tov-dl__lead{font-size:15px; color:var(--ink); margin:0 auto; max-width:52ch; text-wrap:balance}

/* El abanico: la del medio delante y a tamaño; las de los lados, giradas y apagadas para que
   se lean como decorado y no como dos documentos más. */
.nsr-tov-dl__abanico{display:flex; justify-content:center; align-items:flex-end; margin:26px 0 30px}
.nsr-tov-dl__abanico img{width:167px; border:2px solid var(--plata-lo); border-radius:2px;
  box-shadow:0 20px 44px -14px #000}
.nsr-tov-dl__abanico img:first-child{transform:rotate(-7deg) translateX(25px); opacity:.55; filter:saturate(.5)}
.nsr-tov-dl__abanico img:last-child{transform:rotate(7deg) translateX(-25px); opacity:.55; filter:saturate(.5)}

/* Las dos de los lados SALEN de detrás de la de delante al llegar scrolleando.
   El 108% no es a ojo: es el ancho de la propia hoja (167px) más la mitad de la diferencia
   con la de delante = los 180px justos que separan sus centros. En % y no en px para que
   aguante si alguien cambia el tamaño de las hojas.
   Mismo observer que los mockups (.is-in): el reveal general dispara 320px antes de entrar en
   pantalla y el abanico se abriría fuera de plano. */
.nsr-tov-dl__abanico img:first-child,
.nsr-tov-dl__abanico img:last-child{
  transition:transform 1s cubic-bezier(.16,.84,.28,1), opacity .7s ease}
.nsr-tov-dl__abanico:not(.is-in) img:first-child{transform:rotate(0deg) translateX(108%); opacity:0}
.nsr-tov-dl__abanico:not(.is-in) img:last-child{transform:rotate(0deg) translateX(-108%); opacity:0}
.nsr-tov-dl__abanico img:nth-child(2){position:relative; z-index:2; width:193px}

.nsr-tov-dl__pair{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.nsr-tov-dl__card{display:flex; align-items:center; gap:16px;
  background:var(--panel); border:1px solid var(--hair-2); border-radius:4px;
  padding:14px 16px; text-align:left; min-width:250px}
.nsr-tov-dl__b{min-width:0}
.nsr-tov-dl__ct{font:700 15px/1.2 var(--serif); color:#fff}
.nsr-tov-dl__cs{font-size:12.8px; color:var(--ink-dim); margin:0}
/* El prefijo .nsr-tov NO sobra: `.nsr-tov a{color:inherit}` pesa (0,1,1) y le gana a una
   clase suelta (0,1,0). Sin él, este botón hereda el gris claro del texto y el icono queda
   a 1,18:1 sobre el plateado, o sea invisible. Es la TERCERA vez que muerde en esta landing
   (antes: los botones y los enlaces __pdf). Todo <a> con color propio lo necesita. */
.nsr-tov .nsr-tov-dl__go{display:inline-flex; align-items:center; gap:9px; flex:0 0 auto; margin-left:auto;
  font:700 11.5px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  padding:12px 16px; border-radius:2px; border:1px solid var(--blue);
  background:linear-gradient(180deg,var(--plata-hi),var(--plata-lo)); color:var(--plata-ink)}
.nsr-tov-dl__go svg{width:14px; height:14px; fill:currentColor; flex:0 0 auto}

/* ================= CIERRE ================= */
.nsr-tov-end{padding:104px 0; overflow:hidden; background:#05080c; text-align:center}
.nsr-tov-end__art{position:absolute; inset:-90px 0; background-position:center 46%; background-size:cover; opacity:.42;
  transform:translate3d(0,var(--par,0px),0); will-change:transform}
.nsr-tov-end__veil{position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(5,8,12,.72),rgba(5,8,12,.97) 72%)}
.nsr-tov-end__in{position:relative; z-index:2; max-width:760px; margin:0 auto; padding:0 24px}
.nsr-tov-end__t{font:700 clamp(30px,4.2vw,48px)/1.06 var(--serif); color:#fff}
.nsr-tov-end__in .nsr-tov-lead{margin:0 auto 28px}

/* ================= PIE ================= */
.nsr-tov-footer{background:linear-gradient(180deg,var(--void),#080d13); border-top:2px solid var(--plata); padding:26px 0 18px}
.nsr-tov-footer__in{padding:0 48px; display:flex; flex-wrap:wrap; gap:16px 40px; align-items:center; justify-content:center}
/* Centrado, no space-between: ese reparto era para la marca a un lado y los enlaces
   al otro. Sin la marca, `space-between` con un solo hijo lo dejaba pegado a la izquierda. */
/* un flex en columna estira los hijos: si algún día esto lleva imagen, flex-start + flex:none */
.nsr-tov-footer__links{display:flex; gap:20px; flex-wrap:wrap}
.nsr-tov-footer__links a{font:600 12px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim)}
.nsr-tov-footer__links a:hover{color:#fff}
.nsr-tov-footer__copy{margin:22px 48px 0; padding-top:16px; border-top:1px solid var(--hair-2);
  font-size:12.5px; color:var(--muted)}

/* ---------- reveal ---------- */
.nsr-tov-fade{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.nsr-tov-fade.in{opacity:1; transform:none}

/* ===== Cajón lateral del carrito + desplegable de cuenta =====
   Colores de ToV; el ORO es el acento comercial. */
#module-nosolorol_tov-display #header .cart_block,
#module-nosolorol_tov-display #header .cart_block .top-block-cart,
#module-nosolorol_tov-display #header .cart_block .cart-summary,
#module-nosolorol_tov-display #header .user-info .dropdown-menu{background:#111926 !important}
#module-nosolorol_tov-display #header .cart_block{border-left:1px solid #2c3d4f !important; box-shadow:-32px 0 90px -30px #000 !important}
#module-nosolorol_tov-display #header .cart_block .top-block-cart{border-bottom:1px solid #22303f !important; color:#fff !important; font-family:system-ui,-apple-system,"Segoe UI",sans-serif !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.12em}
#module-nosolorol_tov-display #header .cart_block .cart-item{border-bottom:1px solid #22303f !important}
#module-nosolorol_tov-display #header .cart_block,
#module-nosolorol_tov-display #header .cart_block a,
#module-nosolorol_tov-display #header .cart_block .product-name{color:#d8dade !important}
#module-nosolorol_tov-display #header .cart_block .product-price,
#module-nosolorol_tov-display #header .cart_block .value,
#module-nosolorol_tov-display #header .cart_block .cart-total .value{color:#63b6f0 !important; font-variant-numeric:tabular-nums}
#module-nosolorol_tov-display #header .cart_block .remove-from-cart{color:#98a2ad !important}
#module-nosolorol_tov-display #header .cart_block .remove-from-cart:hover{color:#63b6f0 !important}
#module-nosolorol_tov-display #header .cart_block .fsb-bar-progress{background:#0f5d99 !important}
/* Botones del cajón: el tema los pone en cajas de ~182px y caben JUSTOS. Vampiro usa Oswald
   (condensada) y aguanta 15px + .12em; con la sans del sistema "Pasar por caja" se va a 217px
   y se desborda. Por eso cuerpo y tracking van contenidos: es para que quepan. */
#module-nosolorol_tov-display #header .cart_block .btn-primary,
#module-nosolorol_tov-display #header .cart_block .btn{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif !important; font-weight:700 !important;
  font-size:11.5px !important; letter-spacing:.05em !important; text-transform:uppercase !important;
  padding:11px 8px !important; white-space:nowrap !important; border-radius:2px !important}
#module-nosolorol_tov-display #header .cart_block .btn-primary{background:linear-gradient(180deg,#eaeaf2,#a8a8ba) !important; border:1px solid #0f5d99 !important; color:#0c2438 !important}
#module-nosolorol_tov-display #header .cart_block .btn-primary:hover{filter:brightness(1.1) !important}
#module-nosolorol_tov-display #header .user-info .dropdown-menu{border:1px solid #2c3d4f !important; border-top:2px solid #0f5d99 !important; border-radius:2px !important; box-shadow:0 24px 60px -24px #000 !important}
#module-nosolorol_tov-display #header .user-info .dropdown-menu a{color:#d8dade !important}
#module-nosolorol_tov-display #header .user-info .dropdown-menu a:hover{background:rgba(15,93,153,.28) !important; color:#fff !important}

/* ================= MODAL "añadido al carrito" =================
   Cuelga del <body>, FUERA de .nsr-tov: aquí NO valen las variables, van colores literales. */
#module-nosolorol_tov-display #blockcart-modal .modal-content{background:#111926 !important; border:1px solid #2c3d4f !important; border-top:2px solid #0f5d99 !important; border-radius:3px !important; box-shadow:0 40px 100px -30px #000, 0 0 60px -20px rgba(15,93,153,.45)}
#module-nosolorol_tov-display #blockcart-modal .modal-header{border-bottom:1px solid #22303f !important; background:transparent !important}
#module-nosolorol_tov-display #blockcart-modal .modal-title{font:700 13px/1.25 system-ui,-apple-system,"Segoe UI",sans-serif !important; letter-spacing:.14em; text-transform:uppercase; color:#fff !important}
#module-nosolorol_tov-display #blockcart-modal .modal-body{color:#98a2ad}
#module-nosolorol_tov-display #blockcart-modal .modal-body a{color:#d8dade}
#module-nosolorol_tov-display #blockcart-modal .product-name{color:#fff}
#module-nosolorol_tov-display #blockcart-modal .close,
#module-nosolorol_tov-display #blockcart-modal .close span{color:#98a2ad !important; opacity:1 !important; text-shadow:none !important}
#module-nosolorol_tov-display #blockcart-modal .close:hover span{color:#63b6f0 !important}
#module-nosolorol_tov-display #blockcart-modal .product-price,
#module-nosolorol_tov-display #blockcart-modal .cart-content .value{color:#63b6f0 !important; font-variant-numeric:tabular-nums}
#module-nosolorol_tov-display #blockcart-modal .btn-primary{background:linear-gradient(180deg,#eaeaf2,#a8a8ba) !important; color:#0c2438 !important; border:1px solid #0f5d99 !important; border-radius:2px !important; font:700 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif !important; letter-spacing:.12em !important; text-transform:uppercase !important; box-shadow:0 12px 26px -12px rgba(15,93,153,.9)}
#module-nosolorol_tov-display #blockcart-modal .btn-primary:hover{filter:brightness(1.1) !important}
#module-nosolorol_tov-display #blockcart-modal .btn-secondary{background:transparent !important; color:#d8dade !important; border:1px solid #2c3d4f !important; border-radius:2px !important; font:700 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif !important; letter-spacing:.12em !important; text-transform:uppercase !important}
#module-nosolorol_tov-display #blockcart-modal .btn-secondary:hover{border-color:#2f8fd6 !important; color:#fff !important; background:transparent !important}

/* ================= RESPONSIVE ================= */
@media (max-width:960px){
  .nsr-tov-intro__grid,.nsr-tov-est__in{grid-template-columns:1fr; gap:34px}
  /* el mockup arriba SIEMPRE, aunque el orden del marcado alterne */
  /* OJO: la media query NO añade especificidad. Las reglas de escritorio de abajo ganan a
     estas si son más específicas, y por eso hay que repetirlas con su mismo peso:
       .nsr-tov-libro--pant .nsr-tov-libro__in (0,2,0)  le gana a  .nsr-tov-libro__in (0,1,0)
       #guia .nsr-tov-libro__mk               (1,1,0)  le gana a todo lo de aquí
     Sin esto: la Pantalla se quedaba en 1.6fr/1fr (imagen diminuta + columna kilométrica),
     la Guía salía empujada 55px y el Cubil pegado a la izquierda. */
  .nsr-tov-libro__in,
  .nsr-tov-libro--pant .nsr-tov-libro__in{grid-template-columns:1fr; gap:30px}
  .nsr-tov-libro__mk{order:-1}
  /* Sin viaje lateral: aquí el libro va arriba y ocupa el ancho entero, así que venir de
     fuera por un lado no significa nada. Se queda el giro y una subida corta. */
  .nsr-tov-gira,
  .nsr-tov-libro--alt .nsr-tov-gira{transform:translateY(26px) rotateY(-20deg) scale(.93)}
  .nsr-tov-gira.is-in{transform:none}
  .nsr-tov-libro__mk,
  .nsr-tov-libro--alt .nsr-tov-libro__mk,
  .nsr-tov-libro--pant .nsr-tov-libro__mk{justify-content:center}
  #guia .nsr-tov-libro__mk{justify-content:center; padding-left:0}
  /* El libro NO está centrado dentro de su propio fichero: en mk-guia el cuerpo va de x=115
     a 558 sobre un lienzo de 560, o sea +10,1% a la derecha; en mk-cubil, +8,3%. Los píxeles
     de la izquierda no están vacíos, llevan una sombra tenue — por eso medir el bbox por
     alfa dice "centrado" y engaña; hay que medir la MASA (alfa>200).
     En escritorio esto se compensa con el encuadre de cada sección (el padding-left:55px de
     #guia); en móvil, que van centradas, hay que descontarlo aquí.
     Si algún día se recortan los mockups, esto sobra. */
  #guia .nsr-tov-libro__mk img{transform:translateX(-10.1%)}
  #cubil .nsr-tov-libro__mk img{transform:translateX(-8.3%)}
  .nsr-tov-comp__grid{grid-template-columns:1fr}
  .nsr-tov-kob__row{grid-template-columns:repeat(3,1fr)}
  /* los sellos: carril con scroll, sin envolver, y algo más pequeños */
  /* El padding lateral NO es decorativo: el nombre va centrado en su sello (translateX(-50%))
     y se sale por los lados. Con 0, el overflow del carril le come la primera letra: se leía
     "ÁRBARO" en vez de "BÁRBARO". 26px cubre a la más larga, EXPLORADOR. */
  .nsr-tov-cls__list{flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    scrollbar-width:none; margin-bottom:30px; padding:4px 26px 22px}
  .nsr-tov-cls__list::-webkit-scrollbar{display:none}
  .nsr-tov-cls__list button{width:43px; height:43px}
  .nsr-tov-cls__list button i{width:23px; height:23px}
  /* MÓVIL: sin escalar (--k:1) y la figura anclada al borde; el texto debajo, sobre papel liso */
  .nsr-tov-cls__view{--k:1}
  .nsr-tov-cls__figure{left:-70px; width:auto; right:auto}
  .nsr-tov-cls__scrim{left:0; width:100%;
    background:linear-gradient(0deg, var(--parch) 42%, rgba(242,233,216,.9) 54%, rgba(242,233,216,0) 76%)}
  .nsr-tov-cls__view::after{display:none}
  /* La banda crece para que el retrato asome POR ENCIMA de la ficha: con 600px la caja se
     comía el 76% del alto y del bárbaro solo se veía la punta de la melena. */
  .nsr-tov-cls__grid{grid-template-columns:1fr; align-items:end; min-height:760px; padding:0 18px}
  /* El padding lateral era 0 y el texto tocaba el borde del papel. Se reduce respecto al
     escritorio (34/32), pero cero nunca: la ficha TIENE fondo propio y necesita su aire. */
  /* align-self:end es OBLIGATORIO: el escritorio le pone align-self:center, y eso gana al
     align-items:end del grid. Sin esto la caja se queda centrada, deja 129px muertos debajo
     y subir el min-height de la banda no sirve de nada (probado). */
  .nsr-tov-cls__body{grid-column:1; align-self:end; padding:22px 20px; margin-bottom:26px}
  /* Los nombres de los sellos miden mucho más que su círculo de 43px y se solapaban
     ("DRUIDAGUERREROPALADÍNHEC"). En móvil solo se anuncia el activo. */
  .nsr-tov-cls__list button b{opacity:0; transition:opacity .16s}
  .nsr-tov-cls__list button.is-on b{opacity:1}
  /* --fl-y centra las flechas sobre los SELLOS y no sobre el carril: el carril lleva 22px de
     padding-bottom para que quepan las etiquetas (que van absolutas), así que su centro cae
     9px por debajo del de los sellos. 4px de padding + medio sello.
     SIN padding lateral: las flechas se superponen. Reservarles hueco le robaba 60px al
     deslizador justo donde no sobra ni uno. */
  .nsr-tov-cls__stage .nsr-tov-rail{--fl-y:25.5px}
  .nsr-tov-bf__in{justify-content:flex-start}
  /* BANDAS CINEMÁTICAS EN MÓVIL: los velos izq→dcha dejan de servir. A este ancho el texto
     ocupa el 87% de la pantalla, así que un degradado horizontal o no lo cubre (se lee
     encima del arte) o lo tapa entero y mata la ilustración. No hay punto medio.
     La salida es girar el eje: texto ABAJO y velo de abajo arriba. Así el arte respira en la
     mitad de arriba y el texto se apoya en negro sólido.
     Mismo criterio que el hero, la banda de clases, la suscripción y Black Flag. */
  .nsr-tov-cine{align-items:flex-end; min-height:clamp(520px,86vh,720px)}
  .nsr-tov-cine__in{padding-bottom:34px}
  .nsr-tov-cine--right .nsr-tov-cine__in{justify-content:flex-start}
  .nsr-tov-cine__copy{max-width:none}
  .nsr-tov-cine--left .nsr-tov-cine__veil,
  .nsr-tov-cine--right .nsr-tov-cine__veil{background:
    linear-gradient(0deg, var(--void) 26%, rgba(5,8,12,.92) 48%, rgba(5,8,12,.55) 68%, rgba(5,8,12,.1) 90%),
    linear-gradient(180deg, rgba(5,8,12,.5) 0%, transparent 22%)}
  /* SUSCRIPCIÓN: una sola columna, y la ilustración deja de ser panel lateral para pasar a
     fondo de toda la sección — a este ancho, una columna de arte no cabe. */
  .nsr-tov-ab__in{grid-template-columns:1fr; gap:0}
  .nsr-tov-ab__block{grid-column:1}
  .nsr-tov-ab__art{width:100%}
  .nsr-tov-ab__veil{background:
    linear-gradient(0deg, var(--night) 30%, rgba(17,25,38,.9) 58%, rgba(17,25,38,.74) 100%)}
  .nsr-tov-ab__H{grid-template-columns:1fr; gap:26px; justify-items:center}
  .nsr-tov-ab__ficha{width:100%}
  .nsr-tov-ab__res{max-width:none}
  .nsr-tov-ab__tira{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:4px 0}
  .nsr-tov-ab__tira::-webkit-scrollbar{display:none}

  .nsr-tov-ab__thumb{flex:0 0 auto}
}
@media (max-width:640px){
  /* En móvil el abanico no cabe: se queda la hoja de en medio sola. */
  .nsr-tov-dl__abanico img:first-child,.nsr-tov-dl__abanico img:last-child{display:none}
  .nsr-tov-dl__abanico img:nth-child(2){width:min(230px,60vw)}
  /* En móvil el botón se queda en icono: la palabra sigue en el DOM (no display:none) para
     que los lectores de pantalla la anuncien, solo se oculta a la vista. */
  .nsr-tov-dl__card{min-width:0; width:100%}
  .nsr-tov-dl__go{padding:12px}
  .nsr-tov-dl__go span{position:absolute; width:1px; height:1px; clip-path:inset(50%);
    overflow:hidden; white-space:nowrap}
  .nsr-tov-ab__cover img{width:min(310px,72vw)}
  .nsr-tov-ab__form .nsr-tov-btn{width:100%}
  /* MÓVIL · hero: el arte arriba, el texto abajo sobre fondo sólido. El padding-top decide
     cuánto arte se ve; a más de 118px el botón se cae del primer pantallazo. */
  .nsr-tov-hero{min-height:auto}
  .nsr-tov-hero__art{background-position:58% 26%; height:54%; inset:auto 0 auto 0; top:0}
  .nsr-tov-hero__veil{background:linear-gradient(0deg,var(--void) 42%,rgba(5,8,12,.55) 60%,rgba(5,8,12,.1) 100%)}
  .nsr-tov-hero__in{padding:118px 24px 40px}
  .nsr-tov-hero__logo{width:min(275px,68%); margin-bottom:16px}
  .nsr-tov-hero__flag{margin-bottom:16px}
  .nsr-tov-h1{font-size:clamp(24px,6.6vw,30px)}
  .nsr-tov-hero__lead{font-size:15.5px; margin-bottom:20px}
  .nsr-tov-hero__trust{margin-top:16px}
  .nsr-tov-cta .nsr-tov-btn,.nsr-tov-cta form{flex:1 1 100%}
  .nsr-tov-cta form .nsr-tov-btn{width:100%}
  .nsr-tov-kob__row{grid-template-columns:repeat(2,1fr)}
  .nsr-tov-est__cover img{max-width:100%}
  .nsr-tov-bf{padding:70px 0}
  .nsr-tov-bf__art{opacity:.3}
  .nsr-tov-bf__veil{background:linear-gradient(0deg,#05080c 34%,rgba(5,8,12,.72) 70%,rgba(5,8,12,.35) 100%)}
  .nsr-tov-footer__in{padding:0 20px}
  .nsr-tov-footer__copy{margin:18px 20px 0}
}
@media (prefers-reduced-motion:reduce){
  .nsr-tov *{animation:none !important; transition:none !important}
  .nsr-tov-fade{opacity:1; transform:none}
}