/* Landing Vampiro 5ª — GÓTICO-PUNK v3 (imágenes visibles + parallax por capas). Ruta B. */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap'); .nsr-vmp{ --void:#08070a; --panel:#0e0b12; --panel-2:#120d16; --hair:#241a2b; --hair-2:#33243d; --ink:#eae7ef; --ink-dim:#c4bfce; --muted:#9089a0; --faint:#6a6478; --blood:#9b1c30; --blood-hi:#c8394f; --neon:#c8102e; --neon-hi:#ff2e40; --ember:#e08a2b; --feral:#8bd06a; --osw:"Oswald",Impact,system-ui,sans-serif; --man:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); font-family:var(--man); line-height:1.6; } /* 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-vmp-oculto{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0} .nsr-vmp strong{color:#fff; font-weight:700} .nsr-vmp a{color:var(--ink)} /* ---------- integración con el tema (solo en /vampiro) ---------- */ #module-nosolorol_vampiro-display nav.breadcrumb{display:none} #module-nosolorol_vampiro-display #wrapper{padding:0; margin:0; background:#08070a; overflow-x:clip; display:flow-root} /* el tema deja ~25px de aire fantasma sobre el contenedor de contenido; lo pegamos al header */ #module-nosolorol_vampiro-display #wrapper > .container{margin-top:-25px} /* contenedor de avisos flash del tema: en la landing sobra y mete un hueco */ #module-nosolorol_vampiro-display #notifications{display:none !important} #module-nosolorol_vampiro-display #content.page-content{padding:0; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none} /* Barra fina flotante sobre la cabecera del tema. CLAVE: el desenfoque va en ::before, NO en #header — porque backdrop-filter/filter crean bloque contenedor y romperían el cajón lateral (fixed) del carrito, dejándolo atado a la altura de la barra en vez del viewport. */ #module-nosolorol_vampiro-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(200,16,46,.16); transition:border-color .25s ease} #module-nosolorol_vampiro-display #header::before{ content:""; position:absolute; inset:0; z-index:0; background:rgba(8,7,10,.14); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:background .25s ease} #module-nosolorol_vampiro-display #header.nsr-scrolled::before{background:rgba(8,7,10,.82)} #module-nosolorol_vampiro-display #header.nsr-scrolled{border-bottom-color:rgba(200,16,46,.4)} /* ocultar lo que no queremos */ #module-nosolorol_vampiro-display nav.header-nav, #module-nosolorol_vampiro-display #nsr-drawer, #module-nosolorol_vampiro-display #nsr-drawer-overlay, #module-nosolorol_vampiro-display #_desktop_main_menu, #module-nosolorol_vampiro-display #header .header-top-inner, #module-nosolorol_vampiro-display #header #search_widget, #module-nosolorol_vampiro-display #header .head-wishlist, #module-nosolorol_vampiro-display #header .header-top .overlay, #module-nosolorol_vampiro-display #header button[aria-label*="men" i], #module-nosolorol_vampiro-display #nsr-hamburger-fixed{display:none !important} /* fila fina: flex, contenido por encima del ::before */ #module-nosolorol_vampiro-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_vampiro-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} /* en móvil, sin hamburguesa, pegamos el logo a la izquierda (menos padding lateral) */ @media (max-width:600px){#module-nosolorol_vampiro-display #header .header-top .container{padding-left:16px !important; padding-right:16px !important}} #module-nosolorol_vampiro-display #header .header_logo, #module-nosolorol_vampiro-display #header #desktop_cart, #module-nosolorol_vampiro-display #header .user-info{width:auto !important; max-width:none !important; flex:0 0 auto !important; float:none !important} /* el tema centra el carrito con margin:30px 0 -> fuera (el cajón es fixed, no le afecta) */ #module-nosolorol_vampiro-display #header .blockcart, #module-nosolorol_vampiro-display #header .blockcart-header, #module-nosolorol_vampiro-display #header .user-info{margin:0 !important} #module-nosolorol_vampiro-display #header .header_logo{order:0; position:static !important; margin:0 auto 0 0 !important} #module-nosolorol_vampiro-display #header .header_logo h1{margin:0} /* logo ~25% más grande en desktop */ #module-nosolorol_vampiro-display #header .logo{height:33px !important; width:auto !important; margin:0 !important} #module-nosolorol_vampiro-display #header .user-info{order:1} #module-nosolorol_vampiro-display #header #desktop_cart{order:2} /* iconos en claro + contador del carrito en rojo sangre (no amarillo) */ #module-nosolorol_vampiro-display #header .user-info, #module-nosolorol_vampiro-display #header .user-info *, #module-nosolorol_vampiro-display #header .blockcart, #module-nosolorol_vampiro-display #header .blockcart *{color:#eae7ef !important} /* el CONTADOR (burbuja) sí lleva fondo del acento; el IMPORTE va sin fondo, solo texto */ #module-nosolorol_vampiro-display #header .blockcart .mobile_count{background:#c8102e !important; color:#fff !important} #module-nosolorol_vampiro-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 acento de la landing (rojo sangre). */ #module-nosolorol_vampiro-display #header #desktop_cart:hover .shopping-cart .icon, #module-nosolorol_vampiro-display #header .user-info:hover .user-info-title{background-color:#ff2e40 !important} /* ===== Cajón lateral del carrito + desplegable de "mi cuenta", con nuestro estilo ===== */ /* fondos a nuestro negro; el cajón con filo izquierdo y sombra */ #module-nosolorol_vampiro-display #header .cart_block, #module-nosolorol_vampiro-display #header .cart_block .top-block-cart, #module-nosolorol_vampiro-display #header .cart_block .cart-summary, #module-nosolorol_vampiro-display #header .user-info .dropdown-menu{background:#0e0b12 !important} #module-nosolorol_vampiro-display #header .cart_block{border-left:1px solid #33243d !important; box-shadow:-32px 0 90px -30px #000 !important} #module-nosolorol_vampiro-display #header .cart_block .top-block-cart{border-bottom:1px solid #241a2b !important; color:#fff !important; font-family:"Oswald",Impact,sans-serif !important; text-transform:uppercase; letter-spacing:.04em} #module-nosolorol_vampiro-display #header .cart_block .cart-item{border-bottom:1px solid #241a2b !important} #module-nosolorol_vampiro-display #header .cart_block, #module-nosolorol_vampiro-display #header .cart_block a, #module-nosolorol_vampiro-display #header .cart_block .product-name{color:#eae7ef !important} /* precios en rojo brillante */ #module-nosolorol_vampiro-display #header .cart_block .product-price, #module-nosolorol_vampiro-display #header .cart_block .value, #module-nosolorol_vampiro-display #header .cart_block .cart-total .value{color:#ff2e40 !important; font-variant-numeric:tabular-nums} #module-nosolorol_vampiro-display #header .cart_block .remove-from-cart{color:#9089a0 !important} #module-nosolorol_vampiro-display #header .cart_block .remove-from-cart:hover{color:#ff2e40 !important} /* barra de envío gratis + botones: rojo sangre, sin amarillo */ #module-nosolorol_vampiro-display #header .cart_block .fsb-bar-progress{background:#c8102e !important} #module-nosolorol_vampiro-display #header .cart_block .btn-primary{background:#c8102e !important; border:1px solid #c8102e !important; color:#fff !important; border-radius:0 !important; font-family:"Oswald",Impact,sans-serif !important; font-weight:700 !important; letter-spacing:.09em !important; text-transform:uppercase !important} #module-nosolorol_vampiro-display #header .cart_block .btn-primary:hover{filter:brightness(1.09) !important} /* desplegable de cuenta: filo rojo arriba, enlaces claros con hover rojo */ #module-nosolorol_vampiro-display #header .user-info .dropdown-menu{border:1px solid #33243d !important; border-top:2px solid #c8102e !important; border-radius:0 !important; box-shadow:0 24px 60px -24px #000 !important} #module-nosolorol_vampiro-display #header .user-info .dropdown-menu a{color:#eae7ef !important} #module-nosolorol_vampiro-display #header .user-info .dropdown-menu a:hover{background:rgba(200,16,46,.16) !important; color:#fff !important} /* el pie del tema lo sustituimos por uno propio */ #module-nosolorol_vampiro-display #footer{display:none !important} /* full-bleed */ .nsr-vmp-hero,.nsr-vmp-band,.nsr-vmp-cine,.nsr-vmp-footer{width:100vw; margin-left:calc(50% - 50vw); position:relative} .nsr-vmp-band__inner,.nsr-vmp-hero__inner,.nsr-vmp-cine__inner{max-width:1180px; margin:0 auto; padding:0 40px; position:relative; z-index:3} /* fundidos al hacer scroll */ .nsr-vmp-fade{opacity:0; transform:translateY(24px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1)} .nsr-vmp-fade.in{opacity:1; transform:none} @media (prefers-reduced-motion:reduce){.nsr-vmp-fade{opacity:1; transform:none; transition:none}} /* ================= HERO ================= */ /* --nsr-bar = alto de la barra fija; el hero crece hacia arriba esa cantidad y añade ese padding-top, para que su contenido quede centrado en la zona visible (bajo la barra). */ .nsr-vmp{--nsr-bar:52px} .nsr-vmp-hero{min-height:calc(clamp(560px,84vh,860px) + var(--nsr-bar) - 30px); padding-top:var(--nsr-bar); display:flex; align-items:center; overflow:hidden; background:var(--void)} .nsr-vmp-hero__bg{display:none} .nsr-vmp-hero::before{content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, var(--void) 4%, rgba(8,7,10,.86) 40%, rgba(8,7,10,.34) 74%, rgba(8,7,10,.66) 100%), linear-gradient(180deg, rgba(8,7,10,.5) 0%, transparent 26%, transparent 62%, var(--void) 100%), radial-gradient(70% 60% at 88% -6%, rgba(200,16,46,.34), transparent 55%)} .nsr-vmp-hero__inner{display:grid; grid-template-columns:1fr .74fr; gap:48px; align-items:center; width:100%; padding-top:41px; padding-bottom:41px} .nsr-vmp-eyebrow{display:inline-block; font:700 11px/1 var(--osw); letter-spacing:.22em; text-transform:uppercase; color:var(--void); background:var(--neon); padding:7px 13px; margin:0 0 22px; transform:skewX(-8deg)} .nsr-vmp-eyebrow span{display:inline-block; transform:skewX(8deg)} .nsr-vmp-h1{font:700 clamp(30px,6.4vw,80px)/.94 var(--osw); text-transform:uppercase; letter-spacing:.004em; margin:0; color:#fff; text-shadow:0 4px 44px rgba(0,0,0,.65); overflow-wrap:break-word} .nsr-vmp-h1 .r{color:var(--neon-hi); text-shadow:0 0 30px rgba(200,16,46,.72)} .nsr-vmp-lead{font:500 18px/1.58 var(--man); color:var(--ink-dim); margin:24px 0 32px; max-width:42ch} .nsr-vmp-cta{display:flex; flex-wrap:wrap; gap:12px} .nsr-vmp-cta--center{justify-content:center; margin-top:30px} .nsr-vmp-btn{display:inline-block; font:700 13px/1 var(--osw); letter-spacing:.14em; text-transform:uppercase; padding:17px 32px; background:var(--neon); color:#fff; text-decoration:none; box-shadow:0 0 0 1px var(--neon), 0 14px 36px -8px rgba(200,16,46,.6); transition:transform .12s, box-shadow .12s} .nsr-vmp-btn:hover{transform:translateY(-2px); box-shadow:0 0 0 1px var(--neon-hi), 0 18px 44px -8px rgba(200,16,46,.78)} .nsr-vmp-btn--ghost{background:rgba(8,7,10,.4); color:var(--ink); box-shadow:inset 0 0 0 1px var(--hair-2)} .nsr-vmp-btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--neon); transform:translateY(-2px)} .nsr-vmp-trust{margin:26px 0 0; font:600 12px/1 var(--osw); letter-spacing:.14em; text-transform:uppercase; color:#b0a8bd} .nsr-vmp-hero__art{position:relative} .nsr-vmp-hero__art img{width:100%; filter:contrast(1.06) saturate(1.05); border:1px solid var(--hair-2); box-shadow:0 40px 90px -24px #000, 0 0 90px -14px rgba(200,16,46,.5)} /* ================= BANDAS CINEMÁTICAS ================= */ .nsr-vmp-cine{min-height:clamp(440px,68vh,640px); display:flex; align-items:center; overflow:hidden; background:var(--void)} .nsr-vmp-cine--tall{min-height:clamp(480px,74vh,720px)} .nsr-vmp-cine__img{position:absolute; inset:-14% 0; z-index:0; background-size:cover; background-position:center; filter:saturate(1.05) contrast(1.03); will-change:transform} .nsr-vmp-cine::before{content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, rgba(8,7,10,.92) 0%, rgba(8,7,10,.6) 40%, rgba(8,7,10,.12) 72%, transparent 100%), linear-gradient(180deg, var(--void) 0%, transparent 20%, transparent 80%, var(--void) 100%)} .nsr-vmp-cine__inner{padding-top:60px; padding-bottom:60px} /* variante centrada (clan, cierre): velo más equilibrado */ .nsr-vmp-cine--center::before,.nsr-vmp-cine--outro::before{background: linear-gradient(180deg, var(--void) 0%, rgba(8,7,10,.42) 30%, rgba(8,7,10,.5) 70%, var(--void) 100%), radial-gradient(90% 80% at 50% 50%, rgba(8,7,10,.28), rgba(8,7,10,.62))} .nsr-vmp-quote{font:600 clamp(26px,3.6vw,46px)/1.12 var(--osw); text-transform:none; letter-spacing:.005em; color:#fff; max-width:20ch; margin:14px 0 0; text-shadow:0 4px 40px rgba(0,0,0,.6)} .nsr-vmp-quote .r{color:var(--neon-hi); display:block; text-shadow:0 0 26px rgba(200,16,46,.6)} /* ================= BANDAS NORMALES ================= */ .nsr-vmp-band{padding:84px 0; background:var(--void)} .nsr-vmp-band--panel{background:linear-gradient(180deg,var(--panel),var(--void))} .nsr-vmp-kicker{font:700 12px/1 var(--osw); letter-spacing:.2em; text-transform:uppercase; color:var(--neon-hi); margin:0 0 14px} .nsr-vmp-kicker::before{content:"// "; color:var(--faint)} .nsr-vmp-h2{font:600 clamp(28px,4.4vw,44px)/1.02 var(--osw); text-transform:uppercase; letter-spacing:.006em; margin:0; color:#fff} /* TÍTULOS: al partirse en varias líneas se reparten equilibrados, también en móvil. OJO: esto va SOLO en títulos. El texto de cuerpo (.nsr-vmp-prose/-lead) nunca lleva balance ni pretty: acortan las líneas y parece que no llenan el ancho disponible. */ .nsr-vmp-h1,.nsr-vmp-h2,.nsr-vmp-quote,.nsr-vmp-clanpick__name{text-wrap:balance} .nsr-vmp-prose{font:400 16.5px/1.62 var(--man); color:var(--ink-dim); max-width:62ch; margin:18px 0 0} .nsr-vmp-prose--center{margin-left:auto; margin-right:auto; text-align:center} .nsr-vmp-note{margin:28px 0 0; font:500 14px/1.5 var(--man); color:var(--muted); text-align:center} .nsr-vmp-link{color:var(--neon-hi); text-decoration:none; font-weight:700} .nsr-vmp-link:hover{text-decoration:underline} .nsr-vmp-center{text-align:center; display:flex; flex-direction:column; align-items:center} /* ================= SPLIT imagen + texto ================= */ .nsr-vmp-split{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center} .nsr-vmp-split__media{margin:0; position:relative} .nsr-vmp-split__media::before{content:""; position:absolute; inset:-18px; z-index:0; background:radial-gradient(60% 60% at 30% 40%, rgba(200,16,46,.3), transparent 70%); filter:blur(26px)} .nsr-vmp-split__media img{position:relative; z-index:1; width:100%; display:block; border:1px solid var(--hair-2); box-shadow:0 30px 70px -28px #000} .nsr-vmp-split__body .nsr-vmp-prose{max-width:52ch} /* ================= KIT de inicio ================= */ /* ---------- AVENTURA INICIAL ---------------------------------------------------------- Aqui no se ensena la portada, se ensena su arte. La portada traia impreso su propio titular ("Monstruo(s): una guia de iniciacion a...") repitiendo el de la seccion, y como objeto solo sabia ser un rectangulo. El arte va entero y a su tamano (contain, no cover: recortarlo lo dejaba en dedos sueltos), pegado a la derecha, y muere en negro sobre el texto. Origen: capa de imagen del PDF de imprenta, que trae el arte limpio -sin los logos de VAMPIRO y WoD ni el titular, que van en vector encima-. */ #kit{position:relative; overflow:hidden; background:var(--void)} .nsr-vmp-kit__art{position:absolute; z-index:0; inset:0 0 0 34%; background:url(../img/kit-arte.webp) right center/contain no-repeat; /* El fundido va SOBRE EL ARTE y no sobre un velo aparte: es su borde el que se disuelve, asi que cae donde cae el arte a cualquier ancho. En un velo a toda la franja se despegaria. La rampa llega al 40% floja a proposito: ahi debajo todavia pasa el parrafo, y con el arte por encima del 30% se le lee el brazo detras de las palabras. */ -webkit-mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.3) 40%, #000 66%); mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.3) 40%, #000 66%)} /* El negro del arte no es negro (22,18,14), asi que contra la franja recorta un rectangulo por arriba y por abajo. Este velo lo disuelve; es corto para que no se lea como difuminado. */ #kit::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, var(--void), transparent 13%, transparent 87%, var(--void))} #kit .nsr-vmp-band__inner{position:relative; z-index:2} /* Sin caja: la etiqueta ya no cuelga de un borde que no existe, va en el flujo. */ .nsr-vmp-kit{margin:30px 0 0; max-width:560px} .nsr-vmp-kit__badge{display:inline-block; margin:0 0 14px; font:700 11px/1 var(--osw); letter-spacing:.14em; text-transform:uppercase; background:var(--neon); color:#fff; padding:7px 14px; transform:skewX(-8deg)} .nsr-vmp-kit__badge span{display:inline-block; transform:skewX(8deg)} .nsr-vmp-kit__t{font:600 24px/1.15 var(--osw); color:var(--ink); margin:0 0 4px; letter-spacing:.01em} .nsr-vmp-kit ul{list-style:none; padding:0; margin:16px 0 0; display:grid; gap:8px} .nsr-vmp-kit li{font:500 15px/1.4 var(--man); color:var(--ink-dim); padding-left:22px; position:relative} .nsr-vmp-kit li::before{content:"\25B8"; position:absolute; left:0; color:var(--neon-hi)} /* El boton, al final del argumento y a la anchura del texto, no del ancho entero: un CTA a toda la banda gritaria mas que el propio libro. */ .nsr-vmp-kit__form{margin:24px 0 0; max-width:290px} .nsr-vmp-kit__cap{font:500 11.5px/1 var(--osw); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin:10px 0 0} /* ================= LIBRO BÁSICO (ficha técnica) ================= */ .nsr-vmp-basico{background:linear-gradient(180deg,var(--void),var(--panel) 45%,var(--void))} .nsr-vmp-lb{display:grid; grid-template-columns:390px 1fr; gap:54px; align-items:center} .nsr-vmp-lb__cover{position:relative} .nsr-vmp-lb__cover::before{content:""; position:absolute; inset:-26px; z-index:0; background:radial-gradient(55% 55% at 50% 45%, rgba(200,16,46,.36), transparent 70%); filter:blur(26px)} .nsr-vmp-lb__cover img{position:relative; z-index:1; width:100%; display:block; border:1px solid var(--hair-2); box-shadow:0 30px 70px -28px #000} .nsr-vmp-lb__tag{position:absolute; top:14px; left:-5px; z-index:2; font:700 15px/1 var(--osw); color:#fff; background:var(--neon); padding:8px 14px; transform:skewX(-8deg); box-shadow:0 8px 20px -8px rgba(200,16,46,.75); font-variant-numeric:tabular-nums} .nsr-vmp-lb__body .nsr-vmp-prose{max-width:54ch} .nsr-vmp-lb__specs{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 2px} .nsr-vmp-lb__pill{display:inline-flex; align-items:center; font:700 11px/1 var(--osw); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); border:1px solid var(--hair-2); padding:8px 12px; background:rgba(255,255,255,.02)} .nsr-vmp-feats{list-style:none; padding:0; margin:22px 0 4px; display:grid; gap:10px; max-width:54ch} .nsr-vmp-feats li{font:500 15px/1.4 var(--man); color:var(--ink-dim); padding-left:24px; position:relative} .nsr-vmp-feats li::before{content:"◆"; position:absolute; left:0; color:var(--neon-hi); font-size:11px; top:3px} .nsr-vmp-lb__buy{display:flex; align-items:center; gap:20px; margin-top:24px; flex-wrap:wrap} .nsr-vmp-lb__price{font:800 34px/1 var(--man); color:var(--neon-hi); font-variant-numeric:tabular-nums} .nsr-vmp-lb__form{margin:0} .nsr-vmp-lb__add{display:inline-block!important; width:auto!important; font:700 12px/1 var(--osw)!important; letter-spacing:.14em!important; text-transform:uppercase!important; padding:15px 30px!important; background:var(--neon)!important; border:1px solid var(--neon)!important; border-radius:0!important; color:#fff!important; box-shadow:0 0 0 1px var(--neon), 0 12px 30px -8px rgba(200,16,46,.6); cursor:pointer; transition:filter .12s, transform .12s} .nsr-vmp-lb__add:hover{filter:brightness(1.09)!important; transform:translateY(-2px)} .nsr-vmp-lb__pdf{margin:16px 0 0; font:500 14px/1.5 var(--man); color:var(--muted)} .nsr-vmp-lb__pdf a{color:var(--neon-hi); text-decoration:none; font-weight:700} .nsr-vmp-lb__pdf a:hover{text-decoration:underline} /* ================= TARJETA DE PRODUCTO (mockup gótico-punk d3) ================= */ .nsr-vmp-pc{position:relative; display:flex; flex-direction:column; background:#0e0b12; transition:transform .16s, box-shadow .16s} .nsr-vmp-pc:hover{transform:translateY(-5px); box-shadow:0 26px 50px -28px #000} /* portada + pegatina de precio inclinada en la esquina */ .nsr-vmp-pc__cover{display:block; position:relative; aspect-ratio:3/4; overflow:hidden; background:#0a0810} .nsr-vmp-pc__cover img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1)} .nsr-vmp-pc:hover .nsr-vmp-pc__cover img{transform:scale(1.05)} .nsr-vmp-pc__tag{position:absolute; top:12px; left:-4px; z-index:2; font:700 13px/1 var(--osw); letter-spacing:.02em; color:#fff; background:var(--neon); padding:7px 13px; transform:skewX(-8deg); box-shadow:0 8px 20px -8px rgba(200,16,46,.75); font-variant-numeric:tabular-nums} .nsr-vmp-pc__name{font:600 14px/1.28 var(--man); margin:0; padding:13px 0 10px} .nsr-vmp-pc__name a{color:var(--ink); text-decoration:none} .nsr-vmp-pc__name a:hover{color:var(--neon-hi)} /* botón "Añadir" a todo el ancho, sólido magenta del tema (igual que el del Libro Básico). El margen lateral va al form; el botón a width:100% (los