/* Raizz Motion – estilos globales
 * Toma los colores y tipografías del tema Raizz cuando existen (--fg, --bg, --green, --line2…)
 * y usa valores propios si no. Se leen directo (no como alias en :root) para que respeten
 * los colores que el tema redefine dentro de secciones oscuras (.rz-dark). */
:root {
	--rzm-accent: var(--green, #76b900);
	--rzm-ease: cubic-bezier(.2, .7, .2, 1);
	--rzm-font-display: 'Syne', 'Inter', Arial, sans-serif;
	--rzm-font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.rzm-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ===================== Estados iniciales (evitan parpadeos) =====================
   Solo con html.rzm-ready (lo pone el script del <head>; se quita solo si algo falla). */
.rzm-ready .raizz-reveal,
.rzm-ready .raizz-reveal-group > :not(.e-con-inner),
.rzm-ready .raizz-reveal-group > .e-con-inner > *,
.rzm-ready .raizz-split,
.rzm-ready .raizz-hero {
	visibility: hidden;
}

/* Con scroll suave, el desplazamiento lo maneja ScrollSmoother (el tema usa scroll-behavior:smooth) */
html.rzm-smooth { scroll-behavior: auto !important; }

/* ===================== Preloader ===================== */
.rzm-pre {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	background: var(--rzm-pre-bg, var(--bg, #ffffff));
	color: var(--fg, #0f0f0f);
	/* Red de seguridad sin JavaScript: se va solo a los 2 s */
	animation: rzm-pre-out .45s ease 2s forwards;
}
.rzm-nopre .rzm-pre { display: none; }
.rzm-pre__in { display: grid; justify-items: center; gap: 22px; }
.rzm-pre__logo { max-width: min(180px, 48vw); max-height: 96px; width: auto; height: auto; animation: rzm-pre-in .7s var(--rzm-ease) both; }
.rzm-pre__word { font: 800 clamp(32px, 6vw, 64px)/1 var(--rzm-font-display); letter-spacing: -.02em; animation: rzm-pre-in .7s var(--rzm-ease) both; }
.rzm-pre__bar { display: block; width: 120px; height: 2px; background: color-mix(in srgb, currentColor 15%, transparent); overflow: hidden; border-radius: 2px; }
.rzm-pre__bar > span { display: block; height: 100%; background: var(--rzm-accent); transform-origin: left; animation: rzm-pre-bar 1.1s var(--rzm-ease) both; }
@keyframes rzm-pre-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes rzm-pre-bar { from { transform: scaleX(0); } }
@keyframes rzm-pre-out { to { opacity: 0; visibility: hidden; } }

/* ===================== Cursor ===================== */
.rzm-cursor {
	position: fixed;
	left: 0; top: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0;
	transition: opacity .25s;
}
.rzm-cursor.is-on { opacity: 1; }
.rzm-cursor__dot {
	position: absolute;
	left: -6px; top: -6px;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--rzm-accent);
	transition: transform .45s var(--rzm-ease), background-color .3s, opacity .3s;
}
.rzm-cursor.is-grow .rzm-cursor__dot { transform: scale(4); background: color-mix(in srgb, var(--rzm-accent) 30%, transparent); box-shadow: inset 0 0 0 .4px var(--rzm-accent); }
.rzm-cursor.is-label .rzm-cursor__dot { transform: scale(7.5); background: var(--rzm-accent); }
.rzm-cursor__label {
	position: absolute;
	left: 0; top: 0;
	transform: translate(-50%, -50%);
	font: 700 11px/1 'Inter', Arial, sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #0f0f0f;
	opacity: 0;
	transition: opacity .2s;
}
.rzm-cursor.is-label .rzm-cursor__label { opacity: 1; transition-delay: .12s; }
.rzm-cursor.is-hidden { opacity: 0; }
/* Reemplaza el cursor del tema */
.rzm-cursor-on .cur { display: none !important; }
.rzm-cursor-on, .rzm-cursor-on a, .rzm-cursor-on button, .rzm-cursor-on [role="button"], .rzm-cursor-on .raizz-hover-list * { cursor: none; }
.rzm-cursor-on input, .rzm-cursor-on textarea, .rzm-cursor-on select { cursor: auto; }

/* ===================== Sección con texto fijo ===================== */
.raizz-pin { position: relative; }
/* Texto fijo: sticky dentro de su sección. Termina cuando termina la sección. */
.raizz-pin-target { position: -webkit-sticky; position: sticky; top: 28vh; z-index: 0; align-self: stretch; }
.raizz-pin .raizz-card,
.raizz-pin .raizz-card-invert { position: relative; z-index: 2; }

/* ===================== Tarjetas ===================== */
.raizz-card,
.raizz-card-invert {
	border-radius: 28px;
	padding: clamp(24px, 3vw, 40px);
	border: 1px solid var(--glassb, var(--line2, rgba(0, 0, 0, .14)));
	background: var(--glass, rgba(255, 255, 255, .06));
	-webkit-backdrop-filter: blur(18px) saturate(1.3);
	backdrop-filter: blur(18px) saturate(1.3);
}
/* Contenedores de Elementor: su padding sale de variables; se definen acá con más especificidad
   que el valor por defecto, pero menos que lo que cargues en Avanzado › Relleno. */
.e-con.raizz-card,
.e-con.raizz-card-invert {
	--padding-top: clamp(24px, 3vw, 40px);
	--padding-right: clamp(24px, 3vw, 40px);
	--padding-bottom: clamp(24px, 3vw, 40px);
	--padding-left: clamp(24px, 3vw, 40px);
	--border-radius: 28px;
}
.raizz-card-invert {
	background: #f2f2ec;
	border-color: transparent;
	color: #0f0f0f;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.raizz-card-invert :is(h1, h2, h3, h4, h5, h6, p, li, .elementor-heading-title, .elementor-icon, .elementor-icon-box-title, .elementor-icon-box-description) { color: #0f0f0f; }
.raizz-card-invert .elementor-icon svg { fill: #0f0f0f; }

/* ===================== Tarjeta de proyecto (hover) ===================== */
.raizz-project-card { position: relative; }
.raizz-project-card :is(.elementor-widget-image, figure, .rzm-media) { overflow: hidden; border-radius: inherit; }
.raizz-project-card img { transition: transform .9s var(--rzm-ease); will-change: transform; }
.raizz-project-card :is(h2, h3, h4, .elementor-heading-title) { transition: transform .55s var(--rzm-ease); }
@media (hover: hover) {
	.raizz-project-card:hover img { transform: scale(1.06); }
	.raizz-project-card:hover :is(h2, h3, h4, .elementor-heading-title) { transform: translateX(10px); }
}
.raizz-project-card:focus-within img { transform: scale(1.06); }
.raizz-project-card:focus-within :is(h2, h3, h4, .elementor-heading-title) { transform: translateX(10px); }

/* ===================== Cinta en bucle ===================== */
.rzm-mq { display: block; overflow: hidden; white-space: nowrap; max-width: 100%; }
.rzm-hl__marquee { font: 800 clamp(48px, 11vw, 168px)/1 var(--rzm-font-display); letter-spacing: -.03em; color: var(--fg, #0f0f0f); }
.rzm-mq__track { display: inline-flex; width: max-content; animation: rzm-mq var(--rzm-mq-dur, 24s) linear infinite; will-change: transform; }
.rzm-mq[data-marquee-direction="right"] .rzm-mq__track { animation-direction: reverse; }
.rzm-mq__item { display: inline-block; padding-right: .3em; }
.rzm-mq__sep { display: inline-block; color: var(--rzm-accent); font-size: .6em; vertical-align: middle; transform: translateY(-.08em); }
@keyframes rzm-mq { to { transform: translateX(-50%); } }
.raizz-marquee:not(.rzm-mq) { overflow: hidden; }

/* ===================== Lista de proyectos con imagen flotante ===================== */
.rzm-hl { --rzm-hl-fg: inherit; color: var(--rzm-hl-fg); }
.rzm-hl__marquee { margin-bottom: clamp(24px, 4vw, 56px); }
.rzm-hl__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rzm-hl__item { margin: 0; padding: 0; }
.rzm-hl .rzm-hl__row {
	display: grid;
	grid-template-columns: minmax(56px, .5fr) minmax(0, 3fr) minmax(0, 1.3fr) auto;
	align-items: center;
	gap: clamp(12px, 2vw, 32px);
	padding: clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 22px) clamp(22px, 2.8vw, 40px);
	border: 1px solid var(--rzm-hl-line, var(--line2, rgba(0, 0, 0, .14)));
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
	transition: background-color .35s var(--rzm-ease), color .35s var(--rzm-ease), opacity .35s var(--rzm-ease), border-color .35s;
}
.rzm-hl .rzm-hl__row:hover, .rzm-hl .rzm-hl__row:focus { color: inherit; }
/* Filas armadas a mano (contenedores con data-img): solo píldora y transición; el diseño interno es el de Elementor */
.raizz-hover-list .rzm-hl-row {
	border: 1px solid var(--rzm-hl-line, var(--line2, rgba(0, 0, 0, .14)));
	border-radius: 999px;
	transition: background-color .35s var(--rzm-ease), color .35s var(--rzm-ease), opacity .35s var(--rzm-ease), border-color .35s;
}
.rzm-hl__year { font: 500 13px/1 var(--rzm-font-mono); letter-spacing: .1em; opacity: .7; }
.rzm-hl__title { font: 700 clamp(20px, 2.4vw, 34px)/1.1 var(--rzm-font-display); letter-spacing: -.01em; }
.rzm-hl__cat { font-size: 14px; opacity: .75; }
.rzm-hl__arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; transition: transform .45s var(--rzm-ease); }

/* Fila activa: con mouse (solo dispositivos con hover) o con teclado (siempre).
   La regla de la fila activa repite el :has() para ganarle en especificidad a la de las demás. */
@media (hover: hover) {
	.raizz-hover-list:has(.rzm-hl-row:hover) .rzm-hl-row,
	.raizz-hover-list:has(.rzm-hl__row:hover) .rzm-hl__row { opacity: var(--rzm-hl-dim, .4); }
	.raizz-hover-list:has(.rzm-hl-row:hover) .rzm-hl-row:hover,
	.raizz-hover-list:has(.rzm-hl__row:hover) .rzm-hl__row:hover { opacity: 1; background: var(--rzm-hl-hi-bg, var(--fg, #0f0f0f)); color: var(--rzm-hl-hi-fg, var(--bg, #ffffff)); border-color: transparent; }
	.raizz-hover-list .rzm-hl__row:hover .rzm-hl__arrow { transform: rotate(45deg); }
}
.raizz-hover-list:has(.rzm-hl-row:focus-visible) .rzm-hl-row,
.raizz-hover-list:has(.rzm-hl__row:focus-visible) .rzm-hl__row { opacity: var(--rzm-hl-dim, .4); }
.raizz-hover-list:has(.rzm-hl-row:focus-visible) .rzm-hl-row:focus-visible,
.raizz-hover-list:has(.rzm-hl__row:focus-visible) .rzm-hl__row:focus-visible {
	opacity: 1;
	background: var(--rzm-hl-hi-bg, var(--fg, #0f0f0f));
	color: var(--rzm-hl-hi-fg, var(--bg, #ffffff));
	border-color: transparent;
	outline: 3px solid var(--rzm-accent);
	outline-offset: 4px;
}
.raizz-hover-list .rzm-hl-row:is(:hover, :focus-visible) :is(.elementor-heading-title, p, span) { color: inherit; }
.raizz-hover-list .rzm-hl__row:focus-visible .rzm-hl__arrow { transform: rotate(45deg); }

.rzm-float {
	position: fixed;
	left: 0; top: 0;
	z-index: 9990;
	width: var(--rzm-float-w, 340px);
	aspect-ratio: var(--rzm-float-ratio, 4 / 3);
	border-radius: var(--rzm-float-radius, 18px);
	overflow: hidden;
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45);
}
.rzm-float img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 767px) {
	.raizz-hover-list .rzm-hl-row { border-radius: 28px; }
	.rzm-hl .rzm-hl__row {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "year title arrow" "year cat arrow";
		row-gap: 4px;
		border-radius: 28px;
		padding: 16px 14px 16px 20px;
	}
	.rzm-hl__year { grid-area: year; }
	.rzm-hl__title { grid-area: title; }
	.rzm-hl__cat { grid-area: cat; }
	.rzm-hl__arrow { grid-area: arrow; width: 40px; height: 40px; }
}

/* ===================== Menos movimiento ===================== */
@media (prefers-reduced-motion: reduce) {
	.rzm-mq__track { animation: none; }
	.rzm-pre { display: none; }
	.raizz-project-card img,
	.raizz-project-card :is(h2, h3, h4, .elementor-heading-title) { transition: none; transform: none !important; }
	.rzm-hl .rzm-hl__row, .rzm-hl__arrow, .raizz-hover-list .rzm-hl-row { transition: none; }
	.raizz-hover-list .rzm-hl__row .rzm-hl__arrow { transform: none !important; }
}