/* ============================================================
   VJSEO Agency — Design System (light)
   Style: Exaggerated Minimalism + subtle glass depth
   Fonts: Plus Jakarta Sans (UI) · JetBrains Mono (dev accent)
   ============================================================ */

:root {
	/* Surfaces */
	--vj-bg: #f8fafc;         /* Fondo principal */
	--vj-surface: #ffffff;
	--vj-surface-2: #eef1f5;

	/* Ink */
	--vj-ink: #0b1f33;        /* Primario — deep navy, headings */
	--vj-text: #2b2f36;       /* Texto */
	--vj-muted: #5b636e;
	--vj-border: #d9dee5;     /* Bordes / fondos suaves */

	/* Brand */
	--vj-primary: #0077ff;    /* Secundario — interactive blue */
	--vj-primary-2: #3391ff;
	--vj-cta: #ff6a00;        /* Acento — orange CTA */

	/* Ignition */
	--vj-on: #22c55e;         /* ON stays green (universal "go") */
	--vj-off: #ff6a00;        /* OFF uses brand accent orange */

	/* System */
	--vj-radius: 18px;
	--vj-radius-sm: 12px;
	--vj-shadow: 0 10px 40px -12px rgba(15, 23, 42, 0.18);
	--vj-shadow-lg: 0 30px 80px -24px rgba(0, 119, 255, 0.28);
	--vj-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--vj-maxw: 1180px;

	/* Fluid type */
	--vj-h1: clamp(2.6rem, 6vw, 5.25rem);
	--vj-h2: clamp(1.9rem, 4vw, 3rem);
	--vj-lead: clamp(1.05rem, 1.6vw, 1.3rem);
}

/* ---- Reset-ish scope (only affects our blocks) ---- */
.vjseo * { box-sizing: border-box; }

.vjseo {
	font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
	color: var(--vj-text);
	background: var(--vj-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.vjseo .vj-wrap {
	max-width: var(--vj-maxw);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* One consistent vertical rhythm for every section (top = bottom), so the gap
   between any two sections is identical. Hero/pagehero override only the TOP
   (to clear the fixed header); their bottom stays on this rhythm. */
.vjseo section { padding-block: clamp(2.6rem, 5.2vw, 4.4rem); }

.vjseo h1, .vjseo h2, .vjseo h3 {
	line-height: 1.05;
	letter-spacing: -0.03em;
	font-weight: 800;
	margin: 0 0 0.5em;
	color: var(--vj-ink);
}
.vjseo h1 { font-size: var(--vj-h1); }
.vjseo h2 { font-size: var(--vj-h2); }
.vjseo p  { color: var(--vj-muted); margin: 0 0 1rem; max-width: 62ch; }

.vjseo .vj-mono {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vj-primary);
}

.vjseo .vj-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: "JetBrains Mono", monospace;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vj-primary);
	background: rgba(0, 119, 255, 0.08);
	border: 1px solid rgba(0, 119, 255, 0.18);
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	margin-bottom: 1.25rem;
}
.vjseo .vj-eyebrow::before {
	content: "";
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--vj-on);
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

/* ---- Buttons ---- */
.vjseo .vj-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-weight: 700;
	font-size: 1rem;
	padding: 0.95rem 1.6rem;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.2s var(--vj-ease), box-shadow 0.2s var(--vj-ease), background 0.2s var(--vj-ease);
}
.vjseo .vj-btn-primary {
	background: var(--vj-primary);
	color: #fff;
	box-shadow: 0 12px 28px -10px rgba(0, 119, 255, 0.6);
}
.vjseo .vj-btn-primary:hover { background: #005fd1; box-shadow: 0 18px 36px -10px rgba(0, 119, 255, 0.7); }
.vjseo .vj-btn-ghost {
	background: var(--vj-surface);
	color: var(--vj-text);
	border-color: var(--vj-border);
}
.vjseo .vj-btn-ghost:hover { border-color: var(--vj-primary); color: var(--vj-primary); }
.vjseo .vj-btn:focus-visible { outline: 3px solid rgba(0, 119, 255, 0.4); outline-offset: 3px; }

/* ============================================================
   Language toggle (fixed)
   ============================================================ */
.vjseo-langtoggle {
	position: fixed;
	top: 1.1rem; right: 1.1rem;
	z-index: 60;
	display: inline-flex;
	background: var(--vj-surface);
	border: 1px solid var(--vj-border);
	border-radius: 999px;
	padding: 3px;
	box-shadow: var(--vj-shadow);
	font-family: "JetBrains Mono", monospace;
	font-size: 0.72rem;
	font-weight: 600;
}
.vjseo-langtoggle button {
	border: 0; background: transparent; cursor: pointer;
	padding: 0.35rem 0.7rem; border-radius: 999px;
	color: var(--vj-muted); transition: all 0.2s var(--vj-ease);
}
.vjseo-langtoggle button[aria-pressed="true"] {
	background: var(--vj-primary); color: #fff;
}

/* ============================================================
   HERO
   ============================================================ */
.vjseo-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 85% -10%, rgba(51, 145, 255, 0.12), transparent 60%),
		radial-gradient(99% 88% at 0% 110%, rgba(34, 197, 94, 0.11), transparent 60%),
		var(--vj-bg);
}
.vjseo-hero .vj-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start; /* button aligns with the title, not the tall left column */
	min-height: min(61.6vh, 572px);
}
/* Keep the headline readable — cap the size and balance the line breaks. */
.vjseo-hero h1 {
	font-size: clamp(2.1rem, 3.8vw, 3.5rem);
	line-height: 1.05;
	text-wrap: balance;
}
.vjseo-hero h1 .vj-accent {
	background: linear-gradient(120deg, var(--vj-primary), var(--vj-on));
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
}
.vjseo-hero .vj-lead { font-size: var(--vj-lead); max-width: 46ch; }
.vjseo-hero .vj-cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.75rem; }
.vjseo-hero .vj-stats {
	display: flex; gap: 2.25rem; margin-top: 2.5rem; flex-wrap: wrap;
}
.vjseo-hero .vj-stat strong { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; }
.vjseo-hero .vj-stat span { font-size: 0.8rem; color: var(--vj-muted); }

/* ---- Hero visual B: auto-parts photo + storefront mockup on the screen ---- */
.vj-hero-visual { position: relative; width: 100%; max-width: 560px; margin-inline: auto; }
.vj-hero-photo { width: 100%; height: auto; display: block; }
/* Enlarge the hero photo ~10% without reflowing the copy (desktop only). */
@media (min-width: 881px) {
	.vjseo-hero .vj-hero-visual { transform: scale(1.1); transform-origin: center; }
}
/* Storefront mockup sitting on the laptop screen (percentages = position over
   the blank screen area; tweak top/left/width/height to nudge onto the screen). */
