/* Nereida · Mosaico (Core 1.5.0; gestos y fechas desde la 1.6.0). Cifras grandes, pero en peso fino. */
.n-mosaico {
	--nm-espuma: #DDF3EA;
	--nm-lavanda: #EAE7FB;
	--nm-azul: #DDF2FF;
	--nm-ink: var(--color-ink, #070035);
	--nm-muted: color-mix(in srgb, var(--nm-ink) 60%, transparent); /* 60 % desde la 1.6.1: contraste AA */
	--nm-ease: var(--ease, cubic-bezier(.22, 1, .36, 1));
	--nm-ease-out: var(--ease-out, cubic-bezier(.16, 1, .3, 1));
	display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1vw, 16px); width: 100%;
}
.n-pieza { --nm-tile: #fff; grid-column: span 2; display: flex; flex-direction: column; min-height: clamp(230px, 20vw, 300px); padding: clamp(24px, 2.4vw, 38px); border-radius: clamp(18px, 1.8vw, 26px); background: var(--nm-tile); color: var(--nm-ink); }
.n-pieza--w3 { grid-column: span 3; min-height: clamp(200px, 17vw, 260px); }
.n-pieza--w4 { grid-column: span 4; }
.n-pieza--w6 { grid-column: 1 / -1; min-height: 0; }
.n-pieza--espuma { --nm-tile: var(--nm-espuma); }
.n-pieza--lavanda { --nm-tile: var(--nm-lavanda); }
.n-pieza--azul { --nm-tile: var(--nm-azul); }
.n-pieza-ic { width: 30px; height: 30px; margin-bottom: auto; }
.n-mosaico .n-pieza-n { margin: 40px 0 0; font-size: clamp(54px, 6.2vw, 92px); line-height: 1; letter-spacing: -.055em; font-weight: 450; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--nm-ink); }
.n-pieza-n small { display: block; margin-bottom: 10px; font-size: var(--font-kicker, 14px); line-height: 1; letter-spacing: 0; font-weight: 500; color: color-mix(in srgb, var(--nm-ink) 70%, transparent); }
.n-mosaico .n-pieza-k { margin: 14px 0 0; font-size: var(--font-body, 17px); line-height: 1.4; font-weight: 500; color: var(--nm-ink); }
.n-pieza-k span, .n-pieza-t span { color: var(--nm-muted); font-weight: 450; }
.n-mosaico .n-pieza-t { margin: 40px 0 0; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.25; letter-spacing: -.02em; font-weight: 500; max-width: 19em; text-wrap: balance; color: var(--nm-ink); }
/* línea con fechas (1.6.0): la rellena nereida-bento.js y sin JS no sale */
.n-mosaico .n-pieza-f { margin: 6px 0 0; font-size: var(--font-kicker, 14px); line-height: 1.45; font-weight: 450; color: color-mix(in srgb, var(--nm-ink) 70%, transparent); max-width: 24em; }

/* Iconos con gesto (1.6.0), los de la maqueta de /diseno-web/: la firma se alarga, el sol
   sube, la aguja da la vuelta, el mensaje se escribe, el globo gira y el check se dibuja.
   Con ratón, al pasar por encima; sin ratón, al cruzar el centro (is-on, de nereida-bento.js). */
