/* Nereida · Calendario de semanas (Core 1.5.0; escala de texto de cinco tamaños desde la 1.6.0) */
.n-sem-viaje {
	--ns-card: var(--color-paper, #fff);
	--ns-bar: var(--color-bg, #EBF8FF);
	--ns-bar-hover: #DDF2FF;
	--ns-ink: var(--color-ink, #070035);
	--ns-ink-soft: color-mix(in srgb, var(--ns-ink) 70%, transparent);
	--ns-muted: color-mix(in srgb, var(--ns-ink) 60%, transparent); /* 60 % desde la 1.6.1: contraste AA */
	--ns-rule: color-mix(in srgb, var(--ns-ink) 16%, transparent);
	--ns-line: var(--color-blue-text, #0093D9);
	--ns-label: var(--color-blue-text-s, #0077B0); /* 1.25.1: la etiqueta del paso es texto de 14 px y con el azul de la línea daba 3,4 a 1 */
	--ns-radius: var(--radius-block, clamp(28px, 3.4vw, 48px));
	--ns-paso: 26vh;
	--ns-ease: cubic-bezier(.22, 1, .36, 1);
	width: 100%;
}
.n-sem { border-radius: var(--ns-radius); background: var(--ns-card); color: var(--ns-ink); padding: clamp(24px, 3.2vw, 56px); }
.n-sem-k { display: flex; justify-content: space-between; gap: 16px; margin-bottom: clamp(16px, 1.8vw, 26px); font-size: var(--font-kicker, 14px); line-height: 1.6; font-weight: 500; color: var(--ns-muted); }
/* con fechas, el rótulo de la izquierda es la frase que cuenta: en tinta */
.n-sem--fechas .n-sem-k-l { color: var(--ns-ink); }
.n-sem-d { display: block; margin-top: 3px; font-style: normal; font-size: var(--font-kicker, 14px); font-weight: 500; color: var(--ns-ink-soft); font-variant-numeric: tabular-nums; }
.n-sem-cal { position: relative; }
/* interlineado propio: el del kit llega en px (28,8) y con la fecha debajo separaba las dos líneas */
.n-sem-weeks { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); font-size: var(--font-kicker, 14px); line-height: 1.6; font-weight: 500; color: var(--ns-muted); }
.n-sem-weeks span { padding: 0 0 12px 12px; border-left: 1px solid var(--ns-rule); }
.n-sem-weeks span i { font-style: normal; }
.n-sem-grid { position: relative; display: grid; gap: 8px; padding: 12px 0 16px; background: repeating-linear-gradient(90deg, var(--ns-rule) 0 1px, transparent 1px calc(100% / var(--cols))); }
.n-sem-viaje button.n-sem-bar { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; height: clamp(44px, 3.9vw, 56px); margin: 0 0 0 calc(var(--a) / var(--cols) * 100%); width: calc((var(--b) - var(--a)) / var(--cols) * 100%); padding: 0 20px; border: 0; border-radius: 999px; background: var(--ns-bar); color: var(--ns-ink); font-family: inherit; font-size: clamp(15px, 1.2vw, 17.5px); font-weight: 500; letter-spacing: -.01em; line-height: 1; white-space: nowrap; text-align: left; cursor: pointer; overflow: hidden; box-shadow: none; transition: background .6s var(--ns-ease), color .6s var(--ns-ease); }
.n-sem-bar b { font-weight: 450; font-size: var(--font-kicker, 14px); opacity: .5; font-variant-numeric: tabular-nums; }
.n-sem-viaje button.n-sem-bar:hover, .n-sem-viaje button.n-sem-bar:focus { background: var(--ns-bar-hover); color: var(--ns-ink); }
.n-sem-viaje button.n-sem-bar.is-on { background: var(--ns-ink); color: var(--ns-card); }
/* 1.25.1: el anillo de foco no sale del color del texto, que en el paso activo es claro sobre la tarjeta blanca. */
.n-sem-viaje button.n-sem-bar:focus-visible { outline: 2px solid var(--color-focus, var(--ns-ink)); outline-offset: 3px; }
.n-sem-bar--fin { -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent); mask-image: linear-gradient(90deg, #000 45%, transparent); }
.n-sem-now { position: absolute; z-index: 0; top: -6px; bottom: 0; left: 0; width: 1.5px; background: var(--ns-line); transform: translateX(calc(var(--x, 0) * 1px)); pointer-events: none; }
.n-sem-now::before { content: ""; position: absolute; left: -4.5px; top: -5px; width: 10.5px; height: 10.5px; border-radius: 50%; background: var(--ns-line); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ns-line) 16%, transparent); }
.n-sem-detail { margin-top: clamp(20px, 2.4vw, 36px); padding-top: clamp(20px, 2.4vw, 36px); border-top: 1px solid color-mix(in srgb, var(--ns-ink) 8%, transparent); display: grid; }
.n-sem-detail article { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 80px); align-items: start; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .4s var(--ns-ease), transform .6s var(--ns-ease), visibility 0s .4s; }
.n-sem-detail article.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--ns-ease) .1s, transform .9s var(--ns-ease) .1s, visibility 0s; }
.n-sem-viaje .n-sem-t { margin: 0; padding: 0; font-family: inherit; color: var(--ns-ink); font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -.035em; font-weight: 560; }
.n-sem-t span { display: block; margin-bottom: 10px; font-size: var(--font-kicker, 14px); letter-spacing: 0; font-weight: 500; color: var(--ns-label); }
.n-sem-viaje .n-sem-p, .n-sem-viaje .n-sem-p p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ns-ink-soft); max-width: 36em; }
.n-sem-viaje .n-sem-p { min-height: 6.4em; }
.n-sem-viaje .n-sem-p p + p { margin-top: .8em; }
.n-sem-mini { display: none; }

