/* Acabado «arte» (maqueta del director de arte, 2026-10-27): la landing con las piezas dibujadas para la web (arte/), que se usan tal cual. Va después de sencillo.css y lo sobrescribe: todo bajo html.wl-kx.wl-fiel.wl-arte body.wl-landing, una clase más que las capas anteriores, para ganar sin !important. Escala: las piezas están dibujadas a 1,5× su tamaño en pantalla (en la maqueta de la cabecera, a tamaño real, el botón de la demo de 476 px mide 324 px): se pintan al 68 %. Las demás maquetas son capturas reducidas al ~75,6 % de una página de ~1700 px de ancho; las medidas de bloques y separaciones de este fichero son las suyas a tamaño real. Los paneles y cintas se estiran con border-image (9 piezas): las esquinas y los remates quedan a su tamaño (al 68 %) y solo se estira el centro, así una misma pieza vale para cualquier tamaño de panel. Las piezas que necesitan elemento propio (personajes que asoman, cabecera de Comunidad, emblema de la ficha...) las pone arte.js. */ html.wl-kx.wl-fiel.wl-arte { --a-ink: #5a3a1c; --a-text: #8f6d4c; --a-cream: #fbf3dc; --a-font: var(--wenc-kit-font, "Averia Libre"), Georgia, serif; } /* ── Piezas comunes ─────────────────────────────────────────────────────────────────────────────────────────── */ /* Antetítulos: el banner turquesa con remates de hojas (banner_section, 518×84 → 352×57). Mismo ancho en todas las secciones, como en la maqueta; solo crece si el texto no cabe (idiomas largos) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .wl-head .eyebrow { box-sizing: border-box; min-width: 352px; height: 57px; margin-bottom: 18px; padding: 2px 30px 0; background: none; border: solid transparent; border-width: 0 61px; border-image: url(arte/banner_section.webp) 0 90 fill / 0 61px stretch; color: #ffd23a; font: 700 27px/55px var(--a-font); letter-spacing: .01em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(10, 50, 50, .6); /* (centrado: con el ancho mínimo de la cinta el texto quedaba a la izquierda) */ display: inline-flex; align-items: center; justify-content: center; text-align: center; } /* Titulares: amarillo miel con degradado y un canto oscuro abajo. En El juego, sobre el cielo, marrón con el acento naranja */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-poster, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-poster :is(.w, .w-leaf, .w-honey) { color: #ffc61a; -webkit-text-stroke: 0; text-shadow: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-poster :is(.w, .w-leaf, .w-honey) { background: linear-gradient(180deg, #fed100 0%, #f3b700 38%, #efab00 55%, #e99e00 92%, #efb100 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* (colores y sombra medidos en la maqueta: dorado saturado de #fed100 a #e99e00 y una sombra suave oscura, sin canto) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-poster { rotate: 0deg; line-height: .82; letter-spacing: 0; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .35)); } /* (en la maqueta el titular queda a ~32 px del antetítulo, ~60 en El juego, y las dos líneas casi se tocan) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .wl-head h2.k-poster { margin-top: -10px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .wl-pitch .wl-head h2.k-poster { margin-top: 37px; } /* (los otros titulares de dos líneas llevan descendentes: con el interlineado de El juego se montaban) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .wl-points .wl-head h2.k-poster { margin-top: 24px; line-height: .95; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .wl-book .wl-head h2.k-poster { margin-top: 24px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .wl-family .wl-head h2.k-poster { margin-top: 23px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .wl-fight .wl-head h2.k-poster { margin-top: 14px; } /* (lo que viene después del titular, a la distancia de la maqueta) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-family .wl-head { margin-bottom: -32px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-fight .wl-head { margin-bottom: 67px; } /* Textos de párrafo: peso normal (las capas anteriores los dejaban en 300, más finos que en la maqueta) y las negritas del texto, en negrita de verdad */ html.wl-kx.wl-fiel.wl-arte body.wl-landing :is(.wl-pitch .copy p, .wl .card p, .wl-family .family-text, .wl .arena .now span, .wl-volcano .vbox > p, .wl-fight .fight-text) { font-weight: 400; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-pitch .copy p b { font-weight: 700; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .wl-pitch .k-poster { filter: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .wl-pitch .k-poster .w { background: none; -webkit-text-fill-color: #5a3a1c; color: #5a3a1c; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .wl-pitch .k-poster .w-leaf { background: linear-gradient(180deg, #ef9a3c, #d8681c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* (sin los destellos de los extremos del titular) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-poster .w::before, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-poster .w::after { display: none; } /* Cinta amarilla con hojas (T_Banner_header, la de banner_section en amarillo: 452×72, remates de 78 px): etiquetas que cruzan el canto de un panel (cartas, combate, ficha, comunidad, libro, cierre). Remates a escala con el alto de cada cinta (--rw = 78 × alto / 72) y el centro estirado */ html.wl-kx.wl-fiel.wl-arte body.wl-landing :is(.wl .card h3, .wl .arena .now b, .wl .lore-card .meta, .wl-volcano .vtag, .wl-soon-tag, .wl-final .box h2.k-poster) { display: flex; align-items: center; justify-content: center; width: fit-content; box-sizing: border-box; margin-left: auto; margin-right: auto; -webkit-mask: none; mask: none; clip-path: none; rotate: 0deg; box-shadow: none; background: none; border: solid transparent; border-width: 0 var(--rw, 44px); border-image: url(arte/t_banner_header.webp) 0 78 fill / 0 var(--rw, 44px) stretch; filter: drop-shadow(0 3px 0 rgba(90, 60, 20, .3)); color: var(--a-text); -webkit-text-stroke: 0; text-shadow: none; white-space: nowrap; } /* (en las cintas grandes de título, COMMUNITY y GET THE GAME, la letra es más oscura) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .vtag { color: #734518; } /* Botón principal (jugar la demo): button_play_off (476×118 → 324×80), y button_play_on al pasar el ratón. La etiqueta FREE (free, 141×85 → 96×58) asoma por detrás, arriba. (Los !important ganan a los del kit de la enciclopedia, wenc-kit.css, que pinta sus cintas así) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl a.demo-cta.wenc-ribbon-yellow { position: relative; isolation: isolate; display: flex !important; align-items: center; justify-content: center; /* Ancho fijo (la pieza no se estira) y el texto solo en la parte recta: las puntas miden ~44 px a este alto. 26 px es el máximo; arte.js lo baja si un idioma no cabe */ box-sizing: border-box; width: 324px; min-width: 0; height: 80px !important; min-height: 0; padding: 0 48px 10px !important; margin: 0 auto; border: 0; border-image: none; white-space: nowrap; background: none !important; filter: drop-shadow(0 0 12px rgba(120, 220, 40, .45)); color: #fff !important; font: 700 26px/1 var(--a-font); font-size: 26px !important; letter-spacing: .01em; text-transform: uppercase; text-shadow: 0 2px 0 #3c8a0a; } /* (el botón se pinta en ::after y no de fondo del enlace: así la etiqueta FREE, con z-index menor, queda detrás y solo asoma por arriba, como en la maqueta) */ /* (en 9 piezas: las puntas, 60 px de los 118 de alto de la textura, a la escala de la altura del botón —arte.js pone --kx-after-l/-r: 41 px a 80 de alto, 35 a los 69 del móvil—; a 100% 100% se deformaba con el ancho) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl a.demo-cta.wenc-ribbon-yellow::after { content: ""; position: absolute; inset: 0; z-index: -1; display: block; background: none; border: solid transparent; border-width: 0 var(--kx-after-r, 41px) 0 var(--kx-after-l, 41px); border-image: url(arte/button_play_off.webp) 0 60 fill / 0 var(--kx-after-r, 41px) 0 var(--kx-after-l, 41px) stretch; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl a.demo-cta.wenc-ribbon-yellow:hover { transform: none; translate: 0 -2px; color: #8a5a1c !important; text-shadow: none; filter: drop-shadow(0 0 12px rgba(255, 200, 60, .5)); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl a.demo-cta.wenc-ribbon-yellow:hover::after { border-image-source: url(arte/button_play_on.webp); } /* (8 px a cada lado: en idiomas largos, como «ÜCRETSİZ», arte.js baja la letra hasta que cabe entre ellos) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl a.demo-cta .new { z-index: -2; top: -27px; width: 96px; height: 58px; padding: 4px 8px 0; box-sizing: border-box; border-radius: 0; box-shadow: none; background: url(arte/free.webp) center top / 100% 100% no-repeat; color: #fff; font: 700 21px/1 var(--a-font); text-align: center; text-shadow: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .cta-main > .kf-glow, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .cta-main > .kf-rays { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .cta-main > a { filter: none; } /* Botón de wishlist marrón (button_Wishlist, 326×68 → 222×46). En 9 piezas: los extremos redondeados (24 px de la textura) a la escala de la altura del botón y solo el centro estirado; a 100% 100% se deformaba con cada ancho. (14 px de relleno a cada lado, después de los extremos: con 2 el texto tocaba la curva y en algunos idiomas se salía. Si no cabe en una línea pasa a dos y el botón crece a lo alto, con los extremos a su escala (arte.js). La textura lleva arriba un bisel claro (filas 5 a 7 de 68, más grueso cuanto más alto es el botón) y debajo de la cara, de la 60 a la 67, sombra: el texto en varias líneas no debe pisar ninguno de los dos, de ahí 10 px arriba y 12 abajo, que además lo centran en la cara; con 4 abajo y 0 arriba quedaba alto. En una línea manda el alto mínimo) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing :is(.wl-proof a.store, .wl-final .ctas a.wenc-ribbon-teal, .wl-soon-card a.wenc-ribbon-teal) { display: inline-flex !important; align-items: center; justify-content: center; gap: 9px; box-sizing: border-box; width: auto; min-width: 222px; max-width: 100%; height: auto; min-height: 46px; padding: 10px 14px 12px !important; text-align: center; white-space: normal; line-height: 1.1 !important; border: solid transparent; border-width: 0 16px; border-image: url(arte/button_wishlist.webp) 0 24 fill / 0 16px stretch; border-radius: 0; rotate: 0deg; box-shadow: none; filter: none; background: none !important; color: #fff4dc !important; font: 700 18px/1.1 var(--a-font); font-size: 18px !important; letter-spacing: 0; text-transform: none; text-shadow: none; } /* (las dos que no traen el icono de Steam en el HTML lo llevan aquí, como en la maqueta) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing :is(.wl-final .ctas a.wenc-ribbon-teal, .wl-soon-card a.wenc-ribbon-teal)::before { content: "\f1b6"; font: 400 19px/1 "Font Awesome 5 Brands"; } html.wl-kx.wl-fiel.wl-arte body.wl-landing :is(.wl-proof a.store, .wl-final .ctas a.wenc-ribbon-teal, .wl-soon-card a.wenc-ribbon-teal):hover { transform: none; translate: 0 -2px; filter: none; color: #ffd23a !important; } /* Laureles: los dos en una sola pieza (accolades, 384×129 → 261×88) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing :is(.wl-proof .laurels, .wl-final .final-laurels) { width: 261px; height: 88px; padding: 0; border: 0; border-radius: 0; rotate: 0deg; box-shadow: none; filter: none; background: url(arte/accolades.webp) center / contain no-repeat; } html.wl-kx.wl-fiel.wl-arte body.wl-landing :is(.wl-proof .laurels, .wl-final .final-laurels) > * { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing :is(.wl-proof .laurels, .wl-final .final-laurels)::before { display: none; } /* Personajes que asoman (arte.js) */ html.wl-kx.wl-fiel.wl-arte .ar-pop { position: absolute; z-index: 7; pointer-events: none; background: center / contain no-repeat; filter: drop-shadow(0 6px 6px rgba(30, 20, 0, .25)); } /* Contenedores de Elementor de cada sección: sin «wrap». En columna y con wrap, Chrome mide la sección a otro ancho antes de colocarla y el contenedor se quedaba más alto que ella (38 px de franja oscura bajo Key points y 71 bajo Combate a 700 px) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .e-con:has(> .elementor-widget > .elementor-widget-container > .wl) { flex-wrap: nowrap; } /* ── Fondos desenfocados de Key points, Gallery y Family: con más contraste (lo pidió el usuario, dos veces). Sin el velo claro, la imagen con más contraste y color, y el fundido de abajo hacia el azul pálido más corto (200 → 110 px: era lo que más los deslavaba); el desenfoque se queda para que el texto se lea ─────────────────────────────────── */ /* (2026-10-28: fondos nuevos del usuario, con el desenfoque y el contraste ya aplicados en la imagen: sin ningún filtro aquí; nombres nuevos para que no se vean los antiguos de la caché de una semana) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-points::before { background: url(../img/bg-points-2.webp) center 50% / cover; filter: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-gallery::before { background: url(../img/bg-gallery-2.webp) center 50% / cover; filter: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-family::before { background: url(../img/bg-family-2.webp) center 40% / cover; filter: none; } /* Cortes de papel entre dos fondos con imagen (Key points → Gallery → Family), sin fundidos: la imagen de arriba sigue 40 px por debajo de su sección y queda detrás del canto rasgado de la de abajo, que es transparente por encima del rasgado. Antes la de arriba fundía a un azul pálido y el papel cortaba ese azul (o lo pintaba el propio k-torn). (Las secciones recortan con clip-path y no con overflow, que no deja asomar nada por abajo; el ::before ya iba 20 px más grande por cada lado para que el desenfoque no aclare los bordes) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing :is(.wl-points, .wl-gallery) { overflow: visible; clip-path: inset(0 0 -40px 0); } html.wl-kx.wl-fiel.wl-arte body.wl-landing :is(.wl-points, .wl-gallery)::before { bottom: -60px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing :is(.wl-gallery, .wl-family) { background: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing :is(.wl-points, .wl-gallery, .wl-family)::before { -webkit-mask-image: var(--k-torn-mask), linear-gradient(#000, #000); mask-image: var(--k-torn-mask), linear-gradient(#000, #000); -webkit-mask-size: 900px 36px, 100% calc(100% - 56px); mask-size: 900px 36px, 100% calc(100% - 56px); -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-points::before { -webkit-mask-position: 20px 20px, 0 56px; mask-position: 20px 20px, 0 56px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-gallery::before { -webkit-mask-position: -297px 20px, 0 56px; mask-position: -297px 20px, 0 56px; } /* (la familia entra con su propio canto, como la galería: arte.js le pone el k-torn-in; el trazo, desplazado otra vez para que no se repita) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-family::before { -webkit-mask-position: -560px 20px, 0 56px; mask-position: -560px 20px, 0 56px; } html.wl-kx.wl-fiel.wl-arte .wl-family .k-torn-in { background-position: -580px 0; } html.wl-kx.wl-fiel.wl-arte .wl-gallery .k-torn--dusk { display: none; } /* Separadores (2026-10-28): la tira de papel rasgado del usuario (papel_roto, 2538×49: papel crema con los dos cantos rasgados y su sombra, transparente arriba y abajo) a caballo de cada frontera, sobre las dos secciones. Las imágenes de abajo empiezan en recto a 24 px, en el centro de la tira, y la de arriba sigue por debajo (clip-path -40 px), así que la junta queda tapada por el papel. Sustituye al trazo SVG (--k-torn-mask) y a su fibra (el corte recto a 24 px se cambió luego por uno que sigue el centro del papel: ver «Junta por el centro del papel») */ html.wl-kx.wl-fiel.wl-arte body.wl-landing :is(.wl-points, .wl-gallery, .wl-family)::before { -webkit-mask-image: linear-gradient(transparent 44px, #000 44px); mask-image: linear-gradient(transparent 44px, #000 44px); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: 0 0; mask-position: 0 0; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-torn-in { top: 0; z-index: 3; height: 49px; background: url(arte/papel-roto.webp) 50% 0 / auto 49px repeat-x; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-gallery .k-torn-in { background-position: 30% 0; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-family .k-torn-in { background-position: 70% 0; } /* (la de «El juego» → Kuxaan va al pie de «El juego»: la siguiente sección es el cielo sin imagen) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-pitch .k-torn { bottom: -24px; z-index: 3; height: 49px; background: url(arte/papel-roto.webp) 10% 100% / auto 49px repeat-x; } /* (y la de familia → Community, que seguía con el trazo SVG de k-torn--ember: va al pie de la familia, que ahora recorta con clip-path para dejar asomar la tira 24 px por abajo. El clip-path crea un contexto de apilamiento y el z-index de la tira ya no la sube sobre Community, que va después: por eso la familia lleva su propio z-index) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-family { overflow: visible; clip-path: inset(0 0 -24px 0); z-index: 1; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .wl-family .k-torn--ember { bottom: -24px; z-index: 3; height: 49px; } /* Junta por el centro del papel: el centro de la tira sube y baja entre 13 y 33 px y su parte opaca llega a tener solo 8 px, así que con un corte recto la imagen de arriba asomaba por debajo del papel en unos sitios y la de abajo por encima en otros. Cada fondo acaba ahora en el centro de la tira con una máscara sacada de la propia tira (papel-roto-bajo: opaco por debajo del centro; papel-roto-alto: por encima), colocada igual que el papel. Los ::before van 20 px más anchos por cada lado: de ahí la corrección en px de cada posición en % (20 − 40 × %). - Arriba de una sección (Key points, galería, familia): su imagen empieza en el centro; la de arriba ya sigue 40 px por debajo. Key points tiene encima el cielo del Kuxaan: su color de fondo pasa a ser el de ese cielo. */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-points { --k-seam-in: calc(50% + 0px); background-color: #b9e1fb; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-gallery { --k-seam-in: calc(30% + 8px); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-family { --k-seam-in: calc(70% - 8px); } /* (en todas estas máscaras la parte lisa se mete 1 px bajo el papel, cuyas filas de ese lado son opacas: tocándose justo, con escalas de pantalla fraccionarias ninguna de las dos cubría del todo la fila de la junta y se veía una línea oscura de lado a lado) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing :is(.wl-points, .wl-gallery, .wl-family)::before { -webkit-mask: url(arte/papel-roto-bajo.webp) var(--k-seam-in) 20px / auto 49px repeat-x, linear-gradient(#000, #000) 0 68px / 100% 100% no-repeat; mask: url(arte/papel-roto-bajo.webp) var(--k-seam-in) 20px / auto 49px repeat-x, linear-gradient(#000, #000) 0 68px / 100% 100% no-repeat; } /* - Al pie de una sección («El juego», familia): su imagen se alarga hasta el final de la tira y acaba en el centro. La de «El juego» pasa de la sección a su ::before para poder alargarla y enmascararla. Por encima de la frontera y por debajo del centro no queda nada de la sección: la tira lo pinta con el color con el que empieza la sección siguiente (::before, enmascarado con papel-roto-bajo), y el papel va en su ::after */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-pitch { z-index: 1; background: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-pitch::before { content: ''; position: absolute; inset: 0 0 -24px; z-index: -1; background: #8fd0f5 url(../img/pitch-day.webp) center 60% / cover; -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 48px) no-repeat, url(arte/papel-roto-alto.webp) 10% 100% / auto 49px repeat-x; mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 48px) no-repeat, url(arte/papel-roto-alto.webp) 10% 100% / auto 49px repeat-x; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-family::before { bottom: -24px; -webkit-mask: url(arte/papel-roto-bajo.webp) var(--k-seam-in) 20px / auto 49px repeat-x, linear-gradient(#000, #000) 0 68px / 100% calc(100% - 116px) no-repeat, url(arte/papel-roto-alto.webp) calc(40% + 4px) 100% / auto 49px repeat-x; mask: url(arte/papel-roto-bajo.webp) var(--k-seam-in) 20px / auto 49px repeat-x, linear-gradient(#000, #000) 0 68px / 100% calc(100% - 116px) no-repeat, url(arte/papel-roto-alto.webp) calc(40% + 4px) 100% / auto 49px repeat-x; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-pitch .k-torn { --k-paper-x: 10%; --k-below: #b9e1fb; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .wl-family .k-torn--ember { --k-paper-x: 40%; --k-below: #3d0a05; } html.wl-kx.wl-fiel.wl-arte body.wl-landing :is(.wl-pitch .k-torn, .wl .wl-family .k-torn--ember) { background: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing :is(.wl-pitch .k-torn, .wl .wl-family .k-torn--ember)::after { content: ''; position: absolute; inset: 0; background: url(arte/papel-roto.webp) var(--k-paper-x) 0 / auto 49px repeat-x; } html.wl-kx.wl-fiel.wl-arte body.wl-landing :is(.wl-pitch .k-torn, .wl .wl-family .k-torn--ember)::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 25px; background: var(--k-below); -webkit-mask: url(arte/papel-roto-bajo.webp) var(--k-paper-x) 0 / auto 49px repeat-x; mask: url(arte/papel-roto-bajo.webp) var(--k-paper-x) 0 / auto 49px repeat-x; } /* ── Pestañas laterales: el banner turquesa cortado por la derecha; la activa, en amarillo ────────────────────── */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-tabs { gap: 0; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-tabs .k-tab { position: relative; justify-content: flex-start; box-sizing: border-box; width: 200px; height: 41px; padding: 1px 0 0 46px; border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 3px 3px rgba(10, 30, 40, .3)); translate: 0 0; background: url(arte/banner_section.webp) left center / 253px 41px no-repeat; color: #ffd23a; transition: translate .2s; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-tabs .k-tab i { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-tabs .k-tab .k-tab-name { position: static; display: block; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; opacity: 1; margin: 0; padding: 0; background: none; box-shadow: none; translate: none; transform: none; color: inherit; font: 700 20px/1 var(--a-font); letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 1px rgba(10, 50, 50, .5); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-tabs .k-tab .k-tab-name::before, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-tabs .k-tab .k-tab-name::after { display: none; } /* Hover: the tab grows 6 px to the left instead of moving, so it stays flush with the window's right edge (the column aligns to the right) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-tabs .k-tab { transition: translate .2s, width .2s; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-tabs .k-tab:hover { width: 206px; translate: 0 0; background-color: transparent; } /* (la activa, la misma cinta en amarillo, T_Banner_header: 452×72 a 41 px de alto = 257 de ancho, cortada igual) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-tabs .k-tab.on { background: url(arte/t_banner_header.webp) left center / 257px 41px no-repeat; color: #8a5a1c; text-shadow: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-tabs .k-tab.on .k-tab-name { text-shadow: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-tabs .k-tab::before, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-tabs .k-tab::after { display: none; } /* Sin sitio para las pestañas enteras (~200 px a la derecha del contenido, que mide ~1150): asoma solo el remate y el nombre sale al pasar el ratón */ @media (max-width: 1599px) { html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-tabs .k-tab { translate: 154px 0; transition: translate .2s; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-tabs .k-tab:is(:hover, :focus-visible) { translate: 0 0; } } /* ── Ritmo vertical: las capas anteriores dejaban 100-150 px de aire arriba y abajo de cada sección; las maquetas, ~60-90 px entre el canto rasgado y el antetítulo y entre el último bloque y el canto de abajo. (El juego arranca más abajo porque la banda de reseñas se le monta ~66 px) ── */ @media (min-width: 1101px) { /* (del último bloque de una sección a la cinta de la siguiente, ~130-150 px en todas; El juego deja más abajo para que se vea el primer plano de su ilustración) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-pitch.wl-sec { padding-top: 160px; padding-bottom: 130px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-book.wl-sec { padding-top: 50px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-points.wl-sec { padding-top: 80px; padding-bottom: 60px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-gallery.wl-sec { padding-top: 80px; padding-bottom: 50px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-family.wl-sec { padding-top: 80px; padding-bottom: 80px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano.wl-sec { padding-bottom: 40px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-fight.wl-sec { padding-top: 90px; padding-bottom: 80px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-soon { padding-bottom: 0; } /* (el contenedor de Elementor del libro añade 96 px debajo) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .e-con:has(> .elementor-element .wl-soon) { padding-bottom: 46px; } /* Cierre: la ilustración del fondo (bg-final, a todo el ancho) subida un 12 % de su alto y el contenido con ella; antes quedaban ~420 px de ilustración vacía entre Combate y la caja */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final.wl-sec { padding-top: calc(min(56.25vw, 1080px) * .40); background-position: center calc(min(56.25vw, 1080px) * -.12); } /* (el degradado que funde la ilustración con el azul liso de debajo termina donde termina ella: subida un 12 % y sin el tope de 1080 px, porque la imagen va a todo el ancho; antes acababa más abajo y se veía su borde) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final.wl-sec::before { height: calc(56.25vw - min(56.25vw, 1080px) * .12); } } /* El pie del cierre se funde con su azul liso (2026-10-28): los vlügkin de los lados bajan más que la sección (a 1920 px, 199 px), que los cortaba en seco sobre el pie de página. Por encima de ellos y de las esporas (z 1) y por debajo del contenido (.wrap, z 2) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final.wl-sec::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 260px; pointer-events: none; background: linear-gradient(rgba(18, 24, 48, 0), #121830 85%); } /* ── 1. Cabecera ───────────────────────────────────────────────────────────────────────────────────────────── */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-hero .hero-logo { filter: none; } /* Medidas de la maqueta de la cabecera (captura a tamaño real de una ventana de 1770 px): 661 px de alto, la columna pegada abajo a 110 px, logo de 602 y huecos de ~21 px entre logo, botón, «Have Steam?» y enlaces */ @media (min-width: 1101px) { html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-hero { height: 661px; min-height: 0; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-hero .hero-content { padding-left: 115px; padding-bottom: 110px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-hero .hero-logo { width: 602px; max-width: none; height: auto; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-hero .cta-main { margin-top: 21px; margin-bottom: 6px; } } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-hero .steam-install { box-sizing: border-box; height: 21px; margin-top: 16px; padding: 0 12px; font-size: 12.5px; line-height: 21px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-hero .hero-links { margin-top: 7px; gap: 25px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-hero .hero-links a.k-tag { box-sizing: border-box; height: 36px; padding: 0 11px 0 7px; font-size: 15px; } /* ── 2. Banda de miel (bar_section): laureles, las tres citas en bocadillo y, a la derecha, reseñas y wishlist ──── */ /* La pieza va a todo el ancho con su proporción (2538×406): la inclinación está dibujada. El amarillo va del 26 al 89 % del alto en el borde izquierdo y del 9 al 72 % en el derecho; el resto es transparente. Los márgenes negativos meten esas esquinas bajo la cabecera y El juego (si no, asoma el fondo de la página) */ /* (columnas y huecos de la maqueta: laureles 262 y 68 hasta la primera cita, tres citas de 187 con 16 entre ellas, 27 hasta reseñas y wishlist, de 221; el conjunto, 11 px a la derecha del centro. Los huecos que no son de 16 van dentro de la columna: 314 = 262 + 52, 232 = 11 + 221) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof.k-band { display: grid; grid-template-columns: 314px 187px 187px 187px 232px; grid-template-rows: auto auto; align-content: center; align-items: center; justify-content: center; gap: 8px 16px; width: 100%; aspect-ratio: 2538 / 406; min-height: 0; margin: -4.4vw 0 -4.6vw; padding: 1vw 4% 1.6vw calc(4% + 38px); box-sizing: border-box; rotate: 0deg; border: 0; box-shadow: none; background: url(arte/bar_section.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 14px 14px rgba(16, 30, 70, .25)); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof .laurels { grid-row: 1 / 3; justify-self: start; margin: 34px 0 0; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof blockquote { position: relative; grid-row: 1 / 3; align-self: center; box-sizing: border-box; width: 187px; min-height: 100px; max-width: none; padding: 14px 14px 10px !important; display: block; opacity: 1; border-radius: 14px; background: #fffaeb !important; box-shadow: 0 6px 12px -6px rgba(110, 60, 0, .4) !important; color: #6a4424; font-size: 14.5px; line-height: 1.3; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof blockquote::before { display: none; } /* (la cola del bocadillo, abajo a la izquierda: un cuadrado girado con el filete del bocadillo en sus dos lados de abajo. Antes era un triángulo recortado, pero heredaba el giro, el sesgo y los bordes de kuxaan.css y fiel.css y salía partido) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof blockquote::after { content: ""; position: absolute; left: 28px; bottom: -8px; box-sizing: border-box; width: 15px; height: 15px; background: #fffaeb; border: solid #e2cd9c; border-width: 0 2px 2px 0; border-radius: 0 0 3px 0; clip-path: none; transform: rotate(45deg); display: block; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof blockquote:nth-of-type(1) { rotate: -3deg; translate: 0 8px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof blockquote:nth-of-type(2) { rotate: -1deg; translate: 0 2px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof blockquote:nth-of-type(3) { rotate: -2deg; translate: 0 -2px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof blockquote cite { margin-top: 8px; color: #2e8f86; font-size: 12px; font-weight: 700; letter-spacing: .12em; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof .wl-quotes-dots { display: none; } /* (la línea de abajo puede partirse: en italiano, «Recensioni della demo su Steam», no cabía ni a 8 px; la caja crece a lo alto, no a lo ancho) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof .steam-reviews em { white-space: normal; line-height: 1.15; letter-spacing: .08em; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof .steam-reviews { grid-column: 5; grid-row: 1; align-self: end; box-sizing: border-box; width: 221px; height: auto; min-height: 70px; margin-left: 11px; rotate: 0deg; border: 0; border-radius: 12px; background: #fffaeb; padding: 8px 12px; } /* (tan ancho como la nota de Steam de encima, 221: con el ancho del contenido salía más largo que ella, 259 en inglés. El texto que no cabe en una línea pasa a dos, centradas, y el botón crece a lo alto; arte.js baja la letra desde estos 16 px hasta 13 para que quepa en dos, y si ni así, como en francés, «Ajoute-le à ta liste de souhaits sur Steam», va en tres) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof.k-band a.store.store { position: static; grid-column: 5; grid-row: 2; align-self: start; justify-self: start; box-sizing: border-box; width: 221px; min-width: 0; height: auto; min-height: 42px; margin-left: 11px; padding: 10px 14px 12px !important; gap: 8px; justify-content: center; font-size: 16px !important; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof a.store i { flex: none; font-size: 24px; line-height: 1; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof a.store span { display: block; min-width: 0; white-space: normal; text-align: center; overflow-wrap: break-word; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof a.store :is(small, b) { font: inherit; color: inherit; letter-spacing: 0; text-transform: none; } /* (en la página no hay espacio entre «Wishlist now on» y «Steam»; lo ponía el hueco del flex, y con el texto en líneas lo pone esto, que en un salto de línea desaparece) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof a.store small::after { content: " "; } /* ── 3. El juego: el texto en el pergamino (panel_bg_01, 750×543 → 510×369) con Mushry y Woolra; el tráiler en su marco (frame_video). Juntos miden ~1150 px: texto 510, hueco 60, tráiler 580 ───────────────────────────────── */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-pitch .wrap.grid { max-width: 1131px; margin-top: -3px; translate: -7px 0; grid-template-columns: 510px 1fr; gap: 60px; align-items: center; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-pitch .copy { box-sizing: border-box; width: 510px; min-height: 357px; padding: 18px 6px 0 9px; border: solid transparent; border-width: 48px; border-image: url(arte/panel_bg_01.webp) 110 110 118 fill / 75px 75px 81px stretch; background: none; filter: drop-shadow(0 16px 20px rgba(16, 30, 70, .25)); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-pitch .copy p { margin: 0 0 24px; color: #653d1a; font-size: 17px; line-height: 25px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-pitch .copy p:last-of-type { margin-bottom: 0; } /* La W inicial, en línea: solo algo más grande y en naranja (no la capitular flotante de kuxaan.css) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-pitch .copy p.lead:first-of-type::first-letter { float: none; margin: 0; font-size: 1.4em; line-height: 1; font-weight: 700; color: #e07a26; -webkit-text-stroke: 0; text-shadow: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-pitch .copy::before { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-pitch .copy > .k-deco { display: none; } /* Mushry asoma por detrás de la esquina de arriba del panel (es hermano del panel en .wrap, que hace de contexto de apilado: con z-index -1 queda detrás del panel y delante del fondo). Le quedan unos 50 px escondidos detrás. */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-pitch .wrap > .ar-mushry { display: block; z-index: -1; left: 6px; top: -158px; width: 170px; height: 194px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-pitch .copy .ar-woolra { display: block; right: -105px; bottom: -121px; width: 160px; height: 193px; } /* Tráiler: el marco crema fino (frame_video) encima de la imagen y el botón redondo de reproducir (107 → 73) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .trailer { border-radius: 16px; box-shadow: 0 22px 36px -16px rgba(16, 30, 70, .5); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .trailer img { border-radius: 16px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .trailer::before { display: none; } /* (la línea crema de la pieza va ~20 px dentro de su borde: con -20 px cae sobre el canto del vídeo) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .trailer::after { inset: -20px; border-radius: 0; box-shadow: none; border: solid transparent; border-width: 41px; border-image: url(arte/frame_video.webp) 60 / 41px stretch; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .trailer > .k-corner { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .trailer .play-big b { width: 73px; height: 74px; border: 0; border-radius: 0; box-shadow: none; font-size: 0; color: transparent; background: url(arte/button_play_video.webp) center / contain no-repeat; filter: drop-shadow(0 6px 10px rgba(20, 10, 0, .35)); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .trailer .play-big b::before, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .trailer .play-big::before, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .trailer .play-big::after { display: none; } /* «Watch trailer»: una pastilla crema bajo el vídeo (201×33). Es CSS, no una textura: crece con el texto en los idiomas largos («Voir la bande-annonce») en vez de dejar la flecha fuera */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .trailer .k-cap { left: 50%; right: auto; width: max-content; min-width: 201px; height: 33px; box-sizing: border-box; bottom: -56px; translate: -50% 0; rotate: 0deg; padding: 0 18px; border-radius: 999px; background: var(--a-cream); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 12px -6px rgba(16, 30, 70, .45); color: var(--a-ink); font: 700 14px/1 var(--a-font); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .trailer .k-cap::before { content: "▶"; margin-right: 10px; font-size: .75em; } /* ── 4. Kuxaan (libro cerrado): el libro con sus plantas (Kuxaan, 1662×850 → 1130×578), el candado (lock, 162 → 110) sobre el canto de las páginas y el aviso en ellas ──────────────────────────────────────────────────────────── */ /* (--a-bw: ancho del libro; los márgenes y el candado van en proporción a él para caer siempre sobre las páginas) */ /* (en la maqueta el libro sube hasta quedar con las plantas detrás del titular) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-soon { display: flex; justify-content: center; container-type: inline-size; margin-top: -114px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .wl-book .wl-head { position: relative; z-index: 2; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-soon-card { --a-bw: min(1130px, 100cqw); box-sizing: border-box; width: var(--a-bw); aspect-ratio: 1662 / 850; max-width: none; padding: calc(var(--a-bw) * .193) calc(var(--a-bw) * .3) calc(var(--a-bw) * .07); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: url(arte/kuxaan.webp) center / contain no-repeat; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-soon-card::before { display: none; } /* Nubes del cielo del Kuxaan (2026-10-28): las nuevas del usuario (mismas proporciones que las anteriores) y un 60 % más grandes, como en su referencia; en móvil, un 50 % */ html.wl-kx.wl-fiel.wl-arte .k-cloud { background-image: url(arte/cloud-a-3.webp); } html.wl-kx.wl-fiel.wl-arte :is(.k-cloud--2, .k-cloud--5) { background-image: url(arte/cloud-b-3.webp); } html.wl-kx.wl-fiel.wl-arte :is(.k-cloud--3, .k-cloud--6) { background-image: url(arte/cloud-c-3.webp); } html.wl-kx.wl-fiel.wl-arte .k-cloud--1 { width: 700px; } html.wl-kx.wl-fiel.wl-arte .k-cloud--2 { width: 900px; } html.wl-kx.wl-fiel.wl-arte .k-cloud--3 { width: 830px; } html.wl-kx.wl-fiel.wl-arte .k-cloud--4 { width: 610px; } html.wl-kx.wl-fiel.wl-arte .k-cloud--5 { width: 480px; } html.wl-kx.wl-fiel.wl-arte .k-cloud--6 { width: 540px; } /* (con el libro abierto, muy alto y que cambia de alto con cada pestaña, las nubes que iban ancladas al pie quedaban escondidas tras él: todas arriba, como las plantas) */ html.wl-kx.wl-fiel.wl-arte:not(.wl-book-locked) .k-cloud--3 { top: 360px; bottom: auto; } html.wl-kx.wl-fiel.wl-arte:not(.wl-book-locked) .k-cloud--4 { top: 520px; bottom: auto; } html.wl-kx.wl-fiel.wl-arte:not(.wl-book-locked) .k-cloud--6 { top: 280px; bottom: auto; } @media (max-width: 767px) { html.wl-kx.wl-fiel.wl-arte .k-cloud--1 { width: 390px; } html.wl-kx.wl-fiel.wl-arte .k-cloud--2 { width: 480px; } html.wl-kx.wl-fiel.wl-arte .k-cloud--3 { width: 450px; } html.wl-kx.wl-fiel.wl-arte .k-cloud--4 { width: 360px; } html.wl-kx.wl-fiel.wl-arte .k-cloud--5 { width: 270px; } html.wl-kx.wl-fiel.wl-arte .k-cloud--6 { width: 300px; } } /* Libro abierto: las mismas plantas del libro cerrado (recortadas de Kuxaan.png: kuxaan-plants-l/-r) en las dos esquinas de arriba, detrás del libro y del titular. Van en el contenedor del widget, que no se cambia al navegar, y ancladas a su borde de arriba: el libro cambia de alto con cada pestaña y así no se mueven */ html.wl-kx.wl-fiel.wl-arte:not(.wl-book-locked) body.wl-landing .elementor-widget-container:has(> .wenc-embed-home, > .wenc.wenc-home-page) { position: relative; } html.wl-kx.wl-fiel.wl-arte:not(.wl-book-locked) body.wl-landing .elementor-widget-container > :is(.wenc-embed-home, .wenc.wenc-home-page) { position: relative; z-index: 1; } html.wl-kx.wl-fiel.wl-arte:not(.wl-book-locked) body.wl-landing .elementor-widget-container:has(> .wenc-embed-home, > .wenc.wenc-home-page)::before, html.wl-kx.wl-fiel.wl-arte:not(.wl-book-locked) body.wl-landing .elementor-widget-container:has(> .wenc-embed-home, > .wenc.wenc-home-page)::after { content: ""; position: absolute; z-index: 0; top: clamp(-150px, -9vw, -60px); width: clamp(110px, 15vw, 230px); aspect-ratio: 275 / 844; pointer-events: none; background: url(arte/kuxaan-plants-l.webp) left top / 100% auto no-repeat; filter: drop-shadow(0 10px 14px rgba(16, 30, 70, .25)); } /* (volteadas: el recorte es recto por donde la mata tocaba el libro, y el libro abierto no lo tapa; así el corte queda contra el borde de la pantalla y la mata entra desde fuera) */ html.wl-kx.wl-fiel.wl-arte:not(.wl-book-locked) body.wl-landing .elementor-widget-container:has(> .wenc-embed-home, > .wenc.wenc-home-page)::before { left: 0; scale: -1 1; } html.wl-kx.wl-fiel.wl-arte:not(.wl-book-locked) body.wl-landing .elementor-widget-container:has(> .wenc-embed-home, > .wenc.wenc-home-page)::after { right: 0; scale: -1 1; aspect-ratio: 307 / 816; background-image: url(arte/kuxaan-plants-r.webp); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-soon-card .k-abi { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-soon-card .wl-soon-lock { position: absolute; left: 50%; top: calc(var(--a-bw) * .145 - 55px); width: 110px; height: 110px; translate: -50% 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: url(arte/lock.webp) center / contain no-repeat; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-soon-card .wl-soon-lock::before, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-soon-card .wl-soon-lock::after { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-soon-tag { --rw: 57px; min-width: 352px; height: 53px; padding: 2px 4px 0; margin-bottom: 28px; font: 700 27px/1 var(--a-font); letter-spacing: .02em; text-transform: uppercase; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-soon-tag::after { content: "!"; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-soon-card h3 { margin: 0 0 6px; color: var(--a-ink); font: 700 26px/1.2 var(--a-font); text-transform: none; letter-spacing: 0; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-soon-card p { max-width: 402px; margin: 0 auto 18px; color: var(--a-text); font: 700 15px/1.3 var(--a-font); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-soon-card a.wenc-ribbon-teal { width: auto; min-width: 218px; height: 41px; padding: 0 16px 3px !important; gap: 7px; font-size: 14px !important; font-weight: 400 !important; } /* «Encyclopedia», del mismo tamaño que los demás titulares (kuxaan.css lo dejaba más pequeño, junto a la nota), y como el de El juego, que también va sobre el cielo: marrón liso, sin degradado ni sombra */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .wl-book h2.k-poster { font-size: clamp(42px, 5.2vw, 74px); filter: none; color: #5a3a1c; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .wl-book h2.k-poster :is(.w, .w-leaf, .w-honey) { background: none; -webkit-text-fill-color: #5a3a1c; color: #5a3a1c; } /* ── 5. Puntos clave: cartas crema (panel_bg_06; la alta, panel_bg_02) con el vídeo negro y la cinta amarilla. La rejilla mide 1127 px; huecos de 20 px entre filas y 24 entre columnas; filas de 366, 291 y 364 ──────────────── */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-points .wrap { max-width: 1127px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .bento { gap: 20px 24px; grid-template-rows: 366px 291px 364px; } /* (la pieza se pinta con su canto de 34 px, pero el contenido llega a 20 px del borde: así queda el vídeo en la maqueta) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .card, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .c-battle { padding: 0; rotate: 0deg; background: none; box-shadow: none; border: solid transparent; border-width: 20px; border-image: url(arte/panel_bg_06.webp) 110 110 118 fill / 75px 75px 80px stretch; filter: drop-shadow(0 10px 14px rgba(16, 30, 70, .25)); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .c-hantu { border-image-source: url(arte/panel_bg_02.webp); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .card::before, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .card::after { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .card > .k-deco, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .bento > .k-deco { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .card .media { margin: 0; border: 0; border-radius: 12px; background: #000; overflow: hidden; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .card .media::before, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .card .media::after { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .card .media > video { border-radius: 12px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .card .txt { padding: 0; text-align: center; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .card h3 { position: relative; z-index: 5; --rw: 44px; height: 41px; margin-top: -21px; margin-bottom: 10px; padding: 2px 6px 0; min-width: 257px; font: 700 17px/1 var(--a-font); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .card h3 .k-build { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .card p { margin: 0 auto; max-width: none; color: var(--a-text); font-size: 14px; line-height: 1.3; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .card:is(:hover, :focus-within, .kf-hover) { box-shadow: none; filter: drop-shadow(0 16px 18px rgba(16, 30, 70, .32)); } /* ── 6. Galería: la captura central (569×318) en su marco (frame_screenshot), flechas grises (64 → 43) y viñetas hexagonales (24×27 → 16×18) ───────────────────────────────────────────────────────────────────────────────── */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-gallery .wl-head .eyebrow, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-gallery .k-note { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel { height: 360px; margin-top: 27px; } /* (la imagen, del tamaño exacto del marco: con su borde transparente de 3 px sobresalía bajo la pieza) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel img { box-sizing: border-box; width: 569px; height: 318px; } /* Cada captura con su propio marco (frame_screenshot), que se desplaza con ella: arte.js pone un .ar-frame detrás de cada con su mismo tamaño, transform, z-index y opacidad, y aquí lleva la misma transición. La pieza, entera en su ::before, sobresale 18 px por cada lado; su línea crema cae sobre el canto de la captura. (Una sola imagen escalada, no border-image: la textura, 896×524, tiene las proporciones de la captura con ese margen (605×354 → 0,675 a lo ancho y a lo alto), y en nueve piezas las capturas laterales, reducidas con scale(), dejaban ver las juntas en las esquinas. El marco único y fijo de antes, .k-car-frame, ya no se usa) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel .k-car-frame { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel .ar-frame { position: absolute; left: 50%; top: 50%; box-sizing: border-box; pointer-events: none; border: 0; border-image: none; transition: transform .6s cubic-bezier(.2, 1, .3, 1), opacity .6s; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel .ar-frame::before { content: ""; position: absolute; inset: -18px; pointer-events: none; background: url(arte/frame_screenshot.webp) center / 100% 100% no-repeat; } /* (el brillo de cristal que cruza en diagonal el marco de la captura que llega al centro; arte.js pone .is-glint) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel .ar-frame::after { content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 38%, rgba(255, 250, 225, .5) 47%, rgba(255, 255, 255, .75) 50%, rgba(255, 250, 225, .5) 53%, transparent 62%) 160% 0 / 250% 100% no-repeat; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel .ar-frame.is-glint::after { animation: ar-frame-glint .8s .15s ease-out both; } @keyframes ar-frame-glint { 0% { opacity: 1; background-position: 160% 0; } 99% { opacity: 1; } 100% { opacity: 0; background-position: -60% 0; } } @media (prefers-reduced-motion: reduce) { html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel .ar-frame.is-glint::after { animation: none; } } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel img, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel img:nth-child(even) { border: 3px solid transparent; border-radius: 16px; box-shadow: 0 16px 26px -14px rgba(16, 30, 70, .5); } /* (al pasar el ratón las capturas no se levantan: el marco va con su transform, no con translate, y se descuadraba) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel img:is(:hover, .kf-hover) { translate: none; box-shadow: 0 16px 26px -14px rgba(16, 30, 70, .5); filter: brightness(1.06); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel img.ar-c:is(:hover, .kf-hover) { filter: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel .k-pad, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel .k-pad:hover { width: 43px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; box-shadow: none; background: url(arte/button_arrow_left-honey-2.webp) center / contain no-repeat; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel .k-pad--next, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel .k-pad--next:hover { background-image: url(arte/button_arrow_right-honey-2.webp); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel .k-pad:hover { scale: 1.08; } /* Botones de la galería en miel (2026-10-28): fondo #ffd34a e icono #d16d22, con la flecha del botón de subir (button_arrow_top) girada para anterior/siguiente y una cruz del mismo trazo para cerrar; también en la galería a pantalla completa, que tenía otro amarillo y los signos ‹ › × de la fuente. (-2: sobre un disco liso y con cada icono centrado por su contorno; la primera versión giraba la pieza entera, la flecha quedaba desplazada hacia fuera y la sombra del borde inferior del disco parecía un contorno descentrado) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-lb button { width: 54px; height: 54px; border-radius: 50%; font-size: 0; color: transparent; background: url(arte/button_arrow_left-honey-2.webp) center / contain no-repeat; transition: scale .2s cubic-bezier(.3, 1.6, .5, 1); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-lb .next { background-image: url(arte/button_arrow_right-honey-2.webp); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-lb .close { background-image: url(arte/button_close-honey-2.webp); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-lb button:is(:hover, :focus-visible) { scale: 1.08; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel .k-pad::before, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel .k-pad::after { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .cnav { gap: 8px; margin-top: 11px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .cnav button { width: 16px; height: 18px; padding: 0; border: 0; border-radius: 0; box-shadow: none; scale: 1; background: url(arte/bullet_off.webp) center / contain no-repeat; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .cnav button.on { background-image: url(arte/bullet_on.webp); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .cnav button::before, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .cnav button::after { display: none; } /* ── 7. La familia: el texto en la tira de pergamino (panel_bg_03, 1060×233 → 721×158); la ficha, el panel turquesa (panel_bg_04, 678×471 → 461×320) ─────────────────────────────────────────────────────────────────────────────── */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-family .family-text { box-sizing: border-box; max-width: 710px; min-height: 152px; display: block; margin-top: 42px; text-align: center; padding: 0; border: solid transparent; border-width: 30px 42px; background: none; border-image: url(arte/panel_bg_03.webp) 80 110 92 fill / 55px 75px 63px stretch; filter: drop-shadow(0 10px 14px rgba(16, 30, 70, .25)); color: #87552a; font-size: 16px; line-height: 1.65; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-family .family-text::before { display: none; } /* (la ficha, más arriba: en la maqueta su canto de arriba va a la altura de la cabeza del personaje; ficha y retratos alineados a 14 px del borde de su columna) */ @media (min-width: 1101px) { html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-family .side { align-self: start; justify-content: flex-start; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-family .k-lore { margin: 102px 0 0 14px; } /* (retratos pegados a la ficha: en la maqueta el hexágono empieza ~45 px por debajo de su canto) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-family .picker { margin: -7px 0 0 14px; } /* (el personaje, pegado a la ficha y algo más grande) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-family .hero-char { justify-content: flex-end; padding-right: 7px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-family .hero-char img { width: auto; max-width: none; height: 424px; } /* (columnas que no crecen con la imagen: con 1fr la de Zib, 1112×900, ensanchaba la del personaje de 484 a 531 px y la ficha y los retratos se movían y se estrechaban 47 px al elegirla. Un personaje más ancho que su columna sobresale hacia la izquierda, y siempre por detrás de la ficha) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-family .stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-family .side { position: relative; z-index: 2; } } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-family .family-text::first-letter { color: #d8681c; font: 700 1.6em/1 var(--a-font); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-lore > .k-deco:not(.ar-pop) { display: none; } /* Emblema del personaje (Icon_Reward_*, arte.js): 82 px, centrado a 29 px del borde derecho de la ficha y a 26 del de arriba, como en la maqueta */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-lore { position: relative; } /* (la ficha mide 437 px o el ancho de su columna si es menor; .k-lore puede ser más ancha, así que se coloca por la izquierda) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-lore .ar-emblem { display: block; z-index: 3; top: -20px; right: auto; left: calc(min(437px, 100%) - 70px); width: 82px; height: 82px; filter: drop-shadow(0 4px 6px rgba(5, 10, 40, .35)); } @media (max-width: 767px) { html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-lore .ar-emblem { top: -16px; left: calc(100% - 74px); width: 64px; height: 64px; } } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .lore-card { box-sizing: border-box; width: 437px; max-width: 100%; min-height: 292px; padding: 4px 14px 2px; border: solid transparent; border-width: 40px; border-radius: 0; background: none; box-shadow: none; border-image: url(arte/panel_bg_04.webp) 60 fill / 40px stretch; filter: drop-shadow(0 16px 20px rgba(5, 10, 40, .35)); color: #fff; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-lore:is(:hover, :focus-within, .kf-hover) .lore-card { box-shadow: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .lore-card::before, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .lore-card::after { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .lore-card h3 { width: auto; height: auto; margin: -14px 0 8px; padding: 0; border: 0; border-image: none; background: none; filter: none; text-align: center; justify-content: center; color: #fff; font: 700 24px/1.1 var(--a-font); text-transform: uppercase; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .lore-card .meta { --rw: 41px; height: 38px; min-width: 0; margin: 0 auto 13px; padding: 1px 0 0; font: 700 12px/1 var(--a-font); letter-spacing: .03em; text-transform: uppercase; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .lore-card p { margin-bottom: 8px; color: #f4fbf8; font-size: 12.5px; font-weight: 700; line-height: 16px; } /* Cada valor justo detrás de su etiqueta, como en la maqueta: con dos columnas, la etiqueta corta («Humour:») tomaba el ancho de la larga («Tormented form:») y dejaba un hueco. El dd::after cierra la línea y separa la fila siguiente. */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .lore-card dl { display: block; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .lore-card dt { display: inline; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .lore-card dd { display: inline; margin-left: 8px !important; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .lore-card dd::after { content: ""; display: block; height: 12px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .lore-card dd:last-child::after { height: 0; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .lore-card dt::after { content: ":"; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .lore-card dt { color: #6fd6c8; font: 700 15px/1.2 var(--a-font); text-transform: none; letter-spacing: 0; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .lore-card dd { margin: 0; padding: 0; border: 0; color: #fff; font-size: 11px; font-weight: 700; } /* Retratos sin panel ni nombres: solo los hexágonos (79 px) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .picker { justify-content: flex-start; gap: 12px; padding: 0; border: 0; background: none; box-shadow: none; } /* Retratos con su proporción (los PNG son verticales, ~290×348) y todos iguales, rectos y a la misma altura, sin el giro ni el aumento del elegido de kuxaan.css: en la maqueta el hexágono mide ~69 px y van cada 92 px. El retrato se sale de su hueco de 79 px por los lados (cuernos, pelo), centrado */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .face { flex: 0 0 79px; width: 79px; align-items: center; overflow: visible; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .face img, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .face:is(:nth-child(odd), :nth-child(even), .active, :hover) img { width: auto; max-width: none; height: 110px; margin: 0 -18px; rotate: 0deg; scale: 1; translate: 0 0; transform: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .face:hover img { translate: 0 -4px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .picker::before, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .picker::after { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .face span { display: none; } /* ── 8. Comunidad: el panel de cuero (panel_bg_05, 877×636 → 596×432) con el grupo de personajes encima (Community_Header) ──────────────────────────────────────────────────────────────────────────────────────── */ /* Fondo: el cielo nocturno que pasó el estudio (negro arriba, azul abajo) en vez del volcán rojo; sin sus brasas, que eran naranjas, y con estrellas fugaces de vez en cuando (.ar-sky, las crea arte.js) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano { background: #000 url(arte/night-sky-2.webp) center bottom / cover no-repeat; } /* (un solo cielo con Combate: este acaba en el azul de la última fila de la imagen —#0037b3 en night-sky-2; era #004eca en la anterior—, sin fundido, y Combate arranca con ese mismo azul y lo disuelve en su cielo morado; antes el azul fundía a la franja morada lisa con que empezaba Combate y se veían dos cielos) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano::before { display: none; } /* (el azul del horizonte se mantiene hasta donde empiezan las nubes de la ilustración de Combate y solo ahí se disuelve: si se aclaraba antes, entre la unión y las nubes asomaba el cielo morado oscuro de la ilustración y se leía una raya clara seguida de una franja oscura) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-fight { background: linear-gradient(180deg, #0037b3 0, #0037b3 120px, #1d47b8 260px, #2d2358 55%, #1c1838 75%); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-fight .fight-veil { background: linear-gradient(180deg, #0037b3 0, #0037b3 90px, rgba(0, 55, 179, .7) 150px, rgba(0, 55, 179, .25) 230px, rgba(20, 24, 60, 0) 320px, rgba(20, 24, 60, .3) 520px, rgba(20, 24, 60, .3) 100%); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .embers { display: none; } /* (el papel rasgado del pie de la familia pintaba debajo el granate del volcán: ahora el negro de arriba del cielo) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-family .k-torn--ember { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='36' viewBox='0 0 900 36'%3E%3Cdefs%3E%3Cfilter id='b' x='-2%' y='-60%' width='104%' height='220%'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 15L10 20L23.5 11.5L42.2 15.4L56.2 18L75.2 15.5L93.5 16.6L113.3 11.9L127.7 17.5L146.1 9.6L164.3 14.6L185.4 18.7L196.9 15.2L217.9 17.3L235.7 15.9L256.6 19.9L271.1 13L291.1 13L303 12.6L318.1 12.5L339.3 15.7L358.1 19.5L368.8 12.3L385.5 15.1L400.6 11.3L421.5 9.7L435.9 13.1L453.9 20.1L470 11L484.9 12.4L499.3 14.1L513.3 15.4L530.6 11.8L551.5 14.5L571.9 16.6L589.5 15.2L605.5 17.3L626.8 13.8L645.3 12L662.4 13.2L676.3 13.7L695.9 19.5L707.2 18.8L718.1 13.9L730 9.9L751.9 11.6L769.5 10.7L785 16.1L796.6 20.1L817.3 19.7L837.9 19.9L857 12.3L867.1 12L878.1 9L900 15V36H0Z' fill='%23000000'/%3E%3Cpath d='M0 15L10 20L23.5 11.5L42.2 15.4L56.2 18L75.2 15.5L93.5 16.6L113.3 11.9L127.7 17.5L146.1 9.6L164.3 14.6L185.4 18.7L196.9 15.2L217.9 17.3L235.7 15.9L256.6 19.9L271.1 13L291.1 13L303 12.6L318.1 12.5L339.3 15.7L358.1 19.5L368.8 12.3L385.5 15.1L400.6 11.3L421.5 9.7L435.9 13.1L453.9 20.1L470 11L484.9 12.4L499.3 14.1L513.3 15.4L530.6 11.8L551.5 14.5L571.9 16.6L589.5 15.2L605.5 17.3L626.8 13.8L645.3 12L662.4 13.2L676.3 13.7L695.9 19.5L707.2 18.8L718.1 13.9L730 9.9L751.9 11.6L769.5 10.7L785 16.1L796.6 20.1L817.3 19.7L837.9 19.9L857 12.3L867.1 12L878.1 9L900 15L900 22L878.1 16L867.1 19L857 19.3L837.9 26.9L817.3 26.7L796.6 27.1L785 23.1L769.5 17.7L751.9 18.6L730 16.9L718.1 20.9L707.2 25.8L695.9 26.5L676.3 20.7L662.4 20.2L645.3 19L626.8 20.8L605.5 24.3L589.5 22.2L571.9 23.6L551.5 21.5L530.6 18.8L513.3 22.4L499.3 21.1L484.9 19.4L470 18L453.9 27.1L435.9 20.1L421.5 16.7L400.6 18.3L385.5 22.1L368.8 19.3L358.1 26.5L339.3 22.7L318.1 19.5L303 19.6L291.1 20L271.1 20L256.6 26.9L235.7 22.9L217.9 24.3L196.9 22.2L185.4 25.7L164.3 21.6L146.1 16.6L127.7 24.5L113.3 18.9L93.5 23.6L75.2 22.5L56.2 25L42.2 22.4L23.5 18.5L10 27L0 22Z' fill='rgba(0,0,0,.5)' filter='url(%23b)'/%3E%3Cpath d='M0 15L10 20L23.5 11.5L42.2 15.4L56.2 18L75.2 15.5L93.5 16.6L113.3 11.9L127.7 17.5L146.1 9.6L164.3 14.6L185.4 18.7L196.9 15.2L217.9 17.3L235.7 15.9L256.6 19.9L271.1 13L291.1 13L303 12.6L318.1 12.5L339.3 15.7L358.1 19.5L368.8 12.3L385.5 15.1L400.6 11.3L421.5 9.7L435.9 13.1L453.9 20.1L470 11L484.9 12.4L499.3 14.1L513.3 15.4L530.6 11.8L551.5 14.5L571.9 16.6L589.5 15.2L605.5 17.3L626.8 13.8L645.3 12L662.4 13.2L676.3 13.7L695.9 19.5L707.2 18.8L718.1 13.9L730 9.9L751.9 11.6L769.5 10.7L785 16.1L796.6 20.1L817.3 19.7L837.9 19.9L857 12.3L867.1 12L878.1 9L900 15L900 11.5L896 9.9L892 11.2L888 8.2L884 8.7L880 7.4L876 5.9L872 6.2L868 9.5L864 10L860 7.9L856 9L852 12.6L848 13.1L844 15.5L840 17.5L836 15.5L832 17.3L828 17.9L824 15.5L820 16.1L816 17.1L812 15.7L808 15.6L804 17.7L800 16.7L796 17.7L792 15.7L788 14.2L784 12.1L780 11.9L776 8.7L772 8.3L768 6.6L764 8.1L760 8L756 7.7L752 8.1L748 7.3L744 6.6L740 8.8L736 6.4L732 7.7L728 8.4L724 8L720 8.8L716 11L712 12.9L708 14.2L704 16.4L700 17.4L696 16.8L692 13.8L688 12.7L684 12.9L680 11.9L676 9.1L672 9.4L668 9.1L664 9.5L660 9.5L656 9.2L652 8.7L648 8.9L644 9L640 9.4L636 10.1L632 10.6L628 10.4L624 10.7L620 10.9L616 11.1L612 12.1L608 14L604 13.2L600 12.6L596 11.7L592 13.2L588 13.4L584 12.8L580 14.3L576 14.7L572 14L568 13.4L564 14L560 10.8L556 11.9L552 11.3L548 10.5L544 11.1L540 11.2L536 10.4L532 8.6L528 10.1L524 11.2L520 10.9L516 10.5L512 13.2L508 10.4L504 10.5L500 11.9L496 11.9L492 10.4L488 10L484 8.4L480 8.3L476 8.7L472 6.6L468 9.2L464 12.1L460 13L456 16.7L452 17.4L448 15.6L444 11.8L440 11.3L436 11.5L432 10.3L428 9.3L424 8.4L420 7.8L416 8.4L412 6.1L408 7L404 7.6L400 7.6L396 10.8L392 9L388 10.8L384 10.5L380 9.8L376 9.4L372 8.9L368 11L364 12.6L360 14.6L356 16.8L352 15.8L348 13.7L344 14.4L340 12.6L336 12.7L332 12.9L328 10.1L324 10.7L320 8.9L316 9.4L312 9.3L308 9.4L304 9L300 10.6L296 9.9L292 10.8L288 10L284 8.6L280 9.1L276 9.7L272 9.9L268 12.5L264 12.8L260 16.1L256 15.4L252 14.8L248 14.8L244 12.9L240 12.2L236 13.4L232 14L228 13.6L224 13L220 14.5L216 13.3L212 13.2L208 13.7L204 12.6L200 11.2L196 12.7L192 14.4L188 15.1L184 14.2L180 13.9L176 14.5L172 13.2L168 11.4L164 10.1L160 8.8L156 8.1L152 7L148 8.4L144 6.2L140 8.6L136 11.9L132 11.3L128 15.4L124 14.4L120 11.4L116 9.2L112 8.5L108 9.2L104 12.4L100 11.8L96 13.8L92 14.2L88 13.9L84 12.4L80 12.5L76 11L72 13.8L68 12.1L64 15.3L60 13.1L56 14.5L52 12.9L48 14.9L44 12.7L40 13L36 9.8L32 10.6L28 10.1L24 7.4L20 11.4L16 12.6L12 15.7L8 15.2L4 14.7L0 11.5Z' fill='%23fff6dc'/%3E%3C/svg%3E"); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .ar-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } /* (una línea con la cabeza brillante a la derecha: se gira con --a y avanza --d por su propio eje) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .ar-shoot { position: absolute; width: 150px; height: 2px; margin-left: -150px; border-radius: 2px; transform-origin: 100% 50%; background: linear-gradient(90deg, rgba(190, 220, 255, 0), rgba(220, 238, 255, .85)); opacity: 0; animation: ar-shoot var(--t, 1.1s) cubic-bezier(.3, 0, .7, 1) forwards; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .ar-shoot::after { content: ""; position: absolute; right: -2px; top: 50%; width: 5px; height: 5px; translate: 0 -50%; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px rgba(200, 228, 255, .9); } @keyframes ar-shoot { 0% { opacity: 0; transform: rotate(var(--a)) translateX(0) scaleX(.3); } 15% { opacity: 1; transform: rotate(var(--a)) translateX(calc(var(--d) * .15)) scaleX(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scaleX(.6); } } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .vbox { box-sizing: border-box; max-width: 577px; min-height: 417px; margin: 212px auto 0; padding: 26px 8px 1px; rotate: 0deg; background: none; box-shadow: none; border: solid transparent; border-width: 40px; border-radius: 0; border-image: url(arte/panel_bg_05.webp) 100 112 118 fill / 67px 75px 79px stretch; filter: drop-shadow(0 16px 20px rgba(5, 5, 20, .45)); text-align: center; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .vbox::before, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .vbox::after { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .vbox > .k-deco:not(.ar-pop) { display: none; } /* (el grupo a la escala de la maqueta, 430 px, y con la caja a la proporción de la pieza, 661×330, para que la hierba quede abajo del todo: la hierba se apoya en el canto marrón del panel (que empieza ~14 px por debajo del borde de la caja) y la cinta de COMMUNITY le tapa el pie. Antes medía 370 y flotaba ~20 px por encima de la cinta) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .vbox .ar-community { display: block; z-index: 1; left: 50%; top: -233px; width: 430px; height: 215px; translate: -50% 0; filter: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .vtag { position: absolute; z-index: 2; left: 50%; top: -66px; translate: -50% 0; --rw: 57px; min-width: 344px; height: 53px; margin: 0; padding: 2px 4px 0; font: 700 28px/1 var(--a-font); letter-spacing: .02em; text-transform: uppercase; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano h2.k-poster { margin: 2px 0 2px; font-size: 44px; white-space: nowrap; text-align: center; text-transform: uppercase; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano h2.k-poster .w:nth-child(2) { text-transform: none; } /* (subtítulos y titulares claros: el crema cálido de la maqueta, no blanco) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .vbox > p { margin: 0; color: #e2d2a0; font-size: 15px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .steam-news { margin-top: 10px; padding-top: 0; border: 0; text-align: left; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .steam-news::before { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .steam-news h3 { display: block; height: auto; padding: 0; margin: 22px 0 14px; background: none; filter: none; color: #b89a74; font: 400 17px/1.2 var(--a-font); letter-spacing: 0; text-transform: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .news-item { gap: 16px; background: none; border: 0; box-shadow: none; padding: 4px 0; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .news-item img { width: 87px; height: 53px; border-radius: 8px; } /* (los titulares largos de las noticias, en una línea cortada con «…», como en la maqueta) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .news-item span { min-width: 0; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .news-item b { display: block; max-width: 310px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dfd09e; } /* (las miniaturas de las noticias son anchas y su texto va a la izquierda: recortadas por la izquierda para que se lea) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .news-item img { object-fit: cover; object-position: left center; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .news-item small { color: #a88a66; } /* Discord y redes, fuera del panel, debajo (arte.js los saca a .ar-social y pone los dos en .ar-col) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .wrap { justify-content: center; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .ar-col { display: flex; flex-direction: column; align-items: center; width: min(577px, 100%); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .ar-col .vbox { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .ar-social { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 24px; margin-top: 6px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .ar-social .discord-cta { box-sizing: border-box; justify-content: center; width: 188px; height: 48px; margin: 0; padding: 0 10px; border-radius: 10px; rotate: 0deg; transform: none; background: #5865f2; color: #fff; font-size: 16px; box-shadow: 0 6px 12px -6px rgba(5, 5, 20, .6); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .ar-social .socials { margin: 0; gap: 9px; } /* (redes: miel con el icono en naranja, como pidió el usuario en lugar del turquesa) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .ar-social .socials a { width: 40px; height: 40px; background: #ffd34a; box-shadow: none; color: #d16d22; transition: translate .2s, background-color .15s; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .ar-social .socials a:hover { background: #ffe07a; color: #b85a16; translate: 0 -3px; rotate: 0deg; } /* ── 9. Combate: la pantalla (712×480) en el marco crema (panel_bg_06) con la cinta del movimiento; pegada a ella, la lista en el panel de cuero alto (panel_bg_05b, 340×685 → 231×466) con los títulos de grupo en tittle_section (233×35 → 158×24) y viñetas hexagonales ────────────────────────────────────────────────────────────────────── */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-fight .wl-head::before { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-fight .fight-text { color: #e5d6a3; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena { max-width: 943px; margin-left: auto; margin-right: auto; translate: 11px 0; grid-template-columns: 712px 231px; gap: 0; align-items: start; } /* (como las cartas: la pieza con su canto de 34 px y el vídeo a 20 px del borde) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .screen { position: relative; z-index: 2; box-sizing: border-box; height: 480px; min-height: 0; padding: 0; border: solid transparent; border-width: 20px; border-image: url(arte/panel_bg_06.webp) 110 110 118 fill / 75px 75px 80px stretch; background: none; filter: drop-shadow(0 16px 20px rgba(5, 5, 20, .4)); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .screen::before { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .screen > .k-deco:not(.ar-pop) { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .screen video { margin: 0; width: 100%; max-width: none; aspect-ratio: 677 / 391; border: 0; border-radius: 12px; background: #000; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .now { position: relative; z-index: 2; margin-top: -19px; padding: 0; background: none; text-align: center; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .now b { --rw: 40px; height: 37px; min-width: 259px; padding: 2px 8px 0; margin-bottom: 16px; font: 700 17px/1 var(--a-font); text-transform: uppercase; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .now span { display: block; max-width: 640px; margin: 0 auto; text-align: center; color: var(--a-text); font-size: 14px; } /* (la pieza de movimientos se mete 24 px bajo la pantalla: su canto izquierdo redondeado dejaba ver el fondo en las esquinas entre los dos paneles) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .k-moves { position: relative; z-index: 1; margin-top: 20px; margin-left: -24px; } /* (Lumie, siempre en el mismo punto de la esquina del marco: desde la esquina exterior —left y top cuentan desde dentro del canto de 20 px—, desplazada en proporción a su tamaño; a 150×170 es lo de la maqueta, -62 y -56 px) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .ar-lumie { display: block; left: -20px; top: -20px; width: 150px; height: 170px; translate: -41.3% -32.9%; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-moves > .k-deco:not(.ar-pop) { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .k-moves .moves { box-sizing: border-box; height: auto; min-height: 456px; padding: 2px 4px 2px 24px; border: solid transparent; border-width: 34px 34px 34px 18px; border-radius: 0; background: none; box-shadow: none; border-image: url(arte/panel_bg_05b.webp) 100 110 120 26 fill / 68px 75px 82px 18px stretch; filter: drop-shadow(0 16px 20px rgba(5, 5, 20, .45)); overflow: visible; contain: none; gap: 2px; justify-content: flex-start; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .moves::before, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .moves::after { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .moves .move-group h3 { box-sizing: border-box; width: 158px; height: 24px; margin: 6px 0 6px; padding: 1px 0 0 22px; filter: none; border: solid transparent; border-width: 0 18px; border-image: url(arte/tittle_section.webp) 0 26 fill / 0 18px stretch; background: none; color: #ffd23a; font: 700 12px/23px var(--a-font); letter-spacing: .06em; text-align: left; text-shadow: none; padding-left: 10px; } /* (títulos largos, como «Potenziamenti della partita»: la cinta crece con el texto hasta el ancho del panel y, si aun así no cabe, pasa a dos líneas en vez de salirse; el relleno de la derecha, igual que el de la izquierda, para que el texto no pise el adorno del extremo) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .moves .move-group h3 { min-width: 158px; max-width: 100%; height: auto; min-height: 24px; line-height: 16px; padding-top: 4px; padding-right: 10px; padding-bottom: 3px; } /* (más aire antes de cada grupo que después de su título, para que se lean como grupos) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .moves .move-group + .move-group h3 { margin-top: 16px; } /* (.arena .k-moves en el selector: kuxaan.css coloca la viñeta con esa especificidad) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .k-moves .move { min-height: 0; margin: 0; padding: 3px 4px 3px 28px; color: #eadfc9; background: none; border: 0; box-shadow: none; font-size: 16px; font-weight: 400; line-height: 19px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .k-moves .move span { font-weight: 400; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .k-moves .move::before { inset: 50% auto auto 2px; margin: 0; translate: 0 -50%; width: 15px; height: 17px; border: 0; border-radius: 0; box-shadow: none; filter: none; background: url(arte/bullet_off.webp) center / contain no-repeat; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .k-moves .move.on::before { background-image: url(arte/bullet_on.webp); filter: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .k-moves .move::after, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .k-moves .move-group::after { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .k-moves .move:hover { color: #ffd23a; } /* (en escritorio cada movimiento y cada título de grupo en una línea, y arte.js baja la letra del que no quepa: en dos líneas, en casi todos los idiomas menos el inglés, la lista crecía hasta 51 px por debajo de la pantalla y se veía el canto izquierdo recto de su pieza, que solo va metido bajo la pantalla) */ @media (min-width: 1101px) { html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .k-moves .move, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .moves .move-group h3 { white-space: nowrap; } /* (los títulos, con algo menos de espacio entre letras: «Durchlauf-Upgrades» llegaba justo a 9 px) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .moves .move-group h3 { letter-spacing: .03em; } } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-moves .ar-myco { display: block; right: -34px; bottom: -24px; width: 110px; height: 114px; } /* (en columna, la lista asoma por debajo de la pantalla en vez de por la derecha) */ @media (max-width: 1100px) { /* (en columna, centrada: los 11 px de escritorio compensan la lista de la derecha) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena { max-width: 712px; grid-template-columns: 1fr; translate: 0 0; } /* (en columna la pantalla mide lo que su vídeo y su pie: el alto fijo de escritorio dejaba un hueco debajo) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .screen { height: auto; padding-bottom: 14px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .k-moves { margin-top: -56px; margin-left: 0; } /* (panel_bg_05b tiene el canto izquierdo recto porque en escritorio va metido bajo la pantalla; en columna se ve entero, así que va panel_bg_05, 877×636, con los dos cantos) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .k-moves .moves { min-height: 0; padding: 50px 4px 2px; border-width: 34px; border-image: url(arte/panel_bg_05.webp) 100 110 120 110 fill / 68px 75px 82px 75px stretch; } /* (los títulos de grupo, al ancho de su texto: estirados a todo el panel la cinta se deformaba) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .moves .move-group h3 { width: max-content; } } /* (en tableta caben los tres grupos uno al lado del otro, cada uno en columna como en escritorio) */ @media (min-width: 768px) and (max-width: 1100px) { html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .k-moves .moves { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-evenly; align-items: start; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .k-moves .move-group { display: flex; flex-direction: column; align-items: flex-start; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .moves .move-group + .move-group h3 { margin-top: 6px; } } /* ── 10. Cierre: el póster (Wilderings, ya con su marco; 631×903 → 384×549) inclinado y, pegada a él, la caja en el pergamino (panel_bg_01, 421×364) con la cinta GET THE GAME encima ─────────────────────────────────────────── */ /* (el póster se monta un poco sobre la caja, como en la maqueta) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .buy { grid-template-columns: 384px 467px; gap: 0; justify-content: center; align-items: center; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .buy .k-poster-wrap { position: relative; z-index: 2; margin-right: -14px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-poster-wrap > .k-deco { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .buy .poster { width: 403px; max-width: none; height: auto; translate: 7px 9px; border: 0; border-radius: 0; rotate: -3.3deg; box-shadow: none; filter: drop-shadow(0 24px 30px rgba(0, 0, 10, .45)); } /* (la caja mide 484 y se mete 17 px bajo el póster, como en la maqueta; la cinta y el contenido van 12,5 px a la izquierda de su centro) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final .box { box-sizing: border-box; width: 484px; min-height: 364px; margin: 30px 0 0 -17px; padding: 0 29px 0 4px; border: solid transparent; border-width: 36px 48px 48px; border-image: url(arte/panel_bg_01.webp) 110 110 118 fill / 75px 75px 81px stretch; background: none; filter: drop-shadow(0 16px 20px rgba(0, 0, 10, .35)); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final .box::before { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final .box > .k-deco:not(.ar-pop) { display: none; } /* (gap: en flex se pierden los espacios entre las palabras, que son sueltos) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final .box h2.k-poster { gap: .28em; position: absolute; top: -106px; left: 50%; translate: calc(-50% - 12px) 0; --rw: 54px; min-width: 344px; width: 344px; height: 50px; margin: 0; padding: 2px 4px 0; filter: drop-shadow(0 3px 0 rgba(90, 60, 20, .3)); font: 700 28px/1 var(--a-font); text-transform: uppercase; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final .box h2.k-poster .w { background: none; -webkit-text-fill-color: #734518; color: #734518; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final .box h2.k-poster::before, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final .box h2.k-poster::after { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final .box .cta-main { margin-top: 27px !important; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final .box .ctas { margin-top: 2px; } /* «Have Steam?»: pastilla oscura translúcida sobre el pergamino (negro al 35 %), 209×24 */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final .box .steam-install { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 209px; height: 24px; padding: 0 12px; border-radius: 999px; background: rgba(0, 0, 0, .35); color: #f4f1e6; font-size: 12px; text-decoration: underline; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final .box a.demo-cta.wenc-ribbon-yellow { font-size: 28px !important; } /* (en la caja, el botón de wishlist es más pequeño que el de la cinta de reseñas: 214×36) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final .ctas a.wenc-ribbon-teal { min-width: 214px; height: 36px; padding: 0 14px 3px !important; font-size: 15px !important; } /* (los botones del kit, .wenc-ribbon-*, llevan border-image: none !important en wenc-kit.css: su pieza en 9 piezas va en un ::after por detrás, a la escala de la altura de cada uno; a 100% 100% la textura se deformaba con el ancho) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing :is(.wl-final .ctas a.wenc-ribbon-teal, .wl-soon-card a.wenc-ribbon-teal, .wl .demo-float a.wenc-ribbon-yellow) { position: relative; isolation: isolate; } html.wl-kx.wl-fiel.wl-arte body.wl-landing :is(.wl-final .ctas a.wenc-ribbon-teal, .wl-soon-card a.wenc-ribbon-teal)::after { content: ""; position: absolute; inset: 0; z-index: -1; border: solid transparent; border-width: 0 var(--kx-after-r, 13px) 0 var(--kx-after-l, 13px); border-image: url(arte/button_wishlist.webp) 0 24 fill / 0 var(--kx-after-r, 13px) 0 var(--kx-after-l, 13px) stretch; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final .box .links { display: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final .final-laurels { width: 198px; height: 67px; margin-top: 35px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final .box .ar-leafy { display: block; right: -97px; bottom: -114px; width: 160px; height: 200px; } /* ── Flotantes: FREE DEMO (button_play_off pequeño, 184×36) y volver arriba (button_arrow_top, 64 → 43) ─────────── */ /* (en 9 piezas: las puntas, 60 px de la textura, a la escala de los 36 px de alto; a 100% 100% se veían achatadas) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .demo-float a.wenc-ribbon-yellow { box-sizing: border-box; width: 184px; height: 36px !important; min-height: 0; padding: 0 0 4px !important; justify-content: center; background: none !important; box-shadow: none; filter: drop-shadow(0 4px 6px rgba(16, 30, 70, .3)); color: #fff !important; font: 700 18px/1 var(--a-font); font-size: 18px !important; text-transform: uppercase; text-shadow: 0 1px 0 #3c8a0a; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .demo-float a.wenc-ribbon-yellow::after { content: ""; position: absolute; inset: 0; z-index: -1; border: solid transparent; border-width: 0 var(--kx-after-r, 18px) 0 var(--kx-after-l, 18px); border-image: url(arte/button_play_off.webp) 0 60 fill / 0 var(--kx-after-r, 18px) 0 var(--kx-after-l, 18px) stretch; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .demo-float a.wenc-ribbon-yellow:hover { color: #8a5a1c !important; text-shadow: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .demo-float a.wenc-ribbon-yellow:hover::after { border-image-source: url(arte/button_play_on.webp); } html.wl-kx.wl-fiel.wl-arte body.wl-landing a#edgtf-back-to-top > span { width: 43px; height: 44px; border-radius: 0; box-shadow: none; background: url(arte/button_arrow_top.webp) center / contain no-repeat !important; } html.wl-kx.wl-fiel.wl-arte body.wl-landing a#edgtf-back-to-top > span > * { opacity: 0; } /* (el tema le da la vuelta al botón al pasar el ratón, rotateX(180deg), y vuelve a girar su icono; aquí la flecha es el fondo del propio botón y quedaba apuntando hacia abajo: en su lugar sube un poco, hacia donde lleva) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing a#edgtf-back-to-top > span { transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); } html.wl-kx.wl-fiel.wl-arte body.wl-landing a#edgtf-back-to-top:hover > span { transform: translateY(-4px) scale(1.06); } /* (reseñas: la fila de escritorio mide 1107 px más el botón, así que pasan a columna antes que el resto, a 1260 px: laureles, las tres citas, y la nota de Steam y el botón centrados uno debajo del otro) */ @media (max-width: 1260px) { html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof.k-band { grid-template-columns: repeat(3, minmax(0, 220px)); grid-template-rows: auto auto auto auto; gap: 22px 26px; aspect-ratio: auto; margin: -112px 0 -96px; padding: 124px 4% 110px; background-size: auto 125%; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof .laurels { grid-row: 1; grid-column: 1 / 4; justify-self: center; margin: 0; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof blockquote { grid-row: 2; width: auto; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof .steam-reviews { grid-row: 3; grid-column: 1 / 4; justify-self: center; align-self: center; margin: 0; } /* (.k-band y .store.store, como la regla de escritorio: con menos especificidad el botón seguía en la columna 5, que en columna no existe, y quedaba suelto a la derecha) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof.k-band a.store.store { grid-row: 4; grid-column: 1 / 4; justify-self: center; align-self: center; margin: -8px 0 0; } } @media (max-width: 1100px) { html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-pitch .wrap.grid { grid-template-columns: 1fr; justify-items: center; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .buy { grid-template-columns: 1fr; justify-items: center; } /* (en columna: sitio para Mushry encima del texto, y para la cinta GET THE GAME bajo el póster) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-pitch .copy { margin-top: 150px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .buy .k-poster-wrap { margin-right: 0; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .buy .poster { translate: 0 0; } /* (en columna no hay póster encima de la caja: ni se mete 17 px bajo él ni el contenido y la cinta se apartan 12,5 px de su centro) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final .box { margin: 130px 0 0; padding: 0 16px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final .box h2.k-poster { translate: -50% 0; } } @media (max-width: 767px) { html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof.k-band { display: flex; flex-direction: column; align-items: center; margin: -92px 0 -104px; padding: 100px 24px 124px; background-size: auto 125%; } /* (todo centrado: las reglas de escritorio pegaban la wishlist a la izquierda y las reseñas a la derecha; y estas dos juntas al final, debajo de las citas) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof.k-band > * { align-self: center; margin-left: 0; margin-right: 0; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof .laurels { order: 0; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof .wl-quotes { order: 1; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof .steam-reviews { order: 2; margin-top: 6px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof.k-band a.store.store { order: 3; align-self: center; margin: -6px 0 0; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof blockquote { width: min(300px, 100%); } /* (aquí las citas pasan de una en una, en la misma celda y con fundido: la regla de tableta las mandaba a la fila 2, encima de los puntos, que quedaban tapados, y la opacidad fija de escritorio quitaba el fundido) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof .wl-quotes { justify-items: center; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof .wl-quotes blockquote { grid-area: 1 / 1; align-self: start; opacity: 0; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof .wl-quotes blockquote.is-on { opacity: 1; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-proof .wl-quotes-dots { display: flex; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .wl-head .eyebrow { min-width: 0; height: 48px; border-width: 0 52px; border-image-width: 0 52px; font-size: 19px; line-height: 46px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-pitch .copy { width: 100%; min-height: 0; margin-top: 90px; border-width: 40px; border-image-width: 63px 63px 67px; } /* (a 69 px de alto las puntas miden ~38 px: el texto se queda dentro de la parte recta; arte.js lo baja si no cabe) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl a.demo-cta.wenc-ribbon-yellow { min-width: 0; width: 280px; height: 69px !important; font-size: 22px !important; padding: 0 40px 9px !important; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl a.demo-cta .new { width: 82px; height: 50px; font-size: 18px; top: -24px; } /* Libro cerrado en móvil: el texto es más alto que ancho y no cabe en las páginas del libro apaisado. El libro va entero, sin deformar, a la altura de la tarjeta y recortado por los lados: se ven las páginas abiertas (y 229-760 de 850, el 27-89 % del alto) con el texto dentro; las plantas quedan fuera de la pantalla */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-soon-card { width: calc(100% + 32px); margin: 0 -16px; aspect-ratio: auto; min-height: 600px; padding: 190px 34px 86px; justify-content: flex-start; background: url(arte/kuxaan.webp) center / auto 100% no-repeat; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-soon-card .wl-soon-lock { top: 112px; width: 80px; height: 80px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-soon-card h3 { font-size: 22px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-soon-tag { --rw: 48px; min-width: 0; height: 44px; padding: 2px 4px 0; font-size: 21px; margin-bottom: 14px; } /* Mushry en el hueco de 90 px entre el título y la tarjeta, con los pies tras el borde de la tarjeta: más arriba tapaba la última línea del título */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-pitch .wrap > .ar-mushry { left: 8px; top: -28px; width: 110px; height: 125px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-pitch .copy .ar-woolra { right: -14px; bottom: -96px; width: 90px; height: 108px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .trailer .k-cap { bottom: -56px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .bento { grid-template-rows: none; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel { height: 230px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel img { width: 338px; height: 190px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel .ar-frame::before { inset: -12px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel .k-pad--prev { translate: 0 0; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .carousel .k-pad--next { translate: 0 0; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-family .family-text { border-width: 30px 34px; border-image-width: 40px 53px 46px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .lore-card { width: 100%; } /* (la cinta amarilla de la ficha, en una línea, ensanchaba la columna más que la pantalla: en móvil se ajusta al ancho de la ficha con la letra algo menor, y la columna no crece por su contenido) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-family .stage { grid-template-columns: minmax(0, 1fr); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .lore-card .meta { --rw: 33px; width: min(100%, 236px); max-width: 100%; box-sizing: border-box; font-size: 10.5px; letter-spacing: 0; overflow: hidden; } /* (igual en el cierre: la columna de la caja crecía con su contenido y la caja salía 18 px de la pantalla; y el póster, más ancho que su envoltorio pegado a la derecha, salía 44 px: el envoltorio mide lo que el póster y va centrado) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .buy { grid-template-columns: minmax(0, 1fr); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .buy .k-poster-wrap { width: min(300px, 80vw); margin: 0 auto; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .picker { justify-content: center; gap: 6px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .face { flex-basis: 60px; width: 60px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .face img, html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .face:is(:nth-child(odd), :nth-child(even), .active, :hover) img { height: 86px; margin: 0 -14px; } /* (kuxaan.css dejaba 440 px arriba para la ilustración del volcán; el cielo no tiene nada que enseñar ahí) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano { padding-top: 40px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .vbox .ar-community { width: 300px; height: 150px; top: -168px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .vbox { margin-top: 170px; border-width: 32px; border-image-width: 53px 60px 63px; padding: 30px 6px 16px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano .vtag { --rw: 50px; min-width: 0; height: 46px; font-size: 23px; top: -58px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-volcano h2.k-poster { font-size: 32px; white-space: normal; line-height: .95; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .ar-lumie { left: -24px; top: -24px; width: 76px; height: 86px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .screen { min-height: 0; border-width: 24px; border-image-width: 53px 53px 57px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .arena .screen video { margin: -8px -8px 0; width: calc(100% + 16px); } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .k-moves .ar-myco { right: -8px; bottom: -40px; width: 76px; height: 79px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .buy .poster { width: min(300px, 80vw); } /* (los vlügkin del cierre, a los lados como en escritorio: al 70 % del alto de la sección en columna cubrían todo el ancho por detrás del póster y la cinta; abajo, medio fuera de la pantalla y más tenues) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .wl-final .vlugkin { top: auto; bottom: 20px; height: 300px; opacity: .55; z-index: 0; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .wl-final .vlugkin.l { left: -70px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl .wl-final .vlugkin.r { right: -70px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final .box { width: auto; max-width: 100%; margin: 90px 10px 0; padding: 0 4px; border-width: 40px; border-image-width: 63px 63px 67px; } html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final .box h2.k-poster { min-width: 0; top: -104px; } /* (el botón de la demo es más ancho que el hueco del pergamino: a todo el ancho, se sale lo mismo por cada lado) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final .box .cta-main { align-self: stretch; width: 100%; } /* (pegado al borde derecho de la pantalla: la caja va centrada y su right se mide desde dentro del borde de 40 px, así que (100% - 100vw) / 2 es justo lo que la separa del borde) */ html.wl-kx.wl-fiel.wl-arte body.wl-landing .wl-final .box .ar-leafy { right: calc((100% - 100vw) / 2); bottom: -70px; width: 88px; height: 110px; } }