/* Nereida · Acordeón de scroll (Core 1.5.0; escala de texto de cinco tamaños desde la 1.6.0)
   Sin JS, con movimiento reducido y dentro del editor, todo abierto. Con JS, las
   filas salen ya cerradas (salvo la primera) desde el primer pintado (1.18.2), como
   las deja el script al arrancar, y se van abriendo con el scroll. */
.n-tipos {
	--nt-row: var(--color-bg, #EBF8FF);
	--nt-ink: var(--color-ink, #070035);
	--nt-on: #EBF8FF;
	--nt-on-soft: color-mix(in srgb, var(--nt-on) 74%, transparent);
	--nt-note: var(--color-blue, #82D7FF);
	--nt-radius: clamp(18px, 1.8vw, 26px);
	display: grid;
	align-content: start;
	gap: 10px;
	width: 100%;
}
.n-tipo { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--nt-radius); background: var(--nt-row); color: var(--nt-on); padding: clamp(24px, 3.4vw, 54px); }
.n-tipo-fill { position: absolute; inset: 0; z-index: -2; background: var(--nt-ink); }
/* la forma: grande y recortada por la tarjeta. Dos máscaras cruzadas para que
   el borde izquierdo de su caja no se vea nunca, ni a medio abrir */
.n-tipo-art { position: absolute; z-index: -1; right: 0; bottom: 0; width: min(66%, 780px); height: 100%; min-height: 300px; pointer-events: none; transform-origin: 60% 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 46%), linear-gradient(to top, #000 55%, rgba(0, 0, 0, .55));
	mask-image: linear-gradient(90deg, transparent 0%, #000 46%), linear-gradient(to top, #000 55%, rgba(0, 0, 0, .55));
	-webkit-mask-composite: source-in; mask-composite: intersect; }
.n-tipo-art svg { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; min-height: 300px; display: block; }
.n-tipo-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.n-tipos .n-tipo-t { margin: 0; padding: 0; color: inherit; font-family: inherit; font-size: clamp(25px, 2.7vw, 40px); line-height: 1.1; letter-spacing: -.035em; font-weight: 560; }
.n-tipo-n { flex: none; font-size: clamp(16px, 1.5vw, 22px); font-weight: 450; font-variant-numeric: tabular-nums; opacity: .5; }
.n-tipo-body { display: grid; grid-template-rows: 1fr; }
.n-tipo-in { overflow: hidden; min-height: 0; }
.n-tipo-txt { display: flex; flex-direction: column; gap: 12px; padding-top: clamp(20px, 2.2vw, 30px); max-width: min(34em, 56%); }
.n-tipo-k { font-size: var(--font-kicker, 14px); font-weight: 500; color: var(--nt-note); }
.n-tipos .n-tipo-p, .n-tipos .n-tipo-p p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--nt-on-soft); }
.n-tipos .n-tipo-p p + p { margin-top: .8em; }
.n-tipos .n-tipo-p a { color: var(--nt-on); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, var(--nt-on) 34%, transparent); transition: text-decoration-color .3s; }
.n-tipos .n-tipo-p a:hover { text-decoration-color: var(--nt-on); }

@media (max-width: 900px) {
	.n-tipo-txt { max-width: 72%; }
	.n-tipo-art { width: 84%; opacity: .75; }
}
@media (max-width: 640px) {
	.n-tipo { padding: 24px 22px; }
	.n-tipo-txt { max-width: none; }
	.n-tipo-art { width: 118%; right: -18%; opacity: .5; }
	.n-tipo-n { font-size: 15px; }
}

/* 1.18.2 · El estado cerrado lo pone el CSS, no GSAP. Las filas salen cerradas
   (salvo la primera) desde el primer pintado y se quedan así mientras el script lleva
   el acordeón; GSAP solo pinta por encima, en línea, lo que va abriendo. Antes lo
   cerrado eran estilos en línea de GSAP, y un ScrollTrigger.refresh (al cargar, al
   llegar las fuentes o una imagen) podía borrarlos: las filas aparecían abiertas, se
   cerraban al siguiente giro de rueda y se volvían a abrir. Si el script no toma el
   mando (.is-js) en 8 s, se abren solas. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	body:not(.elementor-editor-active) .n-tipos:not(.is-libre) .n-tipo + .n-tipo { color: var(--nt-ink); }
	body:not(.elementor-editor-active) .n-tipos:not(.is-libre) .n-tipo + .n-tipo .n-tipo-fill { opacity: 0; }
	body:not(.elementor-editor-active) .n-tipos:not(.is-libre) .n-tipo + .n-tipo .n-tipo-body { grid-template-rows: 0fr; }
	body:not(.elementor-editor-active) .n-tipos:not(.is-libre) .n-tipo + .n-tipo .n-tipo-txt { opacity: 0; }
	body:not(.elementor-editor-active) .n-tipos:not(.is-libre) .n-tipo + .n-tipo .n-tipo-art { opacity: 0; transform: translateY(10%) scale(1.14); }
	body:not(.elementor-editor-active) .n-tipos:not(.is-libre) .n-tipo + .n-tipo .n-tipo-n { opacity: .34; }
	body:not(.elementor-editor-active) .n-tipos:not(.is-js):not(.is-libre) .n-tipo + .n-tipo { animation: n-tipo-rescate-c 0s linear 8s forwards; }
	body:not(.elementor-editor-active) .n-tipos:not(.is-js):not(.is-libre) .n-tipo + .n-tipo .n-tipo-fill,
	body:not(.elementor-editor-active) .n-tipos:not(.is-js):not(.is-libre) .n-tipo + .n-tipo .n-tipo-txt { animation: n-tipo-rescate-o 0s linear 8s forwards; }
	body:not(.elementor-editor-active) .n-tipos:not(.is-js):not(.is-libre) .n-tipo + .n-tipo .n-tipo-body { animation: n-tipo-rescate-r 0s linear 8s forwards; }
	body:not(.elementor-editor-active) .n-tipos:not(.is-js):not(.is-libre) .n-tipo + .n-tipo .n-tipo-art { animation: n-tipo-rescate-a 0s linear 8s forwards; }
	body:not(.elementor-editor-active) .n-tipos:not(.is-js):not(.is-libre) .n-tipo + .n-tipo .n-tipo-n { animation: n-tipo-rescate-n 0s linear 8s forwards; }
}
@keyframes n-tipo-rescate-c { to { color: var(--nt-on); } }
@keyframes n-tipo-rescate-o { to { opacity: 1; } }
@keyframes n-tipo-rescate-r { to { grid-template-rows: 1fr; } }
@keyframes n-tipo-rescate-a { to { opacity: 1; transform: none; } }
@keyframes n-tipo-rescate-n { to { opacity: .5; } }