/* Wuaow · bloques para las entradas de "Novedades" del blog (nov-2026)
   Se carga solo en entradas cuyo cuerpo use clases wn-. Todo cuelga de .wn para no tocar el resto del blog. */
.wn {
	--wn-cream: #F7E8DB; --wn-cream2: #fdf6f0; --wn-green: #39DC6C; --wn-green-d: #1f9a47; --wn-ink: #0c0305;
	--wn-soft: rgba(12, 3, 5, .62); --wn-r: 22px;
	color: var(--wn-ink); margin: 6px 0 30px;
}
.blog-details-desc .article-content .wn p { color: var(--wn-soft); font-size: 17px; line-height: 1.65; margin: 0 0 14px; }
.blog-details-desc .article-content .wn h2 { font-size: 30px; line-height: 1.15; font-weight: 800; margin: 4px 0 12px; color: var(--wn-ink); letter-spacing: -.01em; }
.blog-details-desc .article-content .wn h3 { text-transform: none; letter-spacing: 0; font-size: 19px; font-weight: 800; margin: 12px 0 4px; color: var(--wn-ink); }
.wn .article-image { margin: 0 !important; }
.blog-details-desc .article-content .wn .article-image img, .wn .article-image img { width: 100%; height: auto; border-radius: 0; box-shadow: none; }

/* Entradilla con chapas */
.wn-intro { background: var(--wn-cream2); border-radius: var(--wn-r); padding: 26px 26px 18px; position: relative; overflow: hidden; }
.wn-intro::after { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -110px; border-radius: 50%;
	background: radial-gradient(circle, rgba(57, 220, 108, .35), rgba(57, 220, 108, 0) 70%); animation: wn-latido 5s ease-in-out infinite; }
.blog-details-desc .article-content .wn .wn-intro p { font-size: 19px; color: var(--wn-ink); position: relative; z-index: 1; }
.wn-chapas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; position: relative; z-index: 1; }
.wn-chapa { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 6px 13px;
	border-radius: 99px; background: var(--wn-ink); color: var(--wn-green); }
.wn-chapa.wn-claro { background: #fff; color: var(--wn-ink); box-shadow: 0 1px 0 rgba(12, 3, 5, .08); }
.wn-chapa.wn-verde { background: var(--wn-green); color: var(--wn-ink); animation: wn-meneo 3.2s ease-in-out infinite; }

/* Protagonista: pegatina grande sobre fondo oscuro con rayos que giran */
.wn-prota { display: grid; grid-template-columns: 210px 1fr; gap: 26px; align-items: center; position: relative; overflow: hidden;
	background: var(--wn-ink); border-radius: calc(var(--wn-r) + 6px); padding: 28px 28px 28px 22px; }
.wn-prota::before { content: ""; position: absolute; width: 640px; height: 640px; left: -215px; top: 50%; margin-top: -320px; pointer-events: none;
	background: repeating-conic-gradient(from 0deg, rgba(57, 220, 108, .22) 0deg 9deg, rgba(57, 220, 108, 0) 9deg 20deg);
	-webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%);
	animation: wn-gira 40s linear infinite; }