.n-mosaico--vivo .n-pieza-ic * { transform-box: fill-box; }
.n-mosaico--vivo .n-ic-firma { transform-origin: 0 50%; transition: transform .7s var(--nm-ease); }
.n-mosaico--vivo .n-ic-sol { transition: transform .8s var(--nm-ease); }
.n-mosaico--vivo .n-ic-aguja { transform-box: view-box; transform-origin: 16px 17px; transition: transform 1.2s var(--nm-ease-out); }
.n-mosaico--vivo .n-ic-l1, .n-mosaico--vivo .n-ic-l2 { transform-origin: 0 50%; transition: transform .5s var(--nm-ease); }
.n-mosaico--vivo .n-ic-l2 { transition-delay: .12s; }
.n-mosaico--vivo .n-ic-meridianos { transform-origin: 50% 50%; transition: transform 1s var(--nm-ease-out); }
.n-mosaico--vivo .n-ic-check { stroke-dasharray: 13; stroke-dashoffset: 0; }
.n-mosaico--vivo .n-ic-candado { transition: transform .7s var(--nm-ease); }
.n-mosaico--vivo .n-ic-dientes { transform-origin: 50% 0; transition: transform .6s var(--nm-ease); }
.n-mosaico--vivo .n-pieza:is(:hover, .is-on) .n-ic-firma { transform: scaleX(1.9); }
.n-mosaico--vivo .n-pieza:is(:hover, .is-on) .n-ic-dientes { transform: scaleY(-1); }
.n-mosaico--vivo .n-pieza:is(:hover, .is-on) .n-ic-sol { transform: translate(-3px, -3px); }
.n-mosaico--vivo .n-pieza:is(:hover, .is-on) .n-ic-aguja { transform: rotate(360deg); }
.n-mosaico--vivo .n-pieza:is(:hover, .is-on) .n-ic-l1 { animation: n-ic-escribe .9s var(--nm-ease) both; }
.n-mosaico--vivo .n-pieza:is(:hover, .is-on) .n-ic-l2 { animation: n-ic-escribe .9s var(--nm-ease) .15s both; }
.n-mosaico--vivo .n-pieza:is(:hover, .is-on) .n-ic-meridianos { transform: scaleX(-1); }
.n-mosaico--vivo .n-pieza:is(:hover, .is-on) .n-ic-check { animation: n-ic-check .8s var(--nm-ease) both; }
.n-mosaico--vivo .n-pieza:is(:hover, .is-on) .n-ic-candado { transform: translateY(-3px); }
@keyframes n-ic-escribe { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
/* 1.17.0 (/el-estudio/): los pilotos del servidor se encienden, la aguja del velocímetro sube y las barras crecen
   (la del medio baja). El artículo usa las líneas que se escriben (n-ic-l1 y n-ic-l2). */
.n-mosaico--vivo .n-ic-led1, .n-mosaico--vivo .n-ic-led2 { fill: transparent; transition: fill .5s var(--nm-ease); }
.n-mosaico--vivo .n-ic-led2 { transition-delay: .18s; }
.n-mosaico--vivo .n-pieza:is(:hover, .is-on) :is(.n-ic-led1, .n-ic-led2) { fill: currentColor; }
.n-mosaico--vivo .n-ic-vel { transform-box: view-box; transform-origin: 16px 22px; transition: transform .8s var(--nm-ease); }
.n-mosaico--vivo .n-pieza:is(:hover, .is-on) .n-ic-vel { transform: rotate(28deg); }
.n-mosaico--vivo :is(.n-ic-b1, .n-ic-b2, .n-ic-b3) { transform-origin: 50% 100%; transition: transform .7s var(--nm-ease); }
.n-mosaico--vivo .n-pieza:is(:hover, .is-on) .n-ic-b1 { transform: scaleY(1.5); }
.n-mosaico--vivo .n-pieza:is(:hover, .is-on) .n-ic-b2 { transform: scaleY(.75); transition-delay: .08s; }
.n-mosaico--vivo .n-pieza:is(:hover, .is-on) .n-ic-b3 { transform: scaleY(1.3); transition-delay: .16s; }
/* La persona asiente (1.15.0), solo donde el widget lleve la clase `n-asiente` (Avanzado → Clases CSS):
   en las demás páginas sigue quieta, como se aprobó */
.n-asiente .n-mosaico--vivo .n-pieza:is(:hover, .is-on) .n-ic-cabeza { animation: n-ic-asiente .9s var(--nm-ease) both; }
@keyframes n-ic-asiente { 0%, 100% { transform: none; } 30% { transform: translateY(1.8px); } 62% { transform: translateY(-.4px); } }
@keyframes n-ic-check { 0% { stroke-dashoffset: 13; } 100% { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .n-mosaico--vivo .n-pieza-ic * { transition: none !important; animation: none !important; } }

@media (max-width: 900px) {
	.n-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.n-pieza, .n-pieza--w3, .n-pieza--w4 { grid-column: span 1; min-height: 210px; }
	.n-pieza--w3, .n-pieza--w4, .n-pieza--w6 { grid-column: 1 / -1; min-height: 0; }
}
@media (max-width: 640px) {
	.n-mosaico { grid-template-columns: 1fr; }
	.n-pieza, .n-pieza--w3, .n-pieza--w4, .n-pieza--w6 { grid-column: 1; min-height: 0; }
	.n-mosaico .n-pieza-n, .n-mosaico .n-pieza-t { margin-top: 28px; }
}