.vj-shop {
	position: absolute; top: 5%; left: 20%; width: 53%; height: 37%;
	background: #fff; border-radius: 6px; overflow: hidden;
	box-shadow: 0 1px 4px rgba(11, 31, 51, 0.14), inset 0 0 0 1px rgba(11, 31, 51, 0.05);
	display: flex; flex-direction: column;
	container-type: inline-size;
}
.vj-shop-bar { display: flex; align-items: center; gap: 1.6cqw; padding: 1.8cqw 2.4cqw; border-bottom: 1px solid #eef1f5; }
.vj-shop-logo { font-weight: 800; font-size: 3.4cqw; letter-spacing: -0.02em; color: var(--vj-ink); white-space: nowrap; }
.vj-shop-logo b { color: var(--vj-primary); }
.vj-shop-search { flex: 1; display: flex; align-items: center; gap: 1cqw; font-size: 2.5cqw; color: var(--vj-muted); background: var(--vj-surface-2); border-radius: 20px; padding: 0.8cqw 2cqw; white-space: nowrap; overflow: hidden; }
.vj-shop-search svg { width: 2.8cqw; height: 2.8cqw; flex: none; }
.vj-shop-cart svg { width: 3.6cqw; height: 3.6cqw; color: var(--vj-ink); }
.vj-shop-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; padding: 2cqw; }
.vj-shop-card { background: #fff; border: 1px solid #eef1f5; border-radius: 1.4cqw; padding: 1.6cqw; display: flex; flex-direction: column; gap: 0.8cqw; }
.vj-shop-thumb { height: 6cqw; border-radius: 1.2cqw; }
.vj-shop-thumb.t1 { background: linear-gradient(135deg, #c9d3de, #9fb0c0); }
.vj-shop-thumb.t2 { background: linear-gradient(135deg, #dfe6ee, #b9c6d3); }
.vj-shop-thumb.t3 { background: linear-gradient(135deg, #cdd7e1, #a7b6c4); }
.vj-shop-thumb.t4 { background: linear-gradient(135deg, #d6dde5, #aeb9c6); }
.vj-shop-card strong { font-size: 2.5cqw; line-height: 1.15; color: var(--vj-ink); }
.vj-shop-row { display: flex; align-items: center; justify-content: space-between; }
.vj-shop-price { font-size: 2.8cqw; font-weight: 800; color: var(--vj-primary); }
.vj-shop-add { width: 4cqw; height: 4cqw; border-radius: 1.2cqw; background: var(--vj-cta); color: #fff; font-size: 3cqw; line-height: 4cqw; text-align: center; font-weight: 700; }

/* ---- Engine Start/Stop push button ----
   Anatomy: knurled chrome bezel -> recessed dark well -> illuminated LED
   ring -> glossy black button face with curved text + power symbol.
   LED colour = --led (OFF: brand orange, ON: green "running"). */
.vj-ignition { display: grid; place-items: center; }

.vj-startstop {
	--led: var(--vj-off);
	position: relative;
	width: min(330px, 76vw);
	aspect-ratio: 1;
	border: 0; padding: 0; margin: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	touch-action: manipulation;
	isolation: isolate;
}
/* Dark matte dashboard bezel — soft-touch plastic, diffused into the page
   (no light chrome). The wide dark glow feathers the panel edge like the
   out-of-focus surround of a real car dashboard. */
.vj-startstop::before {
	content: "";
	position: absolute; inset: 0; border-radius: 50%; z-index: 0;
	background: radial-gradient(125% 125% at 50% 33%, #2b313a, #171b21 50%, #0a0c10 88%);
	box-shadow:
		0 0 72px 16px rgba(14, 17, 22, 0.42),
		0 44px 80px -26px rgba(0, 0, 0, 0.55),
		inset 0 2px 5px rgba(255, 255, 255, 0.06),
		inset 0 -14px 30px rgba(0, 0, 0, 0.78);
}
/* Recessed dark well between bezel and button */
.vj-startstop::after {
	content: "";
	position: absolute; inset: 12%; border-radius: 50%; z-index: 1;
	background: radial-gradient(closest-side, #0b0e13, #05070a);
	box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05), inset 0 10px 22px rgba(0,0,0,0.75);
}
/* Illuminated LED ring */
.vj-startstop .vj-ss-ring {
	position: absolute; inset: 14.5%; border-radius: 50%; z-index: 2;
	background: radial-gradient(closest-side, transparent 73%, var(--led) 78%, transparent 90%);
	filter: drop-shadow(0 0 12px var(--led));
	opacity: 0.92;
	transition: opacity 0.5s var(--vj-ease), filter 0.5s var(--vj-ease);
}
/* Glossy black button face (the pressable part) */
.vj-startstop .vj-ss-face {
	position: absolute; inset: 20%; border-radius: 50%; z-index: 3;
	display: grid; place-items: center;
	background: radial-gradient(120% 120% at 32% 24%, #3a4048, #14181d 46%, #0a0d11 100%);
	box-shadow:
		inset 0 3px 6px rgba(255,255,255,0.14),
		inset 0 -10px 22px rgba(0,0,0,0.8),
		0 10px 22px -8px rgba(0,0,0,0.6);
	transition: transform 0.12s var(--vj-ease), box-shadow 0.12s var(--vj-ease);
}
.vj-startstop .vj-ss-art { width: 84%; height: 84%; overflow: visible; }
.vj-startstop .vj-ss-txt {
	fill: #e7ebf0;
	font-family: "JetBrains Mono", monospace;
	font-size: 13px; font-weight: 600; letter-spacing: 1.4px;
}
/* Power symbol, lit in the LED colour */
.vj-startstop .vj-ss-power {
	fill: none; stroke: var(--led); stroke-width: 6; stroke-linecap: round;
	filter: drop-shadow(0 0 5px var(--led));
	transition: stroke 0.4s var(--vj-ease), filter 0.4s var(--vj-ease);
}
/* Press feedback */
.vj-startstop:active .vj-ss-face {
	transform: scale(0.965);
	box-shadow: inset 0 4px 12px rgba(0,0,0,0.9), inset 0 -3px 8px rgba(0,0,0,0.6);
}
/* ON = engine running (green, gentle pulse) */
.vj-startstop[aria-checked="true"] { --led: var(--vj-on); }
.vj-startstop[aria-checked="true"] .vj-ss-face { transform: scale(0.99); }
.vj-startstop[aria-checked="true"] .vj-ss-ring { animation: vj-ss-pulse 2s var(--vj-ease) infinite; }
@keyframes vj-ss-pulse { 0%,100% { opacity: 0.95; } 50% { opacity: 0.5; } }

.vj-startstop:focus-visible { outline: 3px solid rgba(0,119,255,0.5); outline-offset: 10px; border-radius: 50%; }

.vj-ignition .vj-ss-hint {
	margin-top: 1.5rem; font-family: "JetBrains Mono", monospace;
	font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--vj-muted);
}

/* ============================================================
   Reusable card grid (services / process / portfolio)
   ============================================================ */
.vjseo .vj-head { max-width: 640px; margin-bottom: 3rem; }
.vjseo .vj-head h2 { margin-bottom: 1rem; }
.vjseo .vj-head > p { font-size: var(--vj-lead); color: var(--vj-muted); line-height: 1.7; margin: 0; }
.vjseo .vj-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.25rem;
}
.vjseo .vj-card {
	background: var(--vj-surface);
	border: 1px solid var(--vj-border);
	border-radius: var(--vj-radius);
	padding: 1.75rem;
	transition: transform 0.3s var(--vj-ease), box-shadow 0.3s var(--vj-ease), border-color 0.3s var(--vj-ease);
}
.vjseo .vj-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--vj-shadow-lg);
	border-color: rgba(0, 119, 255, 0.4);
}
.vjseo .vj-card .vj-ico {
	width: 52px; height: 52px; border-radius: 14px;
	display: grid; place-items: center; margin-bottom: 1.1rem;
	background: linear-gradient(135deg, rgba(0,119,255,0.12), rgba(34,197,94,0.12));
	color: var(--vj-primary);
}
.vjseo .vj-card .vj-ico svg { width: 26px; height: 26px; }
.vjseo .vj-card h3 { font-size: 1.25rem; }
.vjseo .vj-card p { font-size: 0.95rem; margin: 0; }

/* Process: numbered */
.vjseo .vj-step .vj-ico {
	font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 1.1rem;
}

/* ============================================================
   Portfolio
   ============================================================ */
.vjseo .vj-folio { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }
.vjseo .vj-folio-item {
	position: relative; border-radius: var(--vj-radius); overflow: hidden;
	aspect-ratio: 4 / 3; background: var(--vj-surface-2);
	border: 1px solid var(--vj-border);
}
.vjseo .vj-folio-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--vj-ease); }
.vjseo .vj-folio-item:hover img { transform: scale(1.06); }
.vjseo .vj-folio-cap {
	position: absolute; inset: auto 0 0 0; padding: 1.1rem 1.25rem;
	background: linear-gradient(to top, rgba(15,23,42,0.82), transparent);
	color: #fff;
}
.vjseo .vj-folio-cap strong { display: block; font-size: 1.05rem; }
.vjseo .vj-folio-cap span { font-size: 0.8rem; opacity: 0.85; font-family: "JetBrains Mono", monospace; }

/* Work-in-progress tile */
.vjseo .vj-folio-item.is-wip { background: linear-gradient(135deg, #0b1f33, #16324c); cursor: default; }
.vj-folio-badge {
	position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%);
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: rgba(255, 255, 255, 0.12); color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.28);
	padding: 0.5rem 1rem; border-radius: 999px;
	font-family: "JetBrains Mono", monospace; font-size: 0.72rem;
	letter-spacing: 0.08em; text-transform: uppercase;
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.vj-folio-badge svg { width: 16px; height: 16px; }
.vjseo .vj-folio-item.is-wip .vj-folio-cap { background: linear-gradient(to top, rgba(11, 31, 51, 0.85), transparent); }

/* ============================================================
   Testimonials
   ============================================================ */
.vjseo .vj-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }
.vjseo .vj-quote {
	background: var(--vj-surface); border: 1px solid var(--vj-border);
	border-radius: var(--vj-radius); padding: 1.75rem;
}
.vjseo .vj-quote p { color: var(--vj-text); font-size: 1.05rem; font-weight: 500; }
.vjseo .vj-quote footer { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; }
.vjseo .vj-quote .vj-av {
	width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
	background: var(--vj-surface-2); flex: none;
}
.vjseo .vj-quote cite { font-style: normal; font-weight: 700; font-size: 0.9rem; }
.vjseo .vj-quote small { display: block; color: var(--vj-muted); font-size: 0.78rem; }

/* ============================================================
   Contact / lead form
   ============================================================ */
.vjseo-contact { background: linear-gradient(180deg, var(--vj-bg), var(--vj-surface-2)); }
/* Contact channels (email + Instagram) */
.vj-channels { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 1.75rem; }
.vjseo .vj-channel {
	display: inline-flex; align-items: center; gap: 0.85rem; width: fit-content;
	padding: 0.7rem 1.1rem 0.7rem 0.7rem; border-radius: 999px;
	background: var(--vj-surface); border: 1px solid var(--vj-border);
	text-decoration: none; color: var(--vj-ink);
	transition: border-color 0.2s var(--vj-ease), box-shadow 0.2s var(--vj-ease), transform 0.2s var(--vj-ease);
}
.vjseo .vj-channel:hover { border-color: var(--vj-primary); box-shadow: var(--vj-shadow); transform: translateY(-2px); }
.vj-channel-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--vj-surface-2); color: var(--vj-primary); flex: none; }
.vj-channel-ico svg { display: block; }
.vj-channel-txt { display: flex; flex-direction: column; line-height: 1.2; }
.vj-channel-txt small { font-size: 0.72rem; color: var(--vj-muted); font-family: "JetBrains Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.vj-channel-txt strong { font-size: 1rem; color: var(--vj-ink); }
.vjseo-contact .vj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.vjseo .vj-form {
	background: var(--vj-surface); border: 1px solid var(--vj-border);
	border-radius: var(--vj-radius); padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: var(--vj-shadow); scroll-margin-top: 90px;
}
.vjseo .vj-field { margin-bottom: 1rem; }
.vjseo .vj-field label {
	display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--vj-text);
}
.vjseo .vj-field input,
.vjseo .vj-field textarea,
.vjseo .vj-field select {
	width: 100%; padding: 0.85rem 1rem; font: inherit;
	background: var(--vj-bg); color: var(--vj-text);
	border: 1px solid var(--vj-border); border-radius: var(--vj-radius-sm);
	transition: border-color 0.2s var(--vj-ease), box-shadow 0.2s var(--vj-ease);
}
.vjseo .vj-field input:focus,
.vjseo .vj-field textarea:focus,
.vjseo .vj-field select:focus {
	outline: none; border-color: var(--vj-primary);
	box-shadow: 0 0 0 4px rgba(0, 119, 255, 0.14);
}
/* When a field is focused (mobile keyboard opens and the browser scrolls it
   into view), keep it clear of the fixed header instead of hidden behind it. */
.vjseo .vj-field input,
.vjseo .vj-field textarea,
.vjseo .vj-field select { scroll-margin-top: 120px; }
.vjseo .vj-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vjseo .vj-form-msg { margin-top: 1rem; font-size: 0.9rem; font-weight: 600; min-height: 1.2em; }
.vjseo .vj-form-msg.is-ok { color: #16a34a; }
.vjseo .vj-form-msg.is-err { color: #dc2626; }
.vjseo .vj-form.is-ignited { box-shadow: 0 0 0 2px var(--vj-on), var(--vj-shadow-lg); }

/* ============================================================
   HEADER / NAVBAR (floating, sticky)
   ============================================================ */
/* Floating overlay header — sits on top of the hero, no white band above. */
.vjseo-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-inline: clamp(0.75rem, 3vw, 1.5rem); }
/* Kill the default <body> margin on our bare canvas pages (the top strip). */
.vjseo-canvas { margin: 0; }
/* When logged in, sit below the WP admin bar so it doesn't overlap the nav. */
.admin-bar .vjseo-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .vjseo-header { top: 46px; } }
.vj-nav {
	position: relative;
	max-width: var(--vj-maxw);
	margin: 0.9rem auto 0;
	display: flex; align-items: center; gap: 0.5rem;
	padding: 0.55rem 0.6rem 0.55rem 1.2rem;
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid var(--vj-border);
	border-radius: 18px;
	box-shadow: 0 6px 24px -14px rgba(11, 31, 51, 0.22);
	transition: box-shadow 0.3s var(--vj-ease), background 0.3s var(--vj-ease);
}
.vj-nav.is-scrolled { box-shadow: 0 16px 40px -18px rgba(11, 31, 51, 0.35); background: rgba(255, 255, 255, 0.92); }
.vj-nav-brand {
	display: flex; align-items: center; gap: 0.6rem;
	font-weight: 800; font-size: 1.18rem; letter-spacing: -0.02em;
	color: var(--vj-ink); text-decoration: none;
}
.vj-nav-brand svg { width: 30px; height: 30px; flex: none; }
.vj-nav-logo { height: 42px; width: auto; display: block; filter: drop-shadow(0 1px 2px rgba(11, 31, 51, 0.12)); }
.vj-foot-brand .vj-nav-logo { height: 40px; filter: none; }
.vj-nav-links { display: flex; gap: 0.15rem; margin-left: 1.1rem; }
.vj-nav-links a {
	padding: 0.5rem 0.85rem; border-radius: 10px;
	color: var(--vj-muted); text-decoration: none;
	font-weight: 600; font-size: 0.92rem;
	transition: color 0.2s var(--vj-ease), background 0.2s var(--vj-ease);
}
.vj-nav-links a:hover { color: var(--vj-ink); background: var(--vj-surface-2); }
.vj-nav-links a[aria-current="page"] { color: var(--vj-primary); background: rgba(0, 119, 255, 0.08); }
.vj-nav-actions { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }
.vj-nav-actions .vj-btn { padding: 0.6rem 1.15rem; font-size: 0.9rem; }
.vjseo-langtoggle.is-inline { position: static; top: auto; right: auto; box-shadow: none; }

/* Desktop: center the nav links in the true middle of the bar (logo left, actions right). */
@media (min-width: 901px) {
	.vj-nav-links {
		position: absolute; left: 50%; top: 50%;
		transform: translate(-50%, -50%);
		margin-left: 0;
	}
}

/* Hamburger */
.vj-nav-toggle {
	display: none; margin-left: auto;
	width: 42px; height: 42px; border: 1px solid var(--vj-border);
	border-radius: 12px; background: var(--vj-surface); cursor: pointer;
	flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.vj-nav-toggle span { width: 18px; height: 2px; background: var(--vj-ink); border-radius: 2px; transition: transform 0.25s var(--vj-ease), opacity 0.2s; }
.vj-nav.is-open .vj-nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.vj-nav.is-open .vj-nav-toggle span:nth-child(2) { opacity: 0; }
.vj-nav.is-open .vj-nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
	.vj-nav { flex-wrap: wrap; }
	.vj-nav-toggle { display: flex; }
	.vj-nav-links {
		order: 3; flex-basis: 100%; flex-direction: column; margin: 0.5rem 0 0.3rem;
		gap: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s var(--vj-ease);
	}
	.vj-nav.is-open .vj-nav-links { max-height: 320px; }
	.vj-nav-links a { padding: 0.75rem 0.85rem; }
	.vj-nav-actions { order: 2; }
}

/* Phones: drop the header CTA so the floating pill stays a single, compact row
   (the menu and the hero already carry the "Iniciar proyecto" action). */
@media (max-width: 600px) {
	.vj-nav-actions .vj-btn { display: none; }
}

/* Anchored sections clear the fixed nav */
.vjseo section[id] { scroll-margin-top: 96px; }

/* Clear the fixed floating header (higher specificity than `.vjseo section`) */
.vjseo .vjseo-hero { padding-top: clamp(6rem, 9vw, 7.5rem); }
.vjseo .vjseo-pagehero,
.vjseo .vjseo-psingle-hero { padding-top: clamp(6.5rem, 10vw, 8.5rem); }
/* On phones the pill is a single compact row (~96px) — clear it with a bit of air. */
@media (max-width: 600px) {
	.vjseo .vjseo-hero,
	.vjseo .vjseo-pagehero,
	.vjseo .vjseo-psingle-hero { padding-top: 7rem; }
}

/* ============================================================
   Trust strip (hero)
   ============================================================ */
.vj-trust { margin-top: 2.75rem; }
.vj-trust > span {
	font-family: "JetBrains Mono", monospace; font-size: 0.72rem;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--vj-muted);
}
.vj-trust-logos { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-top: 0.9rem; }
.vj-trust-logos span {
	font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em;
	color: var(--vj-ink); opacity: 0.35;
	transition: opacity 0.2s var(--vj-ease);
}
.vj-trust-logos span:hover { opacity: 0.7; }

/* ============================================================
   Featured (highlighted) card — IHGRT accent
   ============================================================ */
.vjseo .vj-card.is-featured {
	background: linear-gradient(160deg, var(--vj-primary), #005fd1);
	border-color: transparent; color: #fff;
	box-shadow: 0 24px 50px -20px rgba(0, 119, 255, 0.6);
}
.vjseo .vj-card.is-featured h3 { color: #fff; }
.vjseo .vj-card.is-featured p { color: rgba(255, 255, 255, 0.86); }
.vjseo .vj-card.is-featured .vj-ico { background: rgba(255, 255, 255, 0.16); color: #fff; }
.vjseo .vj-card.is-featured:hover { border-color: transparent; box-shadow: 0 30px 60px -20px rgba(0, 119, 255, 0.7); }

/* ============================================================
   FOOTER
   ============================================================ */
.vjseo-footer { position: relative; background: var(--vj-surface); border-top: 1px solid var(--vj-border); }
.vjseo-footer::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, var(--vj-primary), var(--vj-on) 55%, var(--vj-cta));
}
.vj-foot-grid {
	display: grid; grid-template-columns: 1.6fr 1fr;
	gap: 2.5rem; padding-block: 4rem 3rem;
}
.vj-foot-brand p { font-size: 0.92rem; margin: 1rem 0 1.25rem; max-width: 32ch; }
.vj-foot-social { display: flex; gap: 0.5rem; }
.vj-foot-social a {
	display: inline-flex; align-items: center; gap: 0.5rem;
	padding: 0.35rem 0.9rem 0.35rem 0.4rem;
	border-radius: 999px;
	background: var(--vj-surface-2); color: var(--vj-ink);
	border: 1px solid var(--vj-border);
	text-decoration: none; font-weight: 700; font-size: 0.9rem;
	transition: background 0.2s var(--vj-ease), transform 0.2s var(--vj-ease), border-color 0.2s var(--vj-ease);
}
.vj-foot-social a:hover { transform: translateY(-2px); border-color: var(--vj-primary); background: var(--vj-surface); }
.vj-foot-social svg { width: 24px; height: 24px; display: block; flex: none; }
.vj-foot-col h4, .vj-foot-news h4 {
	font-family: "JetBrains Mono", monospace; font-size: 0.74rem;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--vj-ink);
	margin: 0 0 1.1rem;
}
.vj-foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.vj-foot-col a { color: var(--vj-muted); text-decoration: none; font-size: 0.92rem; line-height: 1.35; transition: color 0.2s var(--vj-ease); }
.vj-foot-col a:hover { color: var(--vj-primary); }
.vj-foot-news p { font-size: 0.9rem; margin: 0 0 1rem; }
.vj-foot-subrow { display: flex; gap: 0.5rem; }
.vj-foot-subrow input {
	flex: 1; padding: 0.7rem 0.9rem; font: inherit;
	background: var(--vj-bg); color: var(--vj-text);
	border: 1px solid var(--vj-border); border-radius: 12px;
}
.vj-foot-subrow input:focus { outline: none; border-color: var(--vj-primary); box-shadow: 0 0 0 4px rgba(0, 119, 255, 0.14); }
.vj-foot-subrow .vj-btn { padding: 0.7rem 0.95rem; flex: none; }
.vj-foot-bottom {
	border-top: 1px solid var(--vj-border); padding-block: 1.35rem;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem;
	font-size: 0.82rem; color: var(--vj-muted);
}
.vj-foot-legal { display: flex; gap: 1.25rem; }
.vj-foot-legal a { color: var(--vj-muted); text-decoration: none; }
.vj-foot-legal a:hover { color: var(--vj-primary); }
@media (max-width: 860px) {
	.vj-foot-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ============================================================
   Legal / policy pages
   ============================================================ */
.vjseo-legal .vj-wrap { max-width: 760px; }
.vj-legal-updated { font-family: "JetBrains Mono", monospace; font-size: 0.8rem; color: var(--vj-muted); margin: 0 0 1.5rem; }
.vjseo .vjseo-legal h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin: 2.25rem 0 0.75rem; color: var(--vj-ink); }
.vjseo .vjseo-legal p { line-height: 1.75; margin: 0 0 1rem; max-width: none; }
.vjseo .vjseo-legal ul { margin: 0 0 1rem; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.vjseo .vjseo-legal li { line-height: 1.65; color: var(--vj-muted); }
.vjseo .vjseo-legal a { color: var(--vj-primary); text-decoration: underline; }

/* ============================================================
   PAGE BANNER (interior pages)
   ============================================================ */
.vjseo-pagehero {
	position: relative;
	padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem);
	background:
		radial-gradient(120% 140% at 88% -20%, rgba(0, 119, 255, 0.10), transparent 60%),
		radial-gradient(90% 120% at 0% 120%, rgba(34, 197, 94, 0.08), transparent 55%),
		var(--vj-bg);
	border-bottom: 1px solid var(--vj-border);
}
.vjseo-pagehero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 0.5rem 0 0; }
.vjseo-pagehero .vj-lead { font-size: var(--vj-lead); margin-top: 1rem; }

/* ============================================================
   ABOUT / NOSOTROS
   ============================================================ */
.vjseo-about .vj-about-intro {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; margin-bottom: 3rem;
}
.vjseo-about .vj-about-lead p:first-child { color: var(--vj-text); font-size: 1.1rem; font-weight: 500; }
.vj-statband {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 1px; background: var(--vj-border);
	border: 1px solid var(--vj-border); border-radius: var(--vj-radius);
	overflow: hidden; margin-bottom: 3rem;
}
.vj-statband-item { background: var(--vj-surface); padding: 1.75rem 1.5rem; text-align: center; }
.vj-statband-item strong {
	display: block; font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800;
	letter-spacing: -0.03em; color: var(--vj-ink);
	background: linear-gradient(120deg, var(--vj-primary), var(--vj-on));
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.vj-statband-item span { font-size: 0.82rem; color: var(--vj-muted); }
@media (max-width: 760px) {
	.vjseo-about .vj-about-intro { grid-template-columns: 1fr; }
	.vj-statband { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Plugins hub (/plugins/) — spacious block per plugin
   ============================================================ */
.vj-phub-list { display: grid; gap: 1.5rem; }
.vjseo .vj-phub-item {
	display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	background: var(--vj-surface); border: 1px solid var(--vj-border);
	border-radius: var(--vj-radius); padding: clamp(1.6rem, 3.4vw, 2.6rem);
	transition: border-color 0.3s var(--vj-ease), box-shadow 0.3s var(--vj-ease), transform 0.3s var(--vj-ease);
}
.vjseo .vj-phub-item:hover { border-color: rgba(0, 119, 255, 0.35); box-shadow: var(--vj-shadow-lg); transform: translateY(-2px); }
.vj-phub-main { display: flex; gap: 1.25rem; align-items: flex-start; }
.vj-phub-body { min-width: 0; }
.vjseo .vj-phub-body h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0.15rem 0 0.5rem; }
.vjseo .vj-phub-body h2 a { color: var(--vj-ink); text-decoration: none; }
.vjseo .vj-phub-body h2 a:hover { color: var(--vj-primary); }
.vjseo .vj-phub-body p { margin: 0; max-width: 60ch; }
.vj-phub-chips { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vj-phub-chips li {
	font-size: 0.76rem; font-weight: 600; color: var(--vj-text);
	background: var(--vj-bg); border: 1px solid var(--vj-border);
	border-radius: 999px; padding: 0.32rem 0.75rem;
}
.vj-phub-side {
	display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem;
	min-width: 190px; text-align: center;
	padding-left: clamp(0rem, 2vw, 1.5rem); border-left: 1px solid var(--vj-border);
}

/* Price cluster — shared by hub + single */
.vj-ps-price { color: var(--vj-ink); display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; justify-content: center; }
.vj-ps-price small { font-size: 0.78rem; color: var(--vj-muted); font-weight: 600; }
.vj-ps-price del { font-size: 0.9rem; color: var(--vj-muted); font-weight: 500; }
.vj-ps-price strong { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; color: var(--vj-primary); }
.vj-ps-price span { font-size: 0.8rem; color: var(--vj-muted); font-weight: 600; }

@media (max-width: 720px) {
	.vjseo .vj-phub-item { grid-template-columns: 1fr; }
	.vj-phub-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--vj-border); padding-top: 1.25rem; }
}
@media (max-width: 480px) {
	.vj-phub-main { flex-direction: column; }
}

/* ============================================================
   Plugin single (/plugins/<slug>/)
   ============================================================ */
.vjseo-psingle-hero {
	background:
		radial-gradient(120% 90% at 90% -10%, rgba(51, 145, 255, 0.10), transparent 60%),
		var(--vj-bg);
}
.vj-ps-crumb { font-size: 0.82rem; color: var(--vj-muted); margin-bottom: 1.5rem; display: flex; gap: 0.5rem; align-items: center; }
.vj-ps-crumb a { color: var(--vj-primary); text-decoration: none; font-weight: 600; }
.vj-ps-crumb a:hover { text-decoration: underline; }
.vj-ps-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
/* Corporate hero: a clear vertical rhythm with well-separated groups.
   DOM order is (lockup, tagline, kicker, lead, trust, buybar); flex `order`
   places the hook after the paragraph and groups the action zone last. */
.vj-ps-hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.vj-ps-lockup { order: 1; display: flex; align-items: center; gap: 1rem; margin: 0 0 1.75rem; }
.vj-ps-logo { flex: none; width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--vj-primary), var(--vj-on)); box-shadow: 0 12px 26px -12px rgba(0, 119, 255, 0.55); }
.vj-ps-logo svg { width: 29px; height: 29px; }
.vj-ps-lockup-txt { display: flex; flex-direction: column; gap: 0.35rem; }
.vjseo .vj-ps-hero-copy h1 { font-size: clamp(2rem, 4vw, 2.9rem); margin: 0; line-height: 1.02; }
.vj-ps-cat { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--vj-muted); }
.vjseo .vj-ps-hero-copy .vj-ps-tagline { order: 2; font-size: clamp(1.3rem, 2.3vw, 1.75rem); font-weight: 700; color: var(--vj-ink); margin: 0 0 1.35rem; line-height: 1.3; letter-spacing: -0.01em; max-width: 34ch; }
.vjseo .vj-ps-hero-copy .vj-lead { order: 3; font-size: 1.02rem; color: var(--vj-muted); line-height: 1.75; max-width: 52ch; margin: 0; }
.vj-ps-hero-copy .vj-ps-kicker { order: 4; }
.vj-ps-hero-copy .vj-ps-trust { order: 5; }
.vj-ps-hero-copy .vj-ps-buybar { order: 6; }
.vj-ps-trust { list-style: none; width: 100%; margin: 2.25rem 0 0; padding-top: 2rem; border-top: 1px solid var(--vj-border); display: flex; flex-wrap: wrap; gap: 0.7rem 1.75rem; }
.vj-ps-trust li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; font-weight: 600; color: var(--vj-text); }
.vj-ps-trust svg { width: 16px; height: 16px; color: var(--vj-on); flex: none; }
.vj-ps-buybar { display: flex; align-items: center; gap: 1.25rem 1.5rem; flex-wrap: wrap; margin: 1.75rem 0 0; }
.vj-ps-buybar .vj-ps-price { justify-content: flex-start; }
.vj-ps-launch {
	font-family: "JetBrains Mono", monospace; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase;
	background: rgba(255, 106, 0, 0.12); color: var(--vj-cta); border: 1px solid rgba(255, 106, 0, 0.3);
	padding: 0.25rem 0.6rem; border-radius: 999px;
}