@media (min-width: 901px) {
	/* el viaje: la tarjeta se queda quieta y centrada mientras pasan las semanas */
	.n-sem-viaje { height: calc(var(--sem-h, 640px) + var(--n, 5) * var(--ns-paso)); }
	.n-sem { position: sticky; top: max(84px, calc((100vh - var(--sem-h, 640px)) / 2)); }
}
@media (min-width: 901px) and (max-height: 780px) {
	.n-sem { padding-block: 24px; }
	.n-sem-viaje button.n-sem-bar { height: 40px; }
	.n-sem-grid { gap: 6px; }
	.n-sem-viaje .n-sem-p, .n-sem-viaje .n-sem-p p { font-size: var(--font-body, 17px); }
	.n-sem-viaje .n-sem-p { min-height: 5.6em; }
}
/* en el editor no hay viaje: se ve el calendario y, debajo, todas las fases para poder editarlas */
.elementor-editor-active .n-sem-viaje { height: auto; }
.elementor-editor-active .n-sem { position: relative; top: auto; }
.elementor-editor-active .n-sem-detail { gap: 28px; }
.elementor-editor-active .n-sem-detail article { grid-area: auto; opacity: 1; visibility: visible; transform: none; }
.elementor-editor-active .n-sem-viaje .n-sem-p { min-height: 0; }

@media (max-width: 900px) {
	/* en móvil, una ficha por fase; la barra se llena siempre desde el principio hasta donde llega la fase */
	.n-sem { padding: 0; background: none; border-radius: 0; }
	.n-sem-k { flex-direction: column; gap: 2px; margin-bottom: 18px; }
	.n-sem-cal { display: none; }
	.n-sem-detail { margin: 0; padding: 0; border: 0; gap: 10px; }
	.n-sem-detail article, .n-sem-detail article.is-on { grid-area: auto; display: block; opacity: 1; visibility: visible; transform: none; padding: 22px 20px 24px; border-radius: 22px; background: var(--ns-card); }
	.n-sem-viaje .n-sem-t { font-size: 25px; margin-bottom: 12px; }
	.n-sem-viaje .n-sem-p { min-height: 0; }
	.n-sem-mini { position: relative; display: block; height: 8px; margin-bottom: 20px; border-radius: 99px; background: var(--ns-bar); overflow: hidden; }
	.n-sem-mini i { position: absolute; top: 0; bottom: 0; left: 0; width: calc(min(var(--b), var(--cols)) / var(--cols) * 100%); border-radius: 99px; background: var(--ns-ink); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.16, 1, .3, 1) .15s; }
	.n-sem-mini.is-in i, .elementor-editor-active .n-sem-mini i { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.n-sem-mini i { transform: none; transition: none; }
}
