/* Landing Amor de Otro Mundo — /adom. Clonada de nosolorol_vampiro (ver su LANDING.md).
Paleta muestreada de la portada y del logo del manual. Todo bajo .nsr-adom. */
.nsr-adom{
--void:#0e0208; --night:#170718; --plum:#280c27; --purple:#341034; --hair:#43204a; --hair-2:#5a2c5e;
--wine:#64143c;
--uva:#482b65; /* antetítulos sobre el papel rosa (Excel de tipografías) */
--neon:#c03060; --neon-hi:#e8497f; /* ACENTO: el magenta del corazón del logo */
--rose:#af7983; --pale:#e1babc;
--ink:#f4ecec; --ink-dim:#d3bcc2; --muted:#9d8290;
--paper:#fbf2f2; --paper-ink:#1a1016; /* papel crema del interior del libro */
--paper-rose:#f3dfe2; /* rosa empolvado: banda del Deluxe */
--amber:#e8a05a; /* SEMÁNTICO: aviso de stock. Nunca precio. */
/* TRES PAPELES, no tres fuentes por capricho (modelo del Excel de tipografías):
--voz IM Fell English · lo que el juego DICE: la tagline y las citas. Cara antigua,
de imprenta: es el grimorio. Va en regular, sin cursiva.
--titulo Gloock · lo que NOMBRA las cosas: títulos de sección y de producto.
--sans Nunito · todo lo demás. El PESO marca la función y no hay que inventar más:
200 listas · 400 cuerpo · 500 antetítulos y pies · 800 botones.
Georgia y la del sistema se quedan de reserva: si Google falla, la página se lee igual. */
--voz:"IM Fell English",Georgia,"Times New Roman",serif;
--titulo:"Gloock",Georgia,"Times New Roman",serif;
--sans:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--nsr-bar:52px;
color:var(--ink); font-family:var(--sans); line-height:1.65;
}
.nsr-adom *{box-sizing:border-box}
/* Oculto a la vista, NO para lectores de pantalla ni buscadores. Nada de display:none ni
visibility:hidden: eso lo borraría también para ellos, que es justo lo contrario. */
.nsr-adom-oculto{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}
.nsr-adom img{max-width:100%; display:block}
.nsr-adom a{color:inherit; text-decoration:none}
.nsr-adom strong{color:#fff; font-weight:700}
.nsr-adom-wrap{max-width:1160px; margin:0 auto; padding:0 24px}
/* ---------- integración con el tema (solo en /adom) ----------
Copiado de nosolorol_vampiro (ver su LANDING.md §5), adaptado al magenta de ADOM. */
#module-nosolorol_adom-display nav.breadcrumb{display:none}
#module-nosolorol_adom-display #wrapper{padding:0; margin:0; background:#0e0208; overflow-x:clip; display:flow-root}
/* el tema deja ~25px de aire fantasma sobre el contenedor de contenido; lo pegamos al header */
#module-nosolorol_adom-display #wrapper > .container{margin-top:-25px}
/* contenedor de avisos flash del tema: en la landing sobra y mete un hueco */
#module-nosolorol_adom-display #notifications{display:none !important}
#module-nosolorol_adom-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_adom-display #footer{display:none !important}
/* Barra fina flotante sobre la cabecera del tema. CLAVE: el desenfoque va en ::before, NO en
#header — 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_adom-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(192,48,96,.18); transition:border-color .25s ease}
#module-nosolorol_adom-display #header::before{
content:""; position:absolute; inset:0; z-index:0;
background:rgba(14,2,8,.16); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
transition:background .25s ease}
#module-nosolorol_adom-display #header.nsr-scrolled::before{background:rgba(14,2,8,.84)}
#module-nosolorol_adom-display #header.nsr-scrolled{border-bottom-color:rgba(192,48,96,.45)}
/* ocultar lo que no queremos. OJO: el cajón y la hamburguesa del tema van FUERA de #header
(position:fixed), así que hay que ocultarlos por su id, no como descendientes. */
#module-nosolorol_adom-display nav.header-nav,
#module-nosolorol_adom-display #nsr-drawer,
#module-nosolorol_adom-display #nsr-drawer-overlay,
#module-nosolorol_adom-display #_desktop_main_menu,
#module-nosolorol_adom-display #header .header-top-inner,
#module-nosolorol_adom-display #header #search_widget,
#module-nosolorol_adom-display #header .head-wishlist,
#module-nosolorol_adom-display #header .header-top .overlay,
#module-nosolorol_adom-display #header button[aria-label*="men" i],
#module-nosolorol_adom-display #nsr-hamburger-fixed{display:none !important}
/* fila fina: flex, contenido por encima del ::before */
#module-nosolorol_adom-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_adom-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_adom-display #header .header-top .container{padding-left:16px !important; padding-right:16px !important}}
#module-nosolorol_adom-display #header .header_logo,
#module-nosolorol_adom-display #header #desktop_cart,
#module-nosolorol_adom-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_adom-display #header .blockcart,
#module-nosolorol_adom-display #header .blockcart-header,
#module-nosolorol_adom-display #header .user-info{margin:0 !important}
#module-nosolorol_adom-display #header .header_logo{order:0; position:static !important; margin:0 auto 0 0 !important}
#module-nosolorol_adom-display #header .header_logo h1{margin:0}
#module-nosolorol_adom-display #header .logo{height:33px !important; width:auto !important; margin:0 !important}
#module-nosolorol_adom-display #header .user-info{order:1}
#module-nosolorol_adom-display #header #desktop_cart{order:2}
/* iconos en claro + contador del carrito en el magenta de ADOM (no el amarillo del tema) */
#module-nosolorol_adom-display #header .user-info,
#module-nosolorol_adom-display #header .user-info *,
#module-nosolorol_adom-display #header .blockcart,
#module-nosolorol_adom-display #header .blockcart *{color:#f4ecec !important}
/* el CONTADOR (burbuja) sí lleva fondo del acento; el IMPORTE va sin fondo, solo texto */
#module-nosolorol_adom-display #header .blockcart .mobile_count{background:#c03060 !important; color:#fff !important}
#module-nosolorol_adom-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 (magenta). */
#module-nosolorol_adom-display #header #desktop_cart:hover .shopping-cart .icon,
#module-nosolorol_adom-display #header .user-info:hover .user-info-title{background-color:#e8497f !important}
/* secciones a sangre completa (el tema las mete en un .container estrecho) */
.nsr-adom-hero,.nsr-adom-sec,.nsr-adom-paper,.nsr-adom-cine,.nsr-adom-pil,.nsr-adom-pack,.nsr-adom-dlx,.nsr-adom-coll,.nsr-adom-footer{width:100vw; margin-left:calc(50% - 50vw); position:relative}
/* ---------- tipografía base ---------- */
/* OJO: este reset pesa (0,1,1) y le gana a cualquier .nsr-adom-loquesea (0,1,0). Por eso
los margin:0 0 22px que había escritos en pack__t, dlx__t y close__h nunca se aplicaron.
El margen de los h2 se pone AQUÍ, que es donde manda. */
.nsr-adom h1,.nsr-adom h3{margin:0; font-weight:400}
/* El titular de los pilares es un h3 (bien: va anidado en su sección) pero mide 58px, o sea
que es un titular como los h2 y lleva su mismo aire. Los otros h3 son los nombres de las
tarjetas de producto, a 15px y con su hueco ajustado a mano: esos NO entran.
Va con doble clase (0,2,0) porque el reset de arriba es (0,1,1) y le ganaría. */
.nsr-adom h2,.nsr-adom .nsr-adom-pil__t{margin:0 0 10px; font-weight:400}
.nsr-adom-eyebrow{font:500 12px/1 var(--sans); letter-spacing:.28em; text-transform:uppercase; color:var(--neon-hi); margin:0 0 16px}
.nsr-adom-kick{font:500 12px/1 var(--sans); letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin:0 0 14px}
.nsr-adom-h2{font-family:var(--titulo); font-weight:400; font-size:clamp(30px,4.4vw,50px); line-height:1.06; color:#fff}
.nsr-adom-prose{font-family:var(--sans); font-weight:400; color:var(--ink-dim); font-size:18px; line-height:1.75}
/* TÍTULOS: repartidos al partirse en varias líneas, también en móvil (es donde más se parten).
El CUERPO (.nsr-adom-prose) no lleva balance ni pretty: acortan línea y parece que no llena. */
.nsr-adom-h2,.nsr-adom-close__h,.nsr-adom-paper__q,.nsr-adom-pil__t,.nsr-adom-hero__tag,.nsr-adom-pack__t,.nsr-adom-dlx__t,.nsr-adom-coll__h{text-wrap:balance}
/* ---------- botones ---------- */
.nsr-adom-btn{display:inline-block; font:800 12.5px/1 var(--sans) !important; letter-spacing:.14em !important; text-transform:uppercase !important; padding:15px 24px !important; border-radius:2px !important; border:0; cursor:pointer; transition:transform .14s, filter .14s, background .14s}
.nsr-adom-btn--solid{background:var(--neon) !important; color:#fff !important; box-shadow:0 14px 30px -14px rgba(192,48,96,.9)}
.nsr-adom-btn--solid:hover{filter:brightness(1.12); transform:translateY(-2px)}
.nsr-adom-btn--ghost{border:1px solid var(--rose) !important; color:var(--pale) !important; background:transparent !important}
.nsr-adom-btn--ghost:hover{background:rgba(175,121,131,.14) !important; transform:translateY(-2px)}
.nsr-adom-cta{display:flex; flex-wrap:wrap; gap:14px; margin:30px 0 0}
.nsr-adom-cta--center{justify-content:center}
/* ---------- fundidos al scroll ---------- */
.nsr-adom-fade{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.nsr-adom-fade.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .nsr-adom-fade{opacity:1; transform:none; transition:none} }
/* --- ATRAVESAR EL VELO: la entrada de los productos ---------------------------------------
Llegan desenfocados, desaturados y un pelin mas grandes -todavia del otro lado- y se
resuelven a foco. A proposito NO es el giro 3D de ToV: aquel presentaba libros como objetos,
y aqui el juego va justo de esto, de cosas que cruzan el Velo. Ademas se apoya en lo que ya
hay detras (nebulosa y polvo) en vez de pelearse con ello.
El desenfoque es lo que hace el efecto, asi que va largo (1.1s); la opacidad entra antes
(.5s) para que no aparezca de la nada, sino que se revele.
Lo dispara su PROPIO observador (ver landing.js): el general arranca 320px antes de que el
elemento entre en pantalla, y con ese margen la entrada se gastaria sin que nadie la viera. */
.nsr-adom-velo{--velo-blur:18px;
opacity:0; filter:blur(var(--velo-blur)) saturate(.3); transform:scale(1.06);
transition:opacity .5s ease, filter 1.1s cubic-bezier(.16,.84,.28,1),
transform 1.2s cubic-bezier(.16,.84,.28,1)}
.nsr-adom-velo.is-in{opacity:1; filter:none; transform:none}
@media (prefers-reduced-motion:reduce){
.nsr-adom-velo{opacity:1; filter:none; transform:none; transition:none}
}
/* En la parrilla cruzan EN CASCADA, de izquierda a derecha: entran todas a la vez en pantalla,
asi que el orden lo da el retardo, no el scroll.
Menos desenfoque (10px y no 18): el 18 esta pensado para el bodegon, que ocupa media banda;
en una tarjeta de 154px ese mismo blur se la come entera y no se lee que hay debajo. */
.nsr-adom-grid .nsr-adom-velo{--velo-blur:10px}
.nsr-adom-grid > *:nth-child(2) .nsr-adom-velo{transition-delay:.1s}
.nsr-adom-grid > *:nth-child(3) .nsr-adom-velo{transition-delay:.2s}
.nsr-adom-grid > *:nth-child(4) .nsr-adom-velo{transition-delay:.3s}
/* ---------- hero ---------- */
.nsr-adom-hero{position:relative; overflow:hidden; border-bottom:1px solid var(--hair); padding-top:var(--nsr-bar)}
/* La ilustracion es 1.65 y el hero 1.77: con `cover` no sobra nada a lo ancho, asi que
background-position X no hace NADA y la escena se queda pegada a la derecha. Para traerla
a la izquierda hay que ampliar (140%) y anclar a la derecha: asi sobra imagen por la
izquierda y la entidad cae en el 68% del ancho en vez de en el 77%. El Y al 52% recorta
por arriba, que es cielo vacio, y deja la cabeza dentro. */
.nsr-adom-hero__art{position:absolute; inset:0; background-size:112% auto; background-position:calc(100% + 70px) 52%; will-change:transform}
/* Suelo del zoom: el 112% se mide sobre el ANCHO, asi que al estrechar la ventana la imagen
pierde alto y deja de tapar el hero (medido: a 1000px se queda 42px corta y se ve el fondo;
el minimo para que tape son 1062px). Por debajo de 1100 volvemos a `cover`, que garantiza el
tapado aunque pierda el encuadre fino. Si se cambia el 112%, hay que recalcular este 1100. */
@media(max-width:1100px){ .nsr-adom-hero__art{background-size:cover} }
/* La izquierda va TAN oscura como antes (.96/.8): es donde vive el texto.
Lo que se acorta es el RADIO horizontal (115% -> 72%), para que la caída termine antes y
la derecha enseñe la ilustración limpia. Bajar la opacidad aclaraba también la izquierda,
que no era lo que queríamos. */
.nsr-adom-hero__veil{position:absolute; inset:0;
background:
radial-gradient(72% 130% at 8% 45%, rgba(14,2,8,.96) 0%, rgba(14,2,8,.8) 34%, rgba(23,7,24,.3) 68%, transparent 100%),
linear-gradient(0deg, var(--void) 2%, transparent 38%)}
.nsr-adom-hero__in{position:relative; z-index:2; max-width:1160px; margin:0 auto; padding:92px 24px 88px}
.nsr-adom-hero__copy{max-width:600px}
.nsr-adom-hero__logo{width:min(470px,90%); height:auto; margin:0 0 22px; filter:drop-shadow(0 10px 30px rgba(0,0,0,.75))}
.nsr-adom-hero__tag{font-family:var(--voz); font-weight:400; font-size:clamp(23px,3vw,32px); color:var(--neon-hi); margin:0 0 18px; text-shadow:0 2px 22px rgba(14,2,8,.95)}
.nsr-adom-hero__lead{max-width:520px; font-size:18.5px; color:#fff; font-family:var(--sans); font-weight:400; line-height:1.7; margin:0; text-shadow:0 2px 18px rgba(14,2,8,.9), 0 0 40px rgba(14,2,8,.7)}
.nsr-adom-hero__trust{margin:24px 0 0; font:500 12px/1.6 var(--sans); letter-spacing:.05em; color:#fff; text-shadow:0 2px 14px rgba(14,2,8,.9)}
/* ---------- papel crema ---------- */
.nsr-adom-paper{position:relative; overflow:hidden; background:var(--paper-rose); color:var(--paper-ink); padding:92px 0}
/* Reah A SANGRE por la derecha. El aspect-ratio de la imagen + height:100% hacen que el
elemento mida EXACTAMENTE lo que la imagen a todo alto (988x593 a 1280): así `cover` no
amplía ni recorta nada. La imagen es la ilustración ENTERA, sin recortar: es apaisada (5/3),
y por eso a todo alto se mete casi 1000px hacia la izquierda.
Y el fundido va AQUÍ, en máscara sobre el propio arte, no en el velo: medido sobre la
sección, el degradado no coincidía con el borde de la imagen (quedaba al 88% justo ahí y
se veía la costura), y encima esa posición cambia con el ancho de pantalla. Sobre el arte
nace siempre en su propio borde, pase lo que pase. */
.nsr-adom-paper__art{position:absolute; z-index:0; inset:0 var(--sale) 0 auto; height:100%; width:auto;
aspect-ratio:5/3;
/* Al estrechar, el arte mide siempre lo mismo (988px: la sección no cambia de alto) pero,
anclado a la derecha, se desliza sobre el texto. Así que a partir de cierto ancho lo
dejamos SALIRSE por la derecha, y su borde izquierdo se queda quieto respecto al texto.
El 50vw sigue al texto (que va centrado en 1160 y ocupa media pantalla); los 732px son
dónde acaba el texto más los 336px de rampa. Por encima de ~1465 no hace falta y es 0. */
--sale:min(0px, calc(50vw - 732px)); background:center/cover no-repeat;
-webkit-mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.5) 22%, #000 34%);
mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.5) 22%, #000 34%)}
/* En escritorio el velo no pinta nada: el único fundido es el lateral, y lo hace la máscara del
arte (ver arriba). Arriba y abajo la imagen corta en recto, a propósito.
El elemento sigue aquí porque en móvil (ver abajo) sí funde, de abajo arriba. */
.nsr-adom-paper__veil{position:absolute; z-index:0; inset:0; background:none}
/* Dos columnas: el texto a la izquierda; la derecha queda libre para que se vea Reah. */
.nsr-adom-paper__in{position:relative; z-index:1; max-width:1160px; margin:0 auto; padding:0 24px;
text-align:left; display:grid; grid-template-columns:1fr .78fr; gap:52px; align-items:center}
.nsr-adom-paper__txt{min-width:0;
/* Halo del color del papel: el arte se mete bajo el texto, y esto lo despega sin
necesidad de una caja ni de recortar el fundido. Varias capas porque una sola
con mucho blur se diluye y no llega a separar. */
text-shadow:0 0 6px var(--paper-rose), 0 0 14px var(--paper-rose),
0 0 26px var(--paper-rose), 0 0 26px var(--paper-rose)}
.nsr-adom-paper .nsr-adom-eyebrow{color:var(--uva)}
.nsr-adom-paper__q{font-family:var(--voz); font-weight:400; font-size:clamp(27px,3.7vw,42px); line-height:1.34; color:var(--paper-ink); margin:16px 0 24px}
.nsr-adom-paper__q .hl{color:var(--neon); font-style:normal}
.nsr-adom-paper__p{font-family:var(--sans); font-weight:400; font-size:18px; color:#4a3540; line-height:1.75; max-width:660px; margin:0 auto}
.nsr-adom-paper__p strong{color:var(--paper-ink)}
/* Crédito de autoría, NO firma de la cita: la frase de arriba es nuestra, no suya.
La etiqueta "Un juego de" es lo que impide leerlo como atribución.
Tipografía: la misma que tenía la firma (mayúsculas espaciadas). El color sí cambia:
el #8a6b78 original era para la banda crema y sobre el rosa se queda en 3,7 de contraste. */
.nsr-adom-paper__by{margin:26px 0 0; font:500 11.5px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--uva)}
.nsr-adom-paper__by strong{color:var(--uva); font-weight:800}
/* ---------- secciones ---------- */
.nsr-adom-sec{padding:92px 0}
/* Cierre en claro: rompe la racha de bandas oscuras del final y cuadra el sistema
crema=editorial (origen, catálogo) / rosa=emoción y producto (Deluxe, cierre). */
.nsr-adom-sec--plum{background:var(--paper-rose); color:var(--paper-ink)}
/* ---------- dos pilares: la SECCIÓN es el escenario ----------
La imagen va a sangre (100vw, sin caja ni borde) y el contenido flota encima sobre un
degradado. El cambio no es un fundido: la capa entrante BARRE con clip-path, y el sentido
alterna (avanzar barre a la derecha; retroceder, a la izquierda) para que ir y volver se
sienta como deslizar un panel y no como una animación en bucle. */
.nsr-adom-pil{position:relative; min-height:clamp(560px,78vh,760px); display:flex; align-items:center; overflow:hidden; background:#000; border-block:1px solid var(--hair)}
.nsr-adom-pil__photo{position:absolute; inset:0; background-size:cover; background-position:center 38%}
.nsr-adom-pil__scrim{position:absolute; inset:0; z-index:2; background:
linear-gradient(90deg,rgba(14,2,8,.96) 0%,rgba(14,2,8,.72) 42%,rgba(14,2,8,.16) 76%,transparent 100%),
linear-gradient(180deg,var(--void) 0%,transparent 20%,transparent 76%,var(--void) 100%)}
.nsr-adom-pil__in{position:relative; z-index:3; max-width:1160px; margin:0 auto; padding:80px 24px; width:100%}
.nsr-adom-pil__body{max-width:620px}
.nsr-adom-switch{display:inline-flex; padding:5px; gap:5px; background:rgba(14,2,8,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid var(--hair-2); border-radius:3px; margin:0 0 26px}
.nsr-adom-tab{font:700 12px/1 var(--sans) !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:var(--ink-dim) !important; background:transparent !important; border:0 !important; padding:12px 20px !important; border-radius:2px !important; cursor:pointer; box-shadow:none !important; transition:color .18s, background .18s}
.nsr-adom-tab:focus{outline:none !important}
.nsr-adom-tab.is-on,.nsr-adom-tab.is-on:hover{background:var(--neon) !important; color:#fff !important}
.nsr-adom-pil__t{font-family:var(--titulo); font-weight:400; font-size:clamp(32px,4.8vw,58px); line-height:1.02; color:#fff; margin:0 0 16px; text-shadow:0 4px 40px rgba(0,0,0,.75)}
.nsr-adom-pil__txt{font-family:var(--sans); font-weight:400; font-size:17px; line-height:1.7; color:var(--ink); margin:0; max-width:48ch; text-shadow:0 2px 20px rgba(0,0,0,.6)}
.nsr-adom-pil__cap{margin:18px 0 0; font:600 11.5px/1.4 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--neon-hi)}
/* la cortina, en sus dos sentidos */
.nsr-adom-pil.is-fwd .nsr-adom-pil__photo--top{animation:nsr-adom-wipe-fwd .85s cubic-bezier(.76,0,.24,1) both}
.nsr-adom-pil.is-bwd .nsr-adom-pil__photo--top{animation:nsr-adom-wipe-bwd .85s cubic-bezier(.76,0,.24,1) both}
@keyframes nsr-adom-wipe-fwd{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes nsr-adom-wipe-bwd{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
/* el texto entra detrás de la cortina y desde el mismo lado */
.nsr-adom-pil.is-fwd .nsr-adom-pil__t,.nsr-adom-pil.is-fwd .nsr-adom-pil__txt,.nsr-adom-pil.is-fwd .nsr-adom-pil__cap{animation:nsr-adom-in-fwd .6s .14s cubic-bezier(.2,.7,.2,1) both}
.nsr-adom-pil.is-bwd .nsr-adom-pil__t,.nsr-adom-pil.is-bwd .nsr-adom-pil__txt,.nsr-adom-pil.is-bwd .nsr-adom-pil__cap{animation:nsr-adom-in-bwd .6s .14s cubic-bezier(.2,.7,.2,1) both}
@keyframes nsr-adom-in-fwd{from{opacity:0; transform:translateX(-26px)}to{opacity:1; transform:none}}
@keyframes nsr-adom-in-bwd{from{opacity:0; transform:translateX(26px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .nsr-adom-pil *{animation:none !important} }
@media(max-width:760px){
/* MÓVIL: el velo pasa de lateral a VERTICAL. En una pantalla estrecha el texto ocupa todo
el ancho, así que un degradado lateral no separa nada y habría que tapar la ilustración
entera. Con el velo vertical, el arte respira en la mitad de arriba y el texto se apoya
abajo sobre el oscuro. La sección crece para que quepan los dos. */
/* El alto de la banda se reparte entre DOS cosas: el texto, que ocupa lo que ocupa (~425px y
no encoge), y la ilustracion, que se queda con lo que sobra. Bajar la banda no hacia la
imagen mas pequeña: hacia que el texto se la comiera entera (a 440px le dejaba 15px).
A 82vh el texto arranca sobre y=240 y la ilustracion tiene esos 240 para ella. */
.nsr-adom-pil{min-height:clamp(620px,82vh,720px); align-items:flex-end}
/* El texto, mas abajo: es lo unico que despeja la mitad de arriba para la ilustracion.
22px es lo que se puede bajar sin que el ultimo renglon se pegue al borde de la banda. */
.nsr-adom-pil__in{padding:0 24px 22px}
.nsr-adom-pil__txt{max-width:none}
.nsr-adom-pil__photo{background-position:center 22%}
.nsr-adom-pil__scrim{background:
linear-gradient(0deg, var(--void) 0%, var(--void) 34%, rgba(14,2,8,.86) 52%, rgba(14,2,8,.42) 70%, transparent 92%),
linear-gradient(180deg, rgba(14,2,8,.7) 0%, transparent 18%)}
}
/* ---------- bandas cinemáticas con parallax ----------
Usan los ads HORIZONTALES: sus esquinas son negras, así funden con el fondo oscuro. */
.nsr-adom-cine{position:relative; min-height:clamp(420px,64vh,600px); display:flex; align-items:center; overflow:hidden; background:var(--void)}
.nsr-adom-cine--tall{min-height:clamp(460px,72vh,700px)}
.nsr-adom-cine__img{position:absolute; inset:-14% 0; z-index:0; background-size:cover; background-position:center; will-change:transform}
.nsr-adom-cine::before{content:""; position:absolute; inset:0; z-index:1; background:
linear-gradient(90deg, rgba(14,2,8,.94) 0%, rgba(14,2,8,.66) 42%, rgba(14,2,8,.12) 74%, transparent 100%),
linear-gradient(180deg, var(--void) 0%, transparent 22%, transparent 78%, var(--void) 100%)}
.nsr-adom-cine__in{position:relative; z-index:2; max-width:1160px; margin:0 auto; padding:60px 24px; width:100%}
.nsr-adom-cine__in .nsr-adom-prose{max-width:52ch}
/* El titular se estiraba a los 1160 de la caja y entraba de una línea. Con 18ch parte en dos
y mide ~591px, o sea la misma columna que su párrafo (562): el bloque se lee como uno.
En ch y no en px porque la fuente es clamp(30px,4.4vw,50px): así la medida encoge con ella.
Solo hay un h2 en las bandas cinemáticas, no arrastra a nadie más. */
.nsr-adom-cine .nsr-adom-h2{max-width:18ch}
.nsr-adom-kick--neon{color:var(--neon-hi)}
/* Variante con el texto en la columna derecha. Hay que voltear el degradado además de mover
el texto: el velo oscuro tiene que viajar con él o el texto cae sobre la zona clara. */
.nsr-adom-cine--right::before{background:
linear-gradient(270deg, rgba(14,2,8,.94) 0%, rgba(14,2,8,.66) 42%, rgba(14,2,8,.12) 74%, transparent 100%),
linear-gradient(180deg, var(--void) 0%, transparent 22%, transparent 78%, var(--void) 100%)}
.nsr-adom-cine--right{align-items:flex-end}
.nsr-adom-cine--right .nsr-adom-cine__in > *{margin-left:auto; text-align:right}
@media(max-width:760px){
/* en móvil el texto va a la izquierda y a bandera (a la derecha no gana nada al ocupar todo) */
.nsr-adom-cine--right .nsr-adom-cine__in > *{margin-left:0; text-align:left}
}
.nsr-adom-quote{font-family:var(--voz); font-weight:400; font-size:clamp(26px,3.6vw,44px); line-height:1.16; color:#fff; max-width:22ch; margin:12px 0 0; text-shadow:0 4px 40px rgba(0,0,0,.6); text-wrap:balance}
.nsr-adom-quote .r{color:var(--neon-hi); display:block}
/* ---------- EL PACK LIGABLE: sección propia, a sangre, con su arte ---------- */
/* Sin ilustración de fondo a propósito: la foto del producto es la protagonista y
cualquier arte detrás le robaba el sitio. Solo un halo del acento bajo la portada. */
/* overflow VISIBLE: el bodegon asoma por encima de la banda, sobre la seccion de Reah. El
recorte que antes estaba aqui lo hace ahora __fondo, que es quien lo necesita. */
.nsr-adom-pack{position:relative; background:#150e1e; border-block:1px solid var(--hair)}
.nsr-adom-pack__fondo{position:absolute; inset:0; z-index:0; overflow:hidden}
/* ---- El cielo del Pack, pintado con CSS en vez de con una imagen ----------------------
Colores sacados de la ilustracion original: nubarron #120c1a, fondo #1d1525, morado
#2f1f3a, bokeh #644e78. Las capas van a distinta velocidad (data-par en el tpl) y por eso
el conjunto tiene profundidad: al hacer scroll, los puntos cercanos adelantan a las nubes.
Todas se salen de la caja (inset negativo) para que el recorrido no descubra los bordes. */
.nsr-adom-pack__cielo{position:absolute; inset:0; z-index:0; background:
radial-gradient(40% 32% at 16% 20%, rgba(104,56,150,.55), transparent 70%),
radial-gradient(32% 26% at 76% 10%, rgba(74,42,116,.42), transparent 72%),
radial-gradient(44% 34% at 28% 86%, rgba(118,62,158,.5), transparent 70%),
radial-gradient(34% 30% at 90% 68%, rgba(84,46,126,.36), transparent 72%),
linear-gradient(180deg, #1d1525 0%, #120c1a 52%, #1a1024 100%)}
/* Nubarrones: manchas casi negras muy desenfocadas. El blur es lo que las hace nube y no
circulo; por eso el inset tiene que ser mayor que el radio del blur. */
.nsr-adom-pack__nubes{position:absolute; inset:-170px; z-index:0; filter:blur(40px); background:
radial-gradient(30% 24% at 12% 38%, #0b0710 0 40%, transparent 74%),
radial-gradient(36% 26% at 50% 16%, #0d0812 0 42%, transparent 76%),
radial-gradient(28% 22% at 86% 44%, #0a0610 0 40%, transparent 74%),
radial-gradient(40% 28% at 62% 88%, #0c0713 0 44%, transparent 76%),
radial-gradient(26% 20% at 34% 64%, #0b0611 0 40%, transparent 74%)}
/* El polvo lo pinta landing.js en este canvas. Estuvo hecho con CSS (un SVG de puntos
repetido, en dos capas con su animacion), pero un fondo es una imagen rigida: solo se puede
mover la capa ENTERA, asi que las particulas derivaban todas en bloque. Para que cada una
vaya a lo suyo hay que pintarlas de una en una. */
.nsr-adom-pack__polvo{position:absolute; inset:0; z-index:1; pointer-events:none;
/* El desenfoque va AQUI, sobre la capa entera, y no en cada particula: los hexagonos se
pintan con el relleno hasta el borde (si no, la forma no se lee) y es este blur el que
les da el borde difuso. De paso ablanda el grano fino. Una sola pasada de GPU para las
~370 particulas, en vez de desenfocar cada sprite por su cuenta. */
filter:blur(1.1px)}
.nsr-adom-pack__in{position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:48px 24px 60px; display:grid; grid-template-columns:1fr; gap:0; align-items:center}
/* El bodegon manda la banda: va a todo ancho y el texto debajo, a dos columnas. En una
columna de 390px un apaisado de 1.84 no lucia. */
@media(min-width:860px){
.nsr-adom-pack__body{display:grid; grid-template-columns:1.2fr .8fr; column-gap:56px;
grid-template-areas:"ceja ceja" "tit tit" "lead compra" "lista compra"; align-items:start}
.nsr-adom-pack__body .nsr-adom-eyebrow{grid-area:ceja}
.nsr-adom-pack__t{grid-area:tit}
.nsr-adom-pack__lead{grid-area:lead}
.nsr-adom-pack__list{grid-area:lista}
/* El bloque de compra, abajo: cierra a la misma altura que la lista. El precio es el
desenlace del argumento, no un co-titular; asi el boton cae donde el lector termina. */
.nsr-adom-pack__buy{grid-area:compra; align-self:end; max-width:none}
}
.nsr-adom-pack__cover{position:relative; z-index:3; margin:-82px -30px -70px} /* -82: 50px mas arriba, hasta salirse de la banda */
/* Los margenes de arriba y abajo van en sentidos contrarios a proposito: un respiro con el
borde de la banda, y el texto pegado al bodegon. El de abajo es NEGATIVO porque el borde
inferior de la ilustracion es irregular (la pantalla acaba mucho mas arriba que las cartas)
y justo bajo el titular, que va a la izquierda, el hueco se veia el doble de grande. */
/* Nada por encima ni por debajo del bodegon: ni el resplandor magenta que llevaba la portada,
ni sombra proyectada. Viene recortado y con su propio halo de neon pintado; cualquier cosa
que le echemos encima lo apaga. El z-index:3 lo pone por delante del polvo y de los
nubarrones, que si no le pasarian por encima. */
.nsr-adom-pack__cover img{position:relative; z-index:1; width:90%; height:auto; margin:0 auto; display:block; border-radius:0}
/* En movil el bodegon y el texto van APILADOS, asi que el -70px de arriba -que en escritorio
mete el titular en el hueco que deja la ilustracion- aqui solo los pegaria. Y el bloque de
compra, que en escritorio vive en su propia columna, aqui cae justo detras de la lista.
VA DESPUES de la regla base a proposito: una media query NO añade especificidad, asi que
puesta antes, el `margin:-82px -30px -70px` de arriba se la comeria. */
@media(max-width:859px){
.nsr-adom-pack__cover{margin-bottom:40px}
.nsr-adom-pack__buy{margin-top:20px}
}
/* El width/height del ![]()
en el tpl no es decoracion: es quien marca el alto de la banda, y
va lazy. Sin ellos, la seccion nace a 414px en vez de 869 y el canvas del polvo se
dimensiona corto hasta que carga la imagen. El `height:auto` de aqui deja que el ancho
mande, y los atributos solo reservan la proporcion. */
/* La sombra de arriba era #000 opaco y caia sobre el cielo de particulas: un agujero negro
justo debajo del producto, donde el polvo desaparecia. Translucida levanta igual la portada
y deja respirar el polvo. Si algun dia se cambia, que siga llevando alfa. */
.nsr-adom-pack__t{font-family:var(--titulo); font-weight:400; font-size:clamp(38px,5vw,60px); line-height:1; color:#fff; margin:0 0 18px; text-shadow:0 4px 40px rgba(0,0,0,.6)}
.nsr-adom-pack__lead{font-family:var(--sans); font-weight:400; font-size:19px; color:#fff; margin:0; max-width:none}
.nsr-adom-pack__list{margin:16px 0 0; padding:0; list-style:none; display:grid; gap:9px; max-width:none}
.nsr-adom-pack__list li{position:relative; padding-left:22px; color:#fff; font-size:15.5px; font-weight:200}
.nsr-adom-pack__list li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:var(--neon-hi)}
/* Bloque de compra (opción C): precio y stock en una fila, botón a todo el ancho debajo y la
coletilla al pie. Antes el botón se centraba contra un precio de dos líneas y quedaba
flotando, anclado a nada. */
.nsr-adom-pack__buy{display:flex; flex-direction:column; gap:12px; max-width:340px}
.nsr-adom-pack__prow{display:flex; align-items:baseline; justify-content:space-between; gap:14px}
.nsr-adom-pack__cap{margin:0; font:500 10.5px/1.4 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#fff}
.nsr-adom-pack__form .nsr-adom-btn{display:block !important; width:100% !important; text-align:center}
.nsr-adom-pack__price{font:800 36px/1 var(--sans); color:var(--neon-hi); font-variant-numeric:tabular-nums}
/* ---------- EDICIÓN DELUXE: pieza única, sin fondo ----------
Mockup con transparencia: el libro flota en el vacío. Composición espejada respecto al
Pack (texto a la izquierda, objeto a la derecha) para que no parezcan la misma sección. */
/* Banda clara en rosa empolvado. Va seguida de la colección (crema #fbf2f2): los dos
tonos son distintos a propósito, para que el cambio se lea como escalón y no como error. */
/* --hueco-tinta: el ancho que le cedemos a la tinta en el margen izquierdo. De el salen LAS
DOS cosas -donde empieza el texto y donde acaba la tinta-, asi que no pueden descuadrarse.
Se apaga por debajo de 1180px: ahi no hay margen que ceder. */
.nsr-adom-dlx{--hueco-tinta:0px;
--txt-izq:max(24px, calc((100vw - 1160px)/2 + 24px + var(--hueco-tinta)));
position:relative; overflow:hidden; background:var(--paper-rose); border-bottom:1px solid #e2c3c8}
@media(min-width:1180px){ .nsr-adom-dlx{--hueco-tinta:300px} }
.nsr-adom-dlx__in{position:relative; z-index:2; max-width:1160px; margin:0 auto; padding:96px 24px 96px calc(24px + var(--hueco-tinta)); display:grid; grid-template-columns:1fr; gap:44px; align-items:center}
/* 480 -> 384 (-20%): la imagen va a width:100%, así que su alto lo marca el ancho de esta
columna. Encogerla aquí la reduce en altura sin deformarla. */
@media(min-width:860px){ .nsr-adom-dlx__in{grid-template-columns:1fr 346px; gap:72px} }
/* La tinta del Deluxe: multiplica sobre el rosa, sin difuminado ninguno.
El blanco del papel del original no era puro (se quedaba en 250/255) y eso, multiplicando,
dejaba ver el rectangulo de la imagen recortado sobre el rosa. Va con el punto blanco
subido a 255: el papel deja de multiplicar y la tinta apenas se entera (1.6 niveles).
Sin perdida a proposito: el webp con perdida ensucia el blanco (a q95 lo baja a 248) y
vuelve el rectangulo. Por eso pesa lo que pesa.
Sin `transform` para colocarla: el parallax escribe el suyo aqui y se pisarian. */
/* Vive en el MARGEN izquierdo de la ventana: su borde derecho se pega al inicio del texto
(menos 20px de aire) y todo lo demas se sale por la izquierda. El tamaño es fijo en px, no
en %, asi que la tinta no cambia de sitio ni de escala al redimensionar: lo unico que
cambia es cuanta se ve, porque el margen crece o se encoge. En ventanas estrechas el margen
desaparece y la tinta con el, que es justo lo que queremos.
--txt-izq replica donde empieza el texto: la caja va centrada, max-width 1160 y padding 24.
Si alguno de esos dos numeros cambia, hay que cambiarlo aqui. */
.nsr-adom-dlx__tinta{position:absolute; z-index:1; right:calc(100% - var(--txt-izq) + 20px);
top:calc(50% - 1050px); height:1860px; aspect-ratio:1915/3567; /* -1050 en vez de -930: 120px mas arriba */
background:right center/contain no-repeat;
mix-blend-mode:multiply; pointer-events:none}
.nsr-adom-dlx__art{position:relative}
.nsr-adom-dlx__art::before{content:""; position:absolute; inset:-6% -14%; z-index:0;
background:radial-gradient(52% 50% at 50% 52%, rgba(192,48,96,.22), transparent 72%); filter:blur(34px)}
/* Sin sombra: el libro va limpio contra el rosa. */
.nsr-adom-dlx__art img{position:relative; z-index:1; width:100%}
.nsr-adom-dlx__t{font-family:var(--titulo); font-weight:400; font-size:clamp(38px,5.6vw,68px); line-height:1; color:var(--paper-ink)}
.nsr-adom-dlx__lead{font-family:var(--sans); font-weight:400; font-size:19px; color:#4a3540; margin:0; max-width:calc(46ch + 40px)}
.nsr-adom-dlx__list{margin:22px 0 26px; padding:0; list-style:none; display:grid; gap:9px; max-width:calc(46ch + 40px)}
.nsr-adom-dlx__list li{position:relative; padding-left:22px; color:#4a3540; font-size:15.5px; font-weight:200}
.nsr-adom-dlx__list li::before{content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border:1px solid var(--neon); transform:rotate(45deg)}
/* mismo bloque de compra que el Pack, sobre el rosa */
.nsr-adom-dlx__buy{display:flex; flex-direction:column; gap:12px; max-width:340px}
.nsr-adom-dlx__prow{display:flex; align-items:baseline; justify-content:space-between; gap:14px}
.nsr-adom-dlx__cap{margin:0; font:600 10.5px/1.4 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#71505e}
.nsr-adom-dlx__form .nsr-adom-btn{display:block !important; width:100% !important; text-align:center}
.nsr-adom-dlx__form{margin:0}
.nsr-adom-dlx__price{font:700 36px/1 var(--sans); color:var(--neon); font-variant-numeric:tabular-nums}
.nsr-adom-dlx__note{margin:14px 0 0; font:500 13.5px/1.5 var(--sans); color:#71505e}
@media(max-width:860px){ .nsr-adom-dlx__art{order:-1; max-width:340px; margin:0 auto} }
/* elementos que heredan colores de la landing oscura y hay que reajustar sobre el rosa */
.nsr-adom-dlx .nsr-adom-eyebrow{color:var(--uva)}
.nsr-adom-dlx strong{color:var(--paper-ink)}
.nsr-adom-dlx .nsr-adom-stock{color:#71505e}
.nsr-adom-dlx .nsr-adom-stock i{background:#71505e}
.nsr-adom-dlx .nsr-adom-stock--low{color:#b8651a}
.nsr-adom-dlx .nsr-adom-stock--low i{background:#b8651a}
/* ---------- LA COLECCIÓN: papel claro ----------
Los ads CUADRADOS tienen las esquinas en blanco puro: sobre este papel el marco de
tentáculos se funde y el producto queda flotando, sin canto de recorte. */
.nsr-adom-coll{background:var(--paper-rose); color:var(--paper-ink); padding:88px 0}
/* ---- FONDOS DE PANTALLA ------------------------------------------------------------------
Va sobre el lado OSCURO del sistema y no sobre el papel rosa a proposito: los dos fondos son
uno verde-terror y otro romance calido, y sobre rosa se pelearian entre ellos; sobre casi
negro los dos encienden. Las dos tarjetas son iguales y sin numerar: no son una secuencia,
son la misma dualidad que el selector de pilares. */
.nsr-adom-wp{background:linear-gradient(180deg, var(--void), var(--night) 60%, var(--void)); padding:96px 0; border-block:1px solid var(--hair)}
.nsr-adom-wp__h{margin:0 0 12px}
.nsr-adom-wp__lead{max-width:56ch; margin:0 0 40px}
.nsr-adom-wp__lead strong{color:var(--ink)}
.nsr-adom-wp__list{list-style:none; margin:0; padding:0; display:grid; gap:28px; justify-content:center}
@media(min-width:820px){ .nsr-adom-wp__list{grid-template-columns:1fr 1fr} }
/* Selector de formato. Mismo gesto que el de los pilares: dos pestañas, una encendida. */
.nsr-adom-wp__sw{display:inline-flex; gap:2px; margin:0 0 26px; padding:3px;
border:1px solid var(--hair); border-radius:999px; background:rgba(255,255,255,.03)}
.nsr-adom-wp__sw button{border:0; cursor:pointer; background:none; color:var(--muted);
font:800 11.5px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
padding:10px 18px; border-radius:999px; transition:background .18s, color .18s}
.nsr-adom-wp__sw button:hover{color:var(--ink)}
.nsr-adom-wp__sw button.is-on{background:var(--neon); color:#fff}
.nsr-adom-wp__sw button:focus-visible{outline:2px solid var(--neon-hi); outline-offset:2px}
/* Al pasar a movil, las tarjetas SE CONVIERTEN en moviles: de 16:9 a 9:20. El cambio de forma
es el que dice que el formato es otro; sin el habria que explicarlo con texto.
El ancho se limita porque un 9:20 a media banda daria 1244px de alto: seria una columna
inmensa y el conjunto dejaria de leerse de un vistazo. */
.nsr-adom-wp.is-mov .nsr-adom-wp__list{grid-template-columns:repeat(2, minmax(0, 300px))}
.nsr-adom-wp.is-mov .nsr-adom-wp__shot{aspect-ratio:1080/2400}
.nsr-adom-wp__shot{transition:aspect-ratio .45s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){ .nsr-adom-wp__shot{transition:none} }
.nsr-adom-wp__card{display:block; position:relative; text-decoration:none; border:1px solid var(--hair);
border-radius:3px; overflow:hidden; background:#000; transition:border-color .18s, transform .18s}
/* El 16/9 lo declara el CSS y no un ![]()
: la miniatura es un fondo, y sin esto la tarjeta
nace con alto 0 y el layout salta al cargar. */
.nsr-adom-wp__shot{display:block; aspect-ratio:16/9; background:center/cover no-repeat;
transition:transform .5s cubic-bezier(.16,.84,.28,1)}
.nsr-adom-wp__pie{position:absolute; inset:auto 0 0 0; display:flex; align-items:center;
justify-content:space-between; gap:16px; padding:16px 18px;
background:linear-gradient(0deg, rgba(14,2,8,.92), rgba(14,2,8,.55) 60%, transparent)}
.nsr-adom-wp__cara{font-family:var(--titulo); font-weight:400; font-size:23px; color:#fff; line-height:1}
.nsr-adom-wp__dl{display:inline-flex; align-items:center; gap:8px; flex:none;
font:800 11.5px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim);
transition:color .18s}
.nsr-adom-wp__dl svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2;
stroke-linecap:round; stroke-linejoin:round; transition:transform .18s}
.nsr-adom-wp__card:hover{border-color:var(--neon)}
.nsr-adom-wp__card:hover .nsr-adom-wp__shot{transform:scale(1.04)}
.nsr-adom-wp__card:hover .nsr-adom-wp__dl{color:var(--neon-hi)}
.nsr-adom-wp__card:hover .nsr-adom-wp__dl svg{transform:translateY(2px)}
.nsr-adom-wp__card:focus-visible{outline:2px solid var(--neon-hi); outline-offset:3px; border-color:var(--neon)}
@media(prefers-reduced-motion:reduce){
.nsr-adom-wp__shot,.nsr-adom-wp__dl svg{transition:none}
.nsr-adom-wp__card:hover .nsr-adom-wp__shot{transform:none}
}
.nsr-adom-coll__head{max-width:620px; margin:0 0 34px}
.nsr-adom-coll .nsr-adom-eyebrow{color:var(--uva)}
.nsr-adom-coll__h{font-family:var(--titulo); font-weight:400; font-size:clamp(30px,4.4vw,50px); line-height:1.06; color:var(--paper-ink); text-wrap:balance}
.nsr-adom-coll__p{font-family:var(--sans); font-weight:400; font-size:17px; color:#5c4450; margin:0}
/* PRECIO: etiqueta sesgada magenta. Lenguaje exclusivo del precio. */
/* STOCK: línea tipográfica con punto. Nunca etiqueta, nunca magenta. */
/* El Excel pide la línea de stock en blanco. Se aplica al estado NORMAL; el ámbar de
--stock--low se queda: es semántico (ver los tokens), no decorativo, y pintarlo de blanco
sería borrar el aviso de "quedan pocas". */
.nsr-adom-stock{display:inline-flex; align-items:center; gap:7px; font:500 11.5px/1 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:#fff; margin:0}
.nsr-adom-coll .nsr-adom-stock{color:#8a6b78}
.nsr-adom-coll .nsr-adom-stock i{background:#8a6b78}
.nsr-adom-coll .nsr-adom-stock--low{color:#b8651a}
.nsr-adom-coll .nsr-adom-stock--low i{background:#b8651a}
.nsr-adom-stock i{width:6px; height:6px; border-radius:50%; background:#fff; display:block; flex:none}
.nsr-adom-stock--low{color:var(--amber)}
.nsr-adom-stock--low i{background:var(--amber); animation:nsr-adom-pulse 1.9s ease-in-out infinite}
.nsr-adom-stock--out{color:#7d6470}
@keyframes nsr-adom-pulse{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.45; transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){ .nsr-adom-stock--low i{animation:none} }
/* ---------- parrilla ---------- */
.nsr-adom-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; align-items:stretch}
@media(min-width:760px){ .nsr-adom-grid{grid-template-columns:repeat(4,1fr)} }
/* Tarjeta sobre PAPEL CLARO: sin caja ni borde. El ad cuadrado ya trae su marco blanco,
así que cualquier recuadro pelearía con él. La tarjeta es el arte + el texto, y punto. */
.nsr-adom-pc{position:relative; display:flex; flex-direction:column; background:transparent; border:0; border-radius:0; overflow:visible; transition:transform .16s}
.nsr-adom-pc:hover{transform:translateY(-5px)}
/* PRECIO: etiqueta sesgada. Lenguaje exclusivo del precio, nunca del stock. */
.nsr-adom-pc__tag{position:absolute; top:12px; left:-6px; z-index:2; font:700 13px/1 var(--sans); color:#fff; background:var(--neon); padding:7px 12px; transform:skewX(-8deg); box-shadow:0 8px 18px -8px rgba(192,48,96,.8); font-variant-numeric:tabular-nums}
.nsr-adom-pc__cover{position:relative; display:block; aspect-ratio:1/1; overflow:hidden; border-radius:3px}
/* Sin mix-blend-mode y sin fondo propio: las ilustraciones vienen RECORTADAS con alfa y se
posan directas sobre el rosa de la seccion. Antes multiplicaban, que era el truco para que
el marco blanco de la version anterior desapareciera solo; el peaje era que el arte salia
teñido del color del fondo. Con alfa se ve su color de verdad y no hace falta nada. */
.nsr-adom-pc__cover img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.nsr-adom-pc:hover .nsr-adom-pc__cover img{transform:scale(1.05)}
.nsr-adom-pc__b{display:flex; flex-direction:column; flex:1; padding:4px 2px 0}
.nsr-adom-pc__name{font:600 15px/1.3 var(--sans); margin:0; padding:0 0 3px}
.nsr-adom-pc__name a{color:var(--paper-ink)}
.nsr-adom-pc__name a:hover{color:var(--neon)}
.nsr-adom-pc__sub{font:500 12.5px/1.4 var(--sans); color:#8a6b78; margin:0 0 10px}
.nsr-adom-pc__foot{margin-top:auto; display:flex; flex-direction:column; gap:9px}
.nsr-adom-pc__form{margin:0}
.nsr-adom-pc__add{display:block !important; width:100% !important; box-sizing:border-box !important; margin:0 !important; text-align:center; font:700 11px/1 var(--sans) !important; letter-spacing:.13em !important; text-transform:uppercase !important; padding:12px !important; background:var(--neon) !important; border:1px solid var(--neon) !important; border-radius:2px !important; color:#fff !important; box-shadow:none !important; cursor:pointer; transition:filter .12s, transform .12s}
.nsr-adom-pc__add:hover{filter:brightness(1.1) !important; transform:translateY(-1px)}
/* el cierre hereda estilos pensados para fondo oscuro: hay que reajustarlos */
.nsr-adom-sec--plum .nsr-adom-eyebrow{color:var(--uva)}
.nsr-adom-sec--plum .nsr-adom-prose{color:#4a3540}
.nsr-adom-sec--plum .nsr-adom-prose strong{color:var(--paper-ink)}
/* el botón fantasma era --pale sobre borde rosa: invisible sobre claro */
.nsr-adom-sec--plum .nsr-adom-btn--ghost{border-color:var(--wine) !important; color:var(--wine) !important}
.nsr-adom-sec--plum .nsr-adom-btn--ghost:hover{background:rgba(100,20,60,.08) !important; color:var(--paper-ink) !important}
/* ---------- cierre / pie ---------- */
.nsr-adom-close{text-align:center; max-width:760px}
/* ---- El cierre: la tinta asoma por el extremo DERECHO ------------------------------------
Aqui el texto NO se corre: se queda centrado en la ventana, y la tinta ocupa lo que sobra a
su derecha. Por eso esta seccion no lleva el --hueco-tinta que si tiene el Deluxe.
--txt-dch replica el borde derecho del texto: caja centrada, max-width 760 y 24 de padding.
El min() cubre la ventana mas estrecha que la caja, donde ya no hay centrado que valga; ahi
la tinta se sale de pantalla sola y desaparece.
La imagen es gris sobre blanco con el punto blanco subido a 255, y va sin perdida: es lo
que hace que multiplicar no tiña el rosa. Sin `transform`: lo escribe el parallax. */
.nsr-adom-cierre{--txt-dch:min(calc(100vw - 24px), calc((100vw + 760px)/2 - 24px));
position:relative; overflow:hidden}
/* La tinta va anclada al BORDE DERECHO de la ventana, no al texto: -212px la dejan asomando
574px fijos, que es donde estaba antes de centrar el texto. Asi mover el texto no la mueve.
Se apaga por debajo de 1180px, donde ya no hay margen que ceder. */
.nsr-adom-cierre__tinta{display:none}
@media(min-width:1180px){
.nsr-adom-cierre__tinta{display:block; position:absolute; z-index:1; right:-212px;
top:calc(50% - 700px); height:1400px; aspect-ratio:2360/4205;
background:left center/contain no-repeat;
mix-blend-mode:multiply; pointer-events:none}
}
.nsr-adom-cierre .nsr-adom-wrap{position:relative; z-index:2}
.nsr-adom-close__h{font-family:var(--titulo); font-weight:400; font-size:clamp(31px,4.8vw,54px); color:var(--paper-ink)}
/* Pie a medida — misma estructura que el de Vampiro, con el logo de ADOM y el magenta. */
.nsr-adom-footer{background:linear-gradient(180deg,var(--void),#060104); border-top:2px solid var(--neon); padding:26px 0 18px}
.nsr-adom-footer__in{max-width:none; margin:0; 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. */
/* align-items:flex-start es obligatorio: en un flex de columna el estirado por defecto
fuerza el ancho del hijo y deforma el logo (ratio 2.56 -> 5.59). */
/* Marca en texto, no imagen: el logo del tema es un JPG con fondo blanco y sobre el pie
oscuro saldría un recuadro. Vampiro resuelve su pie igual. */
.nsr-adom-footer__links{display:flex; flex-wrap:wrap; gap:8px 22px}
.nsr-adom-footer__links a{font:600 12.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); text-decoration:none}
.nsr-adom-footer__links a:hover{color:var(--neon-hi)}
.nsr-adom-footer__copy{max-width:none; margin:12px 0 0; padding:12px 48px 0; border-top:1px solid var(--hair); font:400 12px/1.6 var(--sans); color:#6d5866}
@media(max-width:600px){
.nsr-adom-footer__in{padding:0 20px}
.nsr-adom-footer__copy{padding:12px 20px 0}
}
/* ===== Cajón lateral del carrito + desplegable de "mi cuenta", con nuestro estilo =====
Copiado del modelo de nosolorol_vampiro, con los colores de ADOM. */
/* fondos a nuestro violeta; el cajón con filo izquierdo y sombra */
#module-nosolorol_adom-display #header .cart_block,
#module-nosolorol_adom-display #header .cart_block .top-block-cart,
#module-nosolorol_adom-display #header .cart_block .cart-summary,
#module-nosolorol_adom-display #header .user-info .dropdown-menu{background:#170718 !important}
#module-nosolorol_adom-display #header .cart_block{border-left:1px solid #5a2c5e !important; box-shadow:-32px 0 90px -30px #000 !important}
#module-nosolorol_adom-display #header .cart_block .top-block-cart{border-bottom:1px solid #43204a !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_adom-display #header .cart_block .cart-item{border-bottom:1px solid #43204a !important}
#module-nosolorol_adom-display #header .cart_block,
#module-nosolorol_adom-display #header .cart_block a,
#module-nosolorol_adom-display #header .cart_block .product-name{color:#f4ecec !important}
/* precios en magenta brillante */
#module-nosolorol_adom-display #header .cart_block .product-price,
#module-nosolorol_adom-display #header .cart_block .value,
#module-nosolorol_adom-display #header .cart_block .cart-total .value{color:#e8497f !important; font-variant-numeric:tabular-nums}
#module-nosolorol_adom-display #header .cart_block .remove-from-cart{color:#9d8290 !important}
#module-nosolorol_adom-display #header .cart_block .remove-from-cart:hover{color:#e8497f !important}
/* barra de envío gratis + botones: magenta, sin amarillo */
#module-nosolorol_adom-display #header .cart_block .fsb-bar-progress{background:#c03060 !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 iba a 217px
y se desbordaba. Por eso aquí el cuerpo y el tracking van más contenidos: es para que quepan. */
#module-nosolorol_adom-display #header .cart_block .btn-primary,
#module-nosolorol_adom-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_adom-display #header .cart_block .btn-primary{background:#c03060 !important; border:1px solid #c03060 !important; color:#fff !important}
#module-nosolorol_adom-display #header .cart_block .btn-primary:hover{filter:brightness(1.12) !important}
/* desplegable de cuenta: filo magenta arriba, enlaces claros con hover magenta */
#module-nosolorol_adom-display #header .user-info .dropdown-menu{border:1px solid #5a2c5e !important; border-top:2px solid #c03060 !important; border-radius:2px !important; box-shadow:0 24px 60px -24px #000 !important}
#module-nosolorol_adom-display #header .user-info .dropdown-menu a{color:#f4ecec !important}
#module-nosolorol_adom-display #header .user-info .dropdown-menu a:hover{background:rgba(192,48,96,.18) !important; color:#fff !important}
/* ================= MODAL "añadido al carrito" =================
Cuelga del , FUERA de .nsr-adom, así que aquí NO valen las variables
(--neon, etc.): van colores literales. */
#module-nosolorol_adom-display #blockcart-modal .modal-content{background:#170718 !important; border:1px solid #5a2c5e !important; border-top:2px solid #c03060 !important; border-radius:3px !important; box-shadow:0 40px 100px -30px #000, 0 0 60px -20px rgba(192,48,96,.4)}
#module-nosolorol_adom-display #blockcart-modal .modal-header{border-bottom:1px solid #43204a !important; background:transparent !important}
#module-nosolorol_adom-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_adom-display #blockcart-modal .modal-body{color:#d3bcc2}
#module-nosolorol_adom-display #blockcart-modal .modal-body a{color:#f4ecec}
#module-nosolorol_adom-display #blockcart-modal .product-name{color:#fff}
#module-nosolorol_adom-display #blockcart-modal .close,
#module-nosolorol_adom-display #blockcart-modal .close span{color:#d3bcc2 !important; opacity:1 !important; text-shadow:none !important}
#module-nosolorol_adom-display #blockcart-modal .close:hover span{color:#e8497f !important}
/* precios / cantidades en magenta */
#module-nosolorol_adom-display #blockcart-modal .product-price,
#module-nosolorol_adom-display #blockcart-modal .cart-content .value{color:#e8497f !important; font-variant-numeric:tabular-nums}
/* botones: "pasar por caja" primario magenta; "seguir comprando" secundario ghost */
#module-nosolorol_adom-display #blockcart-modal .btn-primary{background:#c03060 !important; color:#fff !important; border:1px solid #c03060 !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(192,48,96,.9)}
#module-nosolorol_adom-display #blockcart-modal .btn-primary:hover{filter:brightness(1.12) !important}
#module-nosolorol_adom-display #blockcart-modal .btn-secondary{background:transparent !important; color:#f4ecec !important; border:1px solid #5a2c5e !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_adom-display #blockcart-modal .btn-secondary:hover{border-color:#c03060 !important; color:#fff !important; background:transparent !important}
@media(max-width:760px){
/* MÓVIL · bandas cinemáticas: mismo criterio que los pilares. Arte arriba, texto abajo. */
/* Mismo reparto que los pilares: el texto no encoge, asi que la banda tiene que ser alta
para que le quede sitio a la ilustracion por encima.
El 22% de X la corre a la izquierda: centrada solo se veia el rayo y la ciudad, con las
dos figuras enfrentadas fuera de plano. El 34% de Y sube el encuadre a la zona limpia,
porque el velo pinta opaco la mitad de abajo. */
.nsr-adom-cine,.nsr-adom-cine--tall{min-height:clamp(600px,78vh,700px); align-items:flex-end}
.nsr-adom-cine--tall .nsr-adom-cine__img{background-position:22% 34%}
.nsr-adom-cine__in{padding:0 24px 46px}
/* Reah en móvil: el degradado izq→dcha no sirve (el texto ocupa todo el ancho). Se gira el
eje como en las bandas: arte arriba, texto abajo sobre rosa sólido. */
.nsr-adom-paper{padding:0 0 56px}
/* El arte va a todo el ancho y funde hacia abajo. La mascara va SOBRE EL ARTE, igual que en
escritorio pero girada: el fundido nace en su propio borde inferior y mide lo que mide el
arte. Antes lo hacia el velo, que ocupa la seccion entera (981px frente a los 471 del
arte), asi que sus % median otra cosa: el rosa solido no arrancaba hasta 78px POR DEBAJO
del borde del arte -y por eso no fundia- y el fundido empezaba arriba del todo, tapando
casi todo el retrato. Aqui el ultimo 28% del arte es todo el fundido. */
.nsr-adom-paper__art{inset:0 0 auto 0; width:100%; height:58vh; aspect-ratio:auto;
background-position:center top;
-webkit-mask-image:linear-gradient(180deg, #000 0 72%, rgba(0,0,0,.55) 88%, transparent 100%);
mask-image:linear-gradient(180deg, #000 0 72%, rgba(0,0,0,.55) 88%, transparent 100%)}
.nsr-adom-paper__veil{background:none}
.nsr-adom-paper__in{grid-template-columns:1fr; gap:0; padding-top:48vh}
.nsr-adom-cine::before{background:
linear-gradient(0deg, var(--void) 0%, var(--void) 32%, rgba(14,2,8,.86) 50%, rgba(14,2,8,.4) 68%, transparent 92%),
linear-gradient(180deg, rgba(14,2,8,.7) 0%, transparent 16%)}
.nsr-adom-quote{max-width:none}
/* MÓVIL · hero: el logo y el texto se apoyan abajo; la entidad se ve arriba.
El padding-top es lo que decide cuánto arte se ve. A 180px la ilustración lucía más,
pero el hero se iba a 871px y los botones caían fuera del primer pantallazo. */
.nsr-adom-hero__in{padding:96px 24px 52px}
/* En movil VUELVE a cover: el 140% de 375px no llegaria a cubrir el hero de alto.
Aqui solo cabe una franja del 30% de la ilustracion, y centrada dejaba fuera a la
entidad (vive en el 77%) y se veia cielo vacio. El 84% encuadra del 58% al 88%. */
.nsr-adom-hero__art{background-size:cover; background-position:84% 18%}
.nsr-adom-hero__veil{background:
linear-gradient(0deg, var(--void) 0%, var(--void) 40%, rgba(14,2,8,.88) 58%, rgba(14,2,8,.4) 76%, transparent 96%),
linear-gradient(180deg, rgba(14,2,8,.72) 0%, transparent 22%)}
.nsr-adom-sec{padding:66px 0}
.nsr-adom-paper{padding:66px 0}
}