/* Order-numbering mock (Sequential Orders hero visual) */
.vj-ordermock { background: var(--vj-surface); border: 1px solid var(--vj-border); border-radius: var(--vj-radius); overflow: hidden; box-shadow: var(--vj-shadow); }
.vj-ordermock-list { list-style: none; margin: 0; padding: 0.5rem; }
.vj-ordermock-list li { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 1rem; border-radius: var(--vj-radius-sm); font-family: "JetBrains Mono", monospace; }
.vj-ordermock-list li span { font-weight: 700; color: var(--vj-ink); }
.vj-ordermock-list li em { font-style: normal; font-size: 0.75rem; color: var(--vj-muted); }
.vj-ordermock-list li.is-new { background: rgba(0, 119, 255, 0.08); }
.vj-ordermock-list li.is-new span { color: var(--vj-primary); }

.vjseo-psingle-benefits { background: var(--vj-surface-2); }

/* Highlights — short reassurance chips */
.vjseo-psingle-highlights { background: var(--vj-surface-2); }
.vj-ps-hl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
@media (max-width: 640px) { .vj-ps-hl-grid { grid-template-columns: 1fr; } }
.vjseo .vj-ps-hl-grid li { display: flex; align-items: center; gap: 0.75rem; background: var(--vj-surface); border: 1px solid var(--vj-border); border-radius: var(--vj-radius-sm); padding: 0.95rem 1.2rem; font-size: 0.95rem; font-weight: 600; color: var(--vj-ink); line-height: 1.35; transition: border-color 0.3s var(--vj-ease), box-shadow 0.3s var(--vj-ease); }
.vjseo .vj-ps-hl-grid li:hover { border-color: rgba(0, 119, 255, 0.35); box-shadow: var(--vj-shadow); }
.vj-ps-hl-grid svg { width: 20px; height: 20px; color: var(--vj-on); flex: none; }