.wn-prota > * { position: relative; z-index: 1; }
.wn-pegatina { filter: drop-shadow(7px 9px 0 rgba(0, 0, 0, .45)); }
.wn-pegatina .article-image { animation: wn-pegatina 4.2s ease-in-out infinite; transform-origin: 50% 90%; transition: transform .3s; }
.wn-pegatina:hover .article-image { animation: wn-salto .7s cubic-bezier(.3, .7, .4, 1.5); }
.blog-details-desc .article-content .wn .wn-prota h2 { color: #fff; font-size: 34px; }
.blog-details-desc .article-content .wn .wn-prota p { color: rgba(255, 255, 255, .78); }
.blog-details-desc .article-content .wn .wn-prota p strong { color: #fff; }
.wn-prota .wn-antetitulo { color: var(--wn-green); }
.wn-rojo { color: #ff3b3b; }
.wn-prota .wn-chapa.wn-claro { box-shadow: none; }

/* Bloque de color: pegatina que cambia de tono + muestrario */
.wn-color { display: grid; grid-template-columns: 170px 1fr; gap: 26px; align-items: center; background: var(--wn-cream2);
	border-radius: calc(var(--wn-r) + 6px); padding: 24px 26px 24px 20px; }
.wn-arcoiris .article-image { animation: wn-pegatina 4.2s ease-in-out infinite, wn-tono 7s linear infinite; }
.wn-puntos { display: flex; gap: 9px; margin-top: 4px; }
.wn-puntos span { display: inline-block; width: 26px; height: 26px; border-radius: 50%; font-size: 0; color: transparent;
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55), 0 3px 8px -3px rgba(12, 3, 5, .45); animation: wn-bote 2.8s ease-in-out infinite; }
.wn-puntos .wn-p1 { background: #ff2a2a; }
.wn-puntos .wn-p2 { background: #ff9a1f; animation-delay: .15s; }
.wn-puntos .wn-p3 { background: #ffd61f; animation-delay: .3s; }
.wn-puntos .wn-p4 { background: #39DC6C; animation-delay: .45s; }
.wn-puntos .wn-p5 { background: #2f8cff; animation-delay: .6s; }
.wn-puntos .wn-p6 { background: #a24bff; animation-delay: .75s; }

/* Secciones */
.wn-sec { margin-top: 44px; }
.wn-antetitulo { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--wn-green-d); margin-bottom: 2px; }
.wn-antetitulo::before { content: ""; display: inline-block; width: 22px; height: 3px; border-radius: 3px; background: var(--wn-green); vertical-align: middle; margin: -3px 8px 0 0; }

/* Tarjetas de avatar */
.wn-tarjetas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.wn-tarjetas.wn-3, .wn-tarjetas.wn-seis { grid-template-columns: repeat(3, 1fr); }
.wn-figura.wn-quieta .article-image { animation: none !important; }
.wn-figura.wn-quieta::after { animation: none; }
.wn-tarjeta { position: relative; background: linear-gradient(180deg, #fff 0%, var(--wn-cream2) 100%); border-radius: var(--wn-r); padding: 14px 12px 14px;
	text-align: center; box-shadow: 0 1px 0 rgba(12, 3, 5, .06), 0 10px 24px -14px rgba(12, 3, 5, .35); transition: transform .35s cubic-bezier(.2, .9, .3, 1.4), box-shadow .35s; }
.wn-tarjeta:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 1px 0 rgba(12, 3, 5, .06), 0 22px 34px -16px rgba(12, 3, 5, .45); }
.wn-figura { position: relative; aspect-ratio: 7 / 9; display: flex; align-items: flex-end; justify-content: center; }
.wn-figura::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 2px; height: 12px; border-radius: 50%; background: rgba(12, 3, 5, .22); filter: blur(5px);
	animation: wn-sombra 3.6s ease-in-out infinite; }
.wn-figura .article-image { position: relative; z-index: 1; width: 100%; animation: wn-flota 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
.wn-tarjeta:nth-child(2) .wn-figura .article-image, .wn-tarjeta:nth-child(2) .wn-figura::after { animation-delay: -.9s; }
.wn-tarjeta:nth-child(3) .wn-figura .article-image, .wn-tarjeta:nth-child(3) .wn-figura::after { animation-delay: -1.8s; }
.wn-tarjeta:nth-child(4) .wn-figura .article-image, .wn-tarjeta:nth-child(4) .wn-figura::after { animation-delay: -2.7s; }
.wn-tarjeta:hover .wn-figura .article-image { animation: wn-salto .7s cubic-bezier(.3, .7, .4, 1.5); }
.blog-details-desc .article-content .wn .wn-tarjeta h3 { font-size: 17px; margin: 10px 0 2px; }
.blog-details-desc .article-content .wn .wn-tarjeta p { font-size: 14px; line-height: 1.4; margin: 0; }
.wn-gratis { position: absolute; top: 10px; right: 10px; z-index: 2; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	background: var(--wn-green); color: var(--wn-ink); padding: 4px 9px; border-radius: 99px; transform: rotate(6deg); }

/* Sección oscura (para colecciones "tech") */
.wn-oscuro { background: radial-gradient(120% 90% at 50% 0%, #2b3138 0%, #14171b 55%, var(--wn-ink) 100%); border-radius: calc(var(--wn-r) + 6px);
	padding: 28px 22px 24px; position: relative; overflow: hidden; }
.wn-oscuro::before { content: ""; position: absolute; left: 0; right: 0; height: 120px; top: -120px; pointer-events: none;
	background: linear-gradient(180deg, rgba(57, 220, 108, 0), rgba(57, 220, 108, .16) 85%, rgba(57, 220, 108, .55) 100%); animation: wn-escaner 4.5s linear infinite; }
.wn-oscuro > * { position: relative; z-index: 1; }
.blog-details-desc .article-content .wn .wn-oscuro h2, .blog-details-desc .article-content .wn .wn-oscuro h3 { color: #fff; }
.blog-details-desc .article-content .wn .wn-oscuro p { color: rgba(255, 255, 255, .72); }
.wn-oscuro .wn-antetitulo { color: var(--wn-green); }
.wn-oscuro .wn-tarjeta { background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.wn-oscuro .wn-tarjeta:hover { box-shadow: inset 0 0 0 1px rgba(57, 220, 108, .7), 0 0 30px -6px rgba(57, 220, 108, .55); }
.wn-oscuro .wn-figura::after { background: rgba(57, 220, 108, .35); }

/* Cifras */
.wn-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.wn-cifras.wn-3 { grid-template-columns: repeat(3, 1fr); }
.wn-cifra { background: var(--wn-ink); color: #fff; border-radius: var(--wn-r); padding: 18px 10px 14px; text-align: center; }
.wn-cifra b { display: block; font-size: 40px; line-height: 1; font-weight: 900; color: var(--wn-green); font-variant-numeric: tabular-nums; }
.wn-cifra span { display: block; font-size: 13px; font-weight: 700; margin-top: 6px; color: rgba(255, 255, 255, .8); text-transform: uppercase; letter-spacing: .05em; }

.wn-cifras.wn-claras .wn-cifra { background: #fff; color: var(--wn-ink); box-shadow: 0 10px 24px -14px rgba(12, 3, 5, .35); }
.wn-cifras.wn-claras .wn-cifra b { color: var(--wn-green-d); }
.wn-cifras.wn-claras .wn-cifra span { color: var(--wn-soft); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
.wn-verde-t { color: var(--wn-green); }

/* Ideas numeradas (problema / solución) */
.wn-ideas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 16px; }
.wn-ideas.wn-3 { grid-template-columns: repeat(3, 1fr); }
.wn-idea { background: #fff; border-radius: var(--wn-r); padding: 20px 20px 16px; box-shadow: 0 10px 24px -16px rgba(12, 3, 5, .4); position: relative; }
.wn-num { display: inline-block; font-size: 13px; font-weight: 900; background: var(--wn-ink); color: var(--wn-green); border-radius: 8px; padding: 4px 8px; margin-bottom: 8px; }
.blog-details-desc .article-content .wn .wn-idea h3 { margin-top: 2px; }
.blog-details-desc .article-content .wn .wn-idea p { font-size: 15px; line-height: 1.5; margin: 0; }
.wn-oscuro .wn-idea { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }

/* Foto + texto */
.wn-dividido { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; }
.wn-dividido.wn-inverso .wn-foto { order: 2; }
.wn-foto { border-radius: calc(var(--wn-r) + 4px); overflow: hidden; box-shadow: 0 18px 34px -18px rgba(12, 3, 5, .55); transform: rotate(-1.5deg); transition: transform .4s; }
.wn-inverso .wn-foto { transform: rotate(1.5deg); }
.wn-foto:hover { transform: rotate(0) scale(1.02); }
.wn-foto .article-image img { display: block; }

/* Rejilla de juegos */
.wn-juegos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 18px 0 6px; }
.wn-juegos .article-image { border-radius: 50%; box-shadow: 0 8px 18px -10px rgba(12, 3, 5, .5); animation: wn-bote 3.2s ease-in-out infinite; }
.wn-juegos > :nth-child(2n) .article-image, .wn-juegos > :nth-child(2n).article-image { animation-delay: .4s; }
.wn-juegos > :nth-child(3n) .article-image, .wn-juegos > :nth-child(3n).article-image { animation-delay: .8s; }
.wn-juegos > :nth-child(5n) .article-image, .wn-juegos > :nth-child(5n).article-image { animation-delay: 1.2s; }

/* Lista con marcas */
.wn-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; margin-top: 16px; }
.wn-lista span { display: block; position: relative; padding: 12px 14px 12px 46px; background: #fff; border-radius: 14px; font-weight: 700; font-size: 15px; line-height: 1.35;
	box-shadow: 0 8px 18px -14px rgba(12, 3, 5, .45); }
.wn-lista span::before { content: "✓"; position: absolute; left: 12px; top: 50%; margin-top: -12px; width: 24px; height: 24px; border-radius: 50%;
	background: var(--wn-green); color: var(--wn-ink); font-weight: 900; font-size: 14px; line-height: 24px; text-align: center; }

/* Llamada final */
.wn-cta { margin-top: 44px; border-radius: calc(var(--wn-r) + 6px); padding: 30px 24px; text-align: center; position: relative; overflow: hidden;
	background: linear-gradient(120deg, var(--wn-green) 0%, #7ff0a2 50%, var(--wn-green) 100%); background-size: 200% 100%; animation: wn-brillo 6s ease-in-out infinite; }
.blog-details-desc .article-content .wn .wn-cta h2 { color: var(--wn-ink); margin-bottom: 6px; }
.blog-details-desc .article-content .wn .wn-cta p { color: rgba(12, 3, 5, .75); margin-bottom: 18px; }
.blog-details-desc .article-content .wn a.wn-boton, .wn a.wn-boton { display: inline-block; background: var(--wn-ink); color: #fff; font-weight: 800; font-size: 17px;
	padding: 14px 26px; border-radius: 99px; text-decoration: none; transition: transform .2s; animation: wn-pulso 2.4s ease-in-out infinite; }
.wn a.wn-boton:hover { transform: scale(1.05); color: var(--wn-green); }

/* Entrada al hacer scroll (solo con JS: sin JS todo se ve) */
.wn-js .wn-aparece { opacity: 0; transform: translateY(28px) scale(.98); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.wn-js .wn-aparece.wn-visto { opacity: 1; transform: none; }
.wn-js .wn-tarjetas .wn-tarjeta, .wn-js .wn-cifras .wn-cifra { opacity: 0; transform: translateY(30px) scale(.9); }
.wn-js .wn-visto .wn-tarjeta, .wn-js .wn-visto .wn-cifra { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.2, .9, .3, 1.35); }
.wn-js .wn-visto > :nth-child(2) { transition-delay: .12s; }
.wn-js .wn-visto > :nth-child(3) { transition-delay: .24s; }
.wn-js .wn-visto > :nth-child(4) { transition-delay: .36s; }
.wn-js .wn-visto .wn-tarjeta:hover { transition-delay: 0s; }

@keyframes wn-gira { to { transform: rotate(360deg); } }
@keyframes wn-tono { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@keyframes wn-bote { 0%, 70%, 100% { transform: translateY(0) scale(1); } 80% { transform: translateY(-7px) scale(1.12); } 90% { transform: translateY(0) scale(.95); } }
@keyframes wn-pegatina { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-8px); } }
@keyframes wn-flota { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(.6deg); } }
@keyframes wn-sombra { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.8); opacity: .6; } }
@keyframes wn-salto { 0% { transform: translateY(0) scale(1, 1); } 25% { transform: translateY(0) scale(1.06, .92); } 55% { transform: translateY(-20px) scale(.96, 1.05); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes wn-latido { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.18); opacity: .55; } }
@keyframes wn-meneo { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-6deg); } 92% { transform: rotate(5deg); } 95% { transform: rotate(-3deg); } }
@keyframes wn-escaner { 0% { top: -120px; } 100% { top: 110%; } }
@keyframes wn-brillo { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
@keyframes wn-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(12, 3, 5, .35); } 50% { box-shadow: 0 0 0 10px rgba(12, 3, 5, 0); } }

@media (max-width: 767px) {
	.blog-details-desc .article-content .wn h2 { font-size: 25px; }
	.wn-intro { padding: 20px 18px 12px; }
	.wn-prota { grid-template-columns: 1fr; gap: 10px; padding: 24px 20px 20px; text-align: center; }
	.wn-prota::before { left: 50%; margin-left: -320px; top: 0; margin-top: -170px; }
	.wn-pegatina { width: 170px; margin: 0 auto; }
	.wn-prota .wn-chapas { justify-content: center; }
	.blog-details-desc .article-content .wn .wn-prota h2 { font-size: 28px; }
	.blog-details-desc .article-content .wn .wn-intro p { font-size: 17px; }
	.wn-tarjetas, .wn-tarjetas.wn-3, .wn-tarjetas.wn-seis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.wn-color { grid-template-columns: 1fr; gap: 8px; padding: 22px 18px; text-align: center; }
	.wn-color .wn-pegatina { width: 140px; margin: 0 auto; }
	.wn-puntos { justify-content: center; }
	.wn-ideas, .wn-ideas.wn-3 { grid-template-columns: 1fr; }
	.wn-dividido { grid-template-columns: 1fr; gap: 16px; }
	.wn-dividido.wn-inverso .wn-foto { order: 0; }
	.wn-juegos { grid-template-columns: repeat(5, 1fr); gap: 8px; }
	.wn-lista { grid-template-columns: 1fr; }
	.wn-cifras.wn-3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.wn-cifras.wn-3 .wn-cifra b { font-size: 28px; }
	.wn-cifras.wn-3 .wn-cifra span { font-size: 11px; }
	.wn-tarjetas.wn-3 .wn-tarjeta:last-child { grid-column: 1 / -1; max-width: calc(50% - 5px); justify-self: center; width: 100%; }
	.wn-oscuro { padding: 22px 14px 16px; }
	.wn-cifras { grid-template-columns: repeat(2, 1fr); }
	.wn-cifra b { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
	.wn *, .wn *::before, .wn *::after { animation: none !important; transition: none !important; }
	.wn-js .wn-aparece, .wn-js .wn-tarjetas .wn-tarjeta, .wn-js .wn-cifras .wn-cifra { opacity: 1; transform: none; }
}