/* Nereida · Normas de la casa (Core 1.22.0, /el-estudio/). Una lista numerada en grande para el bloque oscuro: el
   número en azul y la norma al lado; la última, aparte y en azul; una palabra subrayada a mano. Con JavaScript
   (.is-js), las normas entran una detrás de otra y el subrayado se dibuja con la suya. */
.n-normas {
	--nn-text: #EBF8FF;
	--nn-num: var(--color-blue, #82D7FF);
	--nn-line: rgba(235, 248, 255, .16);
	--nn-ease: var(--ease, cubic-bezier(.22, 1, .36, 1));
	list-style: none; margin: 0; padding: 0;
}
.n-normas .n-norma { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; margin: 0; padding: 0 0 30px; color: var(--nn-text); }
.n-normas .n-norma:last-child { padding-bottom: 0; }
.n-normas .n-norma-n { font-size: var(--font-body, 17px); font-weight: 600; line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--nn-num); }
.n-normas .n-norma-t { font-size: clamp(19px, calc(.95vw + 12.3px), 26px); line-height: 1.32; font-weight: 450; letter-spacing: -.012em; text-wrap: pretty; }
.n-normas .n-norma--aparte { margin-top: 6px; padding-top: 30px; border-top: 1px solid var(--nn-line); }
.n-normas .n-norma--aparte .n-norma-t { color: var(--nn-num); font-weight: 500; }
/* El subrayado a mano: un trazo bajo la palabra, que se dibuja */
.n-normas .n-normas-sub { position: relative; white-space: nowrap; }
.n-normas .n-normas-sub svg { position: absolute; left: -2px; bottom: -.36em; width: calc(100% + 6px); height: .5em; overflow: visible; pointer-events: none; }
.n-normas .n-normas-sub path { fill: none; stroke: var(--nn-num); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }

/* La entrada (solo con JavaScript, que pone .is-js): una norma detrás de otra, sin subir mucho */
.n-normas.is-js .n-norma { opacity: 0; translate: 0 10px; transition: opacity .6s var(--nn-ease), translate .7s var(--nn-ease); transition-delay: calc(var(--d) * .14s); }
.n-normas.is-js.is-in .n-norma { opacity: 1; translate: 0 0; }
.n-normas.is-js .n-normas-sub path { stroke-dashoffset: 1; transition: stroke-dashoffset .7s var(--nn-ease); transition-delay: calc(var(--d) * .14s + .45s); }
.n-normas.is-js.is-in .n-normas-sub path { stroke-dashoffset: 0; }
.n-normas.is-js .n-norma .n-normas-sub path { transition-delay: calc(var(--d) * .14s + .45s); }

@media (max-width: 1024px) {
	.n-normas .n-norma { grid-template-columns: 52px minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.n-normas .n-norma { grid-template-columns: 40px minmax(0, 1fr); padding-bottom: 22px; }
	.n-normas .n-norma-n { font-size: 15px; }
	.n-normas .n-norma-t { line-height: 1.36; }
	.n-normas .n-norma--aparte { padding-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.n-normas .n-norma, .n-normas .n-normas-sub path { transition: none; }
}