.vj-ps-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.vjseo .vj-ps-feature { background: var(--vj-surface); border: 1px solid var(--vj-border); border-radius: var(--vj-radius); padding: 1.6rem; transition: border-color 0.3s var(--vj-ease), box-shadow 0.3s var(--vj-ease), transform 0.3s var(--vj-ease); }
.vjseo .vj-ps-feature:hover { border-color: rgba(0, 119, 255, 0.35); box-shadow: var(--vj-shadow); transform: translateY(-2px); }
.vj-ps-feature-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; margin-bottom: 1rem; color: #fff; background: linear-gradient(135deg, var(--vj-primary), var(--vj-on)); }
.vj-ps-feature-ico svg { width: 24px; height: 24px; }
.vjseo .vj-ps-feature h3 { font-size: 1.1rem; margin: 0 0 0.4rem; color: var(--vj-ink); }
.vjseo .vj-ps-feature p { margin: 0; font-size: 0.9rem; max-width: none; }

.vj-ps-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.25rem; }
.vj-ps-benefit { text-align: center; padding: 1.25rem; }
.vj-ps-benefit strong { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--vj-primary); }
.vj-ps-benefit span { display: block; margin-top: 0.4rem; font-size: 0.9rem; color: var(--vj-muted); }

.vj-ps-close { display: grid; grid-template-columns: 1fr 320px; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.vjseo .vj-ps-specs h2 { margin-bottom: 1rem; }
.vj-ps-specs ul { list-style: none; margin: 0; padding: 0; }
.vj-ps-specs li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--vj-border); }
.vj-ps-spec-k { color: var(--vj-muted); }
.vj-ps-spec-v { font-weight: 700; color: var(--vj-ink); }
.vj-ps-buycard { background: var(--vj-surface); border: 1px solid var(--vj-border); border-radius: var(--vj-radius); padding: 1.75rem; text-align: center; box-shadow: var(--vj-shadow); position: sticky; top: 96px; }
.vj-ps-buycard-name { font-weight: 800; color: var(--vj-ink); display: block; margin-bottom: 0.75rem; }
.vj-ps-buycard .vj-ps-price { margin-bottom: 1.25rem; justify-content: center; }
.vj-ps-buycard-cta { width: 100%; justify-content: center; }
.vj-ps-buycard-back { display: inline-block; margin-top: 0.9rem; font-size: 0.85rem; color: var(--vj-primary); text-decoration: none; font-weight: 600; }
.vj-ps-buycard-back:hover { text-decoration: underline; }

@media (max-width: 860px) {
	.vj-ps-hero-grid { grid-template-columns: 1fr; }
	.vj-ps-hero-visual { order: -1; }
	.vj-ps-close { grid-template-columns: 1fr; }
	.vj-ps-buycard { position: static; }
}

/* ---- Plugin single: funnel sections ---- */
.vjseo .vj-ps-kicker { margin: 2rem 0 0; padding: 1.1rem 1.35rem; background: rgba(0, 119, 255, 0.06); border: 1px solid rgba(0, 119, 255, 0.16); border-left: 3px solid var(--vj-primary); border-radius: 12px; font-size: clamp(1.05rem, 1.7vw, 1.25rem); font-weight: 700; color: var(--vj-ink); line-height: 1.4; max-width: none; }

/* Problem — pain agitation */
.vjseo-psingle-problem { background: var(--vj-surface-2); }
.vj-ps-pains { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.vjseo .vj-ps-pain { background: var(--vj-surface); border: 1px solid var(--vj-border); border-left: 3px solid var(--vj-cta); border-radius: var(--vj-radius); padding: 1.6rem; }
.vj-ps-pain-x { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; margin-bottom: 0.9rem; color: var(--vj-cta); background: rgba(255, 106, 0, 0.12); }
.vj-ps-pain-x svg { width: 22px; height: 22px; }
.vjseo .vj-ps-pain h3 { font-size: 1.15rem; margin: 0 0 0.4rem; color: var(--vj-ink); }
.vjseo .vj-ps-pain p { margin: 0; font-size: 0.92rem; max-width: none; }
.vj-ps-pain-close { text-align: center; max-width: 62ch; margin: 2rem auto 0; font-weight: 600; color: var(--vj-text); }

/* Solution strip */
.vjseo-psingle-solution { text-align: center; padding-block: clamp(3.5rem, 7vw, 6rem); }
.vjseo-psingle-solution .vj-wrap { max-width: 720px; }
.vjseo-psingle-solution .vj-wrap::before { content: ""; display: block; width: 48px; height: 4px; border-radius: 2px; background: var(--vj-primary); margin: 0 auto 1.75rem; }
.vjseo .vjseo-psingle-solution h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.15; margin: 0 auto 1.5rem; max-width: 18ch; }
.vjseo .vjseo-psingle-solution p { margin: 0 auto; max-width: 56ch; font-size: var(--vj-lead); color: var(--vj-muted); line-height: 1.85; }

/* SEO star — dark highlighted band (the exclusive differentiator) */
.vjseo-psingle-seostar { background: linear-gradient(135deg, #0B1F33, #0e2a49); color: #eaf1fb; }
.vj-ps-seostar-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.vjseo .vjseo-psingle-seostar h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.vj-eyebrow-invert { color: #7db6ff; background: rgba(125, 182, 255, 0.12); border-color: rgba(125, 182, 255, 0.25); }
.vj-ps-seostar-desc { color: #c4d4ea; max-width: 52ch; }
.vj-ps-seostat { display: flex; align-items: baseline; gap: 0.9rem; margin-top: 1.75rem; }
.vj-ps-seostat strong { font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 800; letter-spacing: -0.03em; color: #fff; line-height: 1; }
.vj-ps-seostat span { color: #9fb6d6; font-size: 0.92rem; max-width: 20ch; }
.vj-ps-seostar-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.vj-ps-seostar-points li { display: flex; gap: 0.75rem; align-items: flex-start; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--vj-radius-sm); padding: 0.9rem 1.1rem; }
.vj-ps-seostar-points svg { width: 18px; height: 18px; color: #46d19e; flex: none; margin-top: 2px; }
.vj-ps-seostar-points span { font-size: 0.92rem; color: #dbe6f5; }

/* Compare vs alternatives */
.vj-ps-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.vjseo .vj-ps-vs { background: var(--vj-surface); border: 1px solid var(--vj-border); border-radius: var(--vj-radius); padding: 1.6rem; }
.vjseo .vj-ps-vs h3 { font-size: 1.05rem; margin: 0 0 0.5rem; color: var(--vj-primary); }
.vjseo .vj-ps-vs p { margin: 0; font-size: 0.92rem; max-width: none; }

/* Tiers (Básico / Premium) */
.vjseo-psingle-tiers { background: var(--vj-surface-2); }
.vj-ps-tiergrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; max-width: 860px; margin-inline: auto; }
.vjseo .vj-ps-tier { position: relative; background: var(--vj-surface); border: 1px solid var(--vj-border); border-radius: var(--vj-radius); padding: 2rem; }
.vjseo .vj-ps-tier.is-featured { border-color: var(--vj-primary); box-shadow: var(--vj-shadow-lg); }
.vjseo .vj-ps-tier h3 { font-size: 1.4rem; margin: 0 0 0.35rem; color: var(--vj-ink); }
.vj-ps-tier-promise { font-weight: 700; color: var(--vj-primary); margin: 0 0 0.15rem; }
.vj-ps-tier-for { display: block; font-size: 0.85rem; color: var(--vj-muted); margin-bottom: 1.1rem; }
.vj-ps-tier-feats { list-style: none; margin: 0; padding: 1.1rem 0 0; border-top: 1px solid var(--vj-border); display: grid; gap: 0.7rem; }
.vj-ps-tier-feats li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; color: var(--vj-text); }
.vj-ps-tier-feats svg { width: 16px; height: 16px; color: var(--vj-on); flex: none; margin-top: 3px; }

/* FAQ / objections */
.vj-ps-faq-wrap { max-width: 780px; }
.vj-ps-faq { display: grid; gap: 0.75rem; }
.vjseo .vj-ps-q { background: var(--vj-surface); border: 1px solid var(--vj-border); border-radius: var(--vj-radius-sm); padding: 0.4rem 1.25rem; }
.vj-ps-q summary { cursor: pointer; font-weight: 700; color: var(--vj-ink); padding: 0.85rem 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.vj-ps-q summary::-webkit-details-marker { display: none; }
.vj-ps-q summary::after { content: "+"; font-size: 1.3rem; color: var(--vj-primary); font-weight: 400; line-height: 1; }
.vj-ps-q[open] summary::after { content: "\2212"; }
.vjseo .vj-ps-q p { margin: 0 0 1rem; font-size: 0.92rem; max-width: none; }

@media (max-width: 860px) {
	.vj-ps-seostar-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Services detail (anchored, editorial feature blocks)
   ============================================================ */
.vj-svcd-head { text-align: center; max-width: 720px; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.vjseo .vj-svcd-head p { max-width: none; margin-inline: auto; }

.vj-svcd-list { display: grid; gap: 1.25rem; }
.vj-svcd {
	position: relative; overflow: hidden;
	background: var(--vj-surface);
	border: 1px solid var(--vj-border);
	border-radius: var(--vj-radius);
	padding: clamp(1.6rem, 3.4vw, 2.6rem);
	scroll-margin-top: 110px; /* clear the fixed header when anchor-linked */
	transition: border-color 0.3s var(--vj-ease), box-shadow 0.3s var(--vj-ease), transform 0.3s var(--vj-ease);
}
.vj-svcd:hover { border-color: rgba(0, 119, 255, 0.35); box-shadow: var(--vj-shadow); transform: translateY(-2px); }
.vj-svcd-num {
	position: absolute; top: -1rem; right: 0.5rem; pointer-events: none;
	font-family: "JetBrains Mono", monospace; font-weight: 800; line-height: 1;
	font-size: clamp(4rem, 9vw, 7rem);
	color: var(--vj-primary); opacity: 0.07;
}
.vj-svcd-head-row { display: flex; gap: 1.25rem; align-items: flex-start; }
.vj-svcd-ico {
	flex: none; width: 60px; height: 60px; border-radius: 16px;
	display: grid; place-items: center; color: #fff;
	background: linear-gradient(135deg, var(--vj-primary), var(--vj-on));
	box-shadow: 0 10px 22px -10px rgba(0, 119, 255, 0.55);
}
.vj-svcd-ico svg { width: 30px; height: 30px; }
.vjseo .vj-svcd-intro h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0 0 0.4rem; color: var(--vj-ink); }
.vjseo .vj-svcd-intro p { margin: 0; max-width: 70ch; }

.vj-svcd-products {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem; margin-top: 1.6rem; padding-top: 1.6rem;
	border-top: 1px dashed var(--vj-border);
}
.vjseo .vj-svcd-prod {
	background: var(--vj-bg); border: 1px solid var(--vj-border);
	border-radius: var(--vj-radius-sm); padding: 1.15rem 1.25rem;
	transition: border-color 0.3s var(--vj-ease), box-shadow 0.3s var(--vj-ease), transform 0.3s var(--vj-ease);
}
.vjseo .vj-svcd-prod:hover { border-color: rgba(0, 119, 255, 0.4); box-shadow: var(--vj-shadow); transform: translateY(-2px); }
.vjseo .vj-svcd-prod h4 { font-size: 1.05rem; font-weight: 800; margin: 0; color: var(--vj-ink); }
.vjseo .vj-svcd-prod p { font-size: 0.88rem; margin: 0; max-width: none; }

/* Kept — reused by the plugins hub (/plugins). */
.vj-svc-ico {
	width: 56px; height: 56px; border-radius: 16px;
	display: grid; place-items: center;
	background: linear-gradient(135deg, rgba(0, 119, 255, 0.12), rgba(34, 197, 94, 0.12));
	color: var(--vj-primary);
}
.vj-svc-ico svg { width: 28px; height: 28px; }
.vj-svc-item-tag {
	display: block; margin: 0.2rem 0 0.6rem;
	font-family: "JetBrains Mono", monospace; font-size: 0.68rem;
	letter-spacing: 0.06em; text-transform: uppercase; color: var(--vj-primary);
}

@media (max-width: 560px) {
	.vj-svcd-head-row { flex-direction: column; }
}

/* ============================================================
   Pricing (Pago Único / Mensual)
   ============================================================ */
.vjseo-pricing .vj-head { text-align: center; max-width: 720px; margin: 0 auto 1.75rem; }
/* `.vjseo p` (0,1,1) sets max-width:62ch + margin:0 0 1rem and would beat a
   single-class rule — these need the extra class to actually center. */
.vjseo-pricing .vj-head p { max-width: none; margin-inline: auto; }
.vj-pricing-toggle {
	display: flex; width: fit-content; margin: 0 auto 1rem; gap: 4px;
	background: var(--vj-surface-2); border: 1px solid var(--vj-border);
	border-radius: 999px; padding: 5px;
}
.vj-pricing-toggle button {
	border: 0; background: transparent; cursor: pointer;
	padding: 0.6rem 1.5rem; border-radius: 999px;
	font-weight: 700; font-size: 0.92rem; color: var(--vj-muted);
	transition: color 0.2s var(--vj-ease), background 0.2s var(--vj-ease), box-shadow 0.2s var(--vj-ease);
}
.vj-pricing-toggle button.is-active { background: var(--vj-surface); color: var(--vj-ink); box-shadow: var(--vj-shadow); }
/* Needs `.vjseo` too: the base `.vjseo h3` rule (0,1,1) beats a lone
   `.vj-pricing-sub` (0,1,0) and would reset this margin. */
.vjseo .vj-pricing-sub { text-align: center; font-size: 1.5rem; margin: 3.5rem 0 1.25rem; color: var(--vj-ink); }
/* NOTE: needs `.vjseo` in the selector — the base `.vjseo p` rule (0,1,1) beats
   a lone `.vj-pricing-intro` (0,1,0) and was overriding `margin: 0 auto`
   (leaving it left-aligned, off-centre vs the cards) and `max-width`. */
.vjseo .vj-pricing-intro {
	text-align: center;
	max-width: 620px;
	margin: 2rem auto 3.125rem; /* half the previous gap to the cards */
	color: var(--vj-muted);
}
/* Same reason: centre the section subtitle under the heading. */
.vjseo-pricing .vj-head p { margin-inline: auto; }

/* minmax(0,1fr) keeps all three columns exactly equal — plain 1fr lets a
   column grow past its share to fit long feature text. */
.vj-pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
@media (max-width: 920px) { .vj-pricing-grid { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; } }

.vj-plan {
	position: relative; background: var(--vj-surface);
	border: 1px solid var(--vj-border); border-radius: var(--vj-radius);
	padding: 1.75rem; display: flex; flex-direction: column;
	transition: border-color 0.3s var(--vj-ease), box-shadow 0.3s var(--vj-ease);
}
.vj-plan.is-featured { border-color: var(--vj-primary); box-shadow: 0 26px 60px -28px rgba(0, 119, 255, 0.55); }
.vj-plan-badge {
	position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%);
	display: inline-flex; align-items: center; gap: 0.4rem;
	background: var(--vj-primary); color: #fff;
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
	padding: 0.35rem 0.85rem; border-radius: 999px;
	box-shadow: 0 8px 20px -8px rgba(0, 119, 255, 0.65); white-space: nowrap;
}
.vj-plan-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: vj-ss-pulse 2s var(--vj-ease) infinite; }
.vj-plan-name { font-size: 1.3rem; margin: 0 0 0.5rem; color: var(--vj-ink); }
.vj-plan-price { display: flex; align-items: baseline; gap: 0.4rem; }
.vj-plan-price strong { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; color: var(--vj-ink); }
.vj-plan-price span { font-size: 0.85rem; color: var(--vj-muted); }
.vj-plan-desc { font-size: 0.9rem; color: var(--vj-muted); margin: 0.85rem 0 1.25rem; }
.vj-plan-cta { width: 100%; justify-content: center; }
.vj-plan-features {
	list-style: none; margin: 1.5rem 0 0; padding: 1.5rem 0 0;
	border-top: 1px solid var(--vj-border); display: grid; gap: 0.7rem;
}
.vj-plan-features li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.88rem; color: var(--vj-text); }
.vj-plan-features svg { width: 16px; height: 16px; color: var(--vj-on); flex: none; margin-top: 2px; }
/* min-width:0 lets the text shrink instead of pushing the card wider. */
.vj-plan-features li > span { min-width: 0; overflow-wrap: anywhere; }
/* Fitment levels as compact chips — keeps long lists inside the card. */
.vj-plan-sublist {
	list-style: none; margin: 0.45rem 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 0.3rem;
}
.vj-plan-sublist li {
	font-size: 0.72rem; line-height: 1.6; color: var(--vj-muted);
	background: var(--vj-surface-2); border: 1px solid var(--vj-border);
	border-radius: 999px; padding: 0.05rem 0.55rem;
}
.vj-pricing-note {
	display: flex; align-items: center; justify-content: center; gap: 0.6rem;
	width: fit-content; max-width: 92%; margin: 2rem auto 0;
	padding: 0.7rem 1.3rem; border-radius: 999px;
	background: var(--vj-surface); border: 1px solid var(--vj-border);
	box-shadow: var(--vj-shadow);
	font-size: 0.92rem; font-weight: 600; color: var(--vj-text); text-align: center;
}
.vj-pricing-note svg { width: 18px; height: 18px; color: var(--vj-on); flex: none; }
.vj-pricing-note span { max-width: none; }

/* ============================================================
   Home funnel — overview cards / featured / credibility / final CTA
   ============================================================ */
/* Service overview cards as links */
.vjseo .vj-card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.vj-card-more { margin-top: auto; padding-top: 0.85rem; color: var(--vj-primary); font-weight: 700; font-size: 0.85rem; }

/* Copy highlights — a subtle highlighter marker on key phrases. */
.vj-hl {
	background: linear-gradient(transparent 58%, rgba(0, 119, 255, 0.20) 58%);
	padding: 0 0.08em; font-weight: 600; color: var(--vj-ink);
}
/* Problem section: larger, darker lead + a branded closing claim. */
.vjseo .vj-problem-head { max-width: 720px; }
.vjseo .vj-problem-intro { font-size: clamp(1.1rem, 1.7vw, 1.25rem); color: var(--vj-text); max-width: 60ch; margin-bottom: 0.75rem; }
.vjseo .vj-problem-claim {
	font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 800; letter-spacing: -0.02em; margin: 0;
	background: linear-gradient(120deg, var(--vj-primary), var(--vj-on));
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
	width: fit-content;
}

/* Featured plugin band */
.vj-featured-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.vj-featured-copy .vj-lead { font-size: var(--vj-lead); max-width: 48ch; }
.vj-featured-cta { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.75rem; flex-wrap: wrap; }
.vj-featured-price { color: var(--vj-muted); font-size: 0.9rem; }
.vj-featured-price strong { color: var(--vj-primary); font-size: 1.4rem; font-weight: 800; margin: 0 0.15rem; }
.vj-fitment { background: var(--vj-surface); border: 1px solid var(--vj-border); border-radius: var(--vj-radius); box-shadow: var(--vj-shadow-lg); overflow: hidden; max-width: 420px; width: 100%; margin-inline: auto; }
.vj-fitment-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--vj-border); background: var(--vj-surface-2); }
.vj-fitment-dots { display: flex; gap: 5px; }
.vj-fitment-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--vj-border); }
.vj-fitment-title { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vj-muted); }
.vj-fitment-body { padding: 1.1rem; display: grid; gap: 0.6rem; }
.vj-fitment-select { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0.95rem; border: 1px solid var(--vj-border); border-radius: var(--vj-radius-sm); background: var(--vj-bg); color: var(--vj-text); font-size: 0.92rem; }
.vj-fitment-select svg { width: 16px; height: 16px; color: var(--vj-muted); }
.vj-fitment-btn { margin-top: 0.3rem; text-align: center; padding: 0.8rem; border-radius: var(--vj-radius-sm); background: var(--vj-primary); color: #fff; font-weight: 700; font-size: 0.92rem; }
@media (max-width: 880px) { .vj-featured-grid { grid-template-columns: 1fr; } .vj-fitment { order: -1; } }

/* Credibility band */
.vj-cred-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.vjseo .vj-cred-item { display: flex; gap: 0.9rem; align-items: flex-start; background: var(--vj-surface); border: 1px solid var(--vj-border); border-radius: var(--vj-radius); padding: 1.25rem; text-decoration: none; transition: border-color 0.3s var(--vj-ease), box-shadow 0.3s var(--vj-ease); }
.vjseo a.vj-cred-item:hover { border-color: rgba(0, 119, 255, 0.4); box-shadow: var(--vj-shadow); }
.vj-cred-ico { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, rgba(0, 119, 255, 0.12), rgba(34, 197, 94, 0.12)); color: var(--vj-primary); }
.vj-cred-ico svg { width: 22px; height: 22px; }
.vj-cred-txt { display: flex; flex-direction: column; gap: 0.25rem; }
.vj-cred-txt strong { color: var(--vj-ink); font-size: 0.98rem; }
.vj-cred-txt span { color: var(--vj-muted); font-size: 0.85rem; }

/* Final CTA band */
.vj-finalcta-box { background: linear-gradient(135deg, var(--vj-ink), #12324c); color: #fff; border-radius: var(--vj-radius); padding: clamp(2.5rem, 6vw, 4rem); text-align: center; }
.vjseo .vj-finalcta-box h2 { color: #fff; font-size: clamp(1.6rem, 3.5vw, 2.4rem); max-width: 20ch; margin-inline: auto; }
.vj-finalcta-box p { color: rgba(255, 255, 255, 0.8); max-width: 54ch; margin: 1rem auto 1.75rem; }
.vjseo .vj-finalcta-box .vj-btn-primary { background: #fff; color: var(--vj-ink); box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.5); }
.vjseo .vj-finalcta-box .vj-btn-primary:hover { background: rgba(255, 255, 255, 0.9); }

/* ============================================================
   Scroll reveal
   ============================================================ */
.vjseo [data-reveal] {
	opacity: 0; transform: translateY(28px);
	transition: opacity 0.7s var(--vj-ease), transform 0.7s var(--vj-ease);
}
.vjseo [data-reveal].is-in { opacity: 1; transform: none; }
.vjseo [data-reveal][data-reveal="2"] { transition-delay: 0.08s; }
.vjseo [data-reveal][data-reveal="3"] { transition-delay: 0.16s; }
.vjseo [data-reveal][data-reveal="4"] { transition-delay: 0.24s; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 880px) {
	.vjseo-hero .vj-grid,
	.vjseo-contact .vj-grid { grid-template-columns: 1fr; }
	.vjseo-hero .vj-ignition { order: -1; margin-bottom: 1rem; }
	.vjseo-hero .vj-grid { min-height: auto; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.vjseo *,
	.vjseo *::before,
	.vjseo *::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
	.vjseo [data-reveal] { opacity: 1; transform: none; }
	.vj-startstop[aria-checked="true"] .vj-ss-ring { animation: none; }
}