@charset "UTF-8";
/* ==========================================================================
   ViewPulse — Sistema de diseño en CSS puro (ADR-012)
   Sin Tailwind, sin Framer Motion. Todos los tokens con prefijo --vp-.
   Referencia normativa: docs/DESIGN-SYSTEM.md
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   1. FUENTES AUTO-HOSPEDADAS (GDPR/LGPD + camino crítico)
   Nada de Google Fonts remoto: @import bloquea el render y transmite la IP
   del visitante a un tercero. Los binarios viven en ../fonts/.
   Si algún WOFF2 falta, el navegador cae a la pila de sistema declarada en
   --vp-font-* y la página sigue siendo legible (font-display: swap).
   Qué archivos colocar y de dónde obtenerlos: ver readme.txt.
   ────────────────────────────────────────────────────────────────────────── */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-latin-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-latin-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/inter-latin-800.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Orbitron';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/orbitron-latin-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Orbitron';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('../fonts/orbitron-latin-900.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ──────────────────────────────────────────────────────────────────────────
   2. TOKENS — TEMA OSCURO (predeterminado)

   :root y .dark declaran EXACTAMENTE lo mismo. No es duplicación por
   descuido (ADR-021): garantiza que la app se vea oscura antes de que
   cualquier JS decida el tema, eliminando el flash de tema claro. El modo
   claro solo se activa con la clase .light explícita — prefers-color-scheme
   se ignora deliberadamente.
   ────────────────────────────────────────────────────────────────────────── */

:root {
	color-scheme: dark;

	/* Color — formato HSL sin envolver, consumido como hsl(var(--token)). */
	--vp-color-background: 150 10% 4%;
	--vp-color-foreground: 150 10% 95%;
	--vp-color-card: 150 12% 6%;
	--vp-color-card-foreground: 150 10% 95%;
	--vp-color-popover: 150 12% 6%;
	--vp-color-popover-foreground: 150 10% 95%;
	--vp-color-primary: 142 76% 50%;
	--vp-color-primary-foreground: 150 10% 4%;
	--vp-color-secondary: 150 6% 10%;
	--vp-color-secondary-foreground: 150 10% 90%;
	--vp-color-muted: 150 6% 10%;
	--vp-color-muted-foreground: 150 5% 50%;
	--vp-color-accent: 142 76% 50%;
	--vp-color-accent-foreground: 150 10% 4%;
	--vp-color-destructive: 0 72% 50%;
	--vp-color-destructive-foreground: 0 0% 98%;
	--vp-color-border: 150 6% 18%;
	--vp-color-input: 150 6% 15%;
	--vp-color-ring: 142 76% 50%;

	/* Semánticos de estado. El original no los declaraba y usaba colores
	   sueltos en el marcado; aquí son tokens para no depender solo del color
	   y no dispersar literales. */
	--vp-color-success: 142 76% 50%;
	--vp-color-warning: 45 90% 55%;
	--vp-color-info: 200 70% 50%;
	--vp-color-error: 0 72% 50%;

	/* Gráficos */
	--vp-chart-1: 142 76% 50%;
	--vp-chart-2: 160 60% 45%;
	--vp-chart-3: 200 70% 50%;
	--vp-chart-4: 280 65% 60%;
	--vp-chart-5: 45 90% 55%;

	/* Tipografía */
	--vp-font-heading: 'Orbitron', ui-sans-serif, system-ui, sans-serif;
	--vp-font-display: 'Orbitron', ui-sans-serif, system-ui, sans-serif;
	--vp-font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
	--vp-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

	/* Espaciado y medidas de layout */
	--vp-container-max: 80rem;
	--vp-container-pad: 1rem;
	--vp-section-y: 5rem;
	--vp-header-h: 3.5rem;
	--vp-tabbar-h: 3.5rem;
	--vp-grid-gap: 1.25rem;

	/* Radios */
	--vp-radius: 0.75rem;
	--vp-radius-sm: calc(var(--vp-radius) - 4px);
	--vp-radius-md: calc(var(--vp-radius) - 2px);
	--vp-radius-lg: var(--vp-radius);
	--vp-radius-xl: 1rem;
	--vp-radius-2xl: 1.5rem;
	--vp-radius-full: 9999px;

	/* Sombras (los valores arbitrarios del original, tokenizados) */
	--vp-shadow-sm: 0 10px 40px -20px rgb(0 0 0 / 0.8);
	--vp-shadow-md: inset 0 1px 0 0 hsl(0 0% 100% / 0.05), 0 12px 30px -14px rgb(0 0 0 / 0.75);
	--vp-shadow-lg: inset 0 1px 0 0 hsl(0 0% 100% / 0.06), 0 18px 38px -14px rgb(0 0 0 / 0.8);
	--vp-shadow-glow: 0 30px 80px -30px hsl(142 76% 50% / 0.35);
	--vp-shadow-glow-strong: 0 30px 90px -40px hsl(142 76% 50% / 0.5);

	/* Z-index (escala; el original usaba valores sueltos) */
	--vp-z-below: -10;
	--vp-z-base: 0;
	--vp-z-sticky: 40;
	--vp-z-header: 50;
	--vp-z-dropdown: 60;
	--vp-z-modal: 70;
	--vp-z-toast: 80;

	/* Animación */
	--vp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--vp-duration-fast: 0.2s;
	--vp-duration-base: 0.32s;
	--vp-duration-slow: 0.6s;

	/* Relieve 3D — variables del patrón de botón físico. Se sobrescriben por
	   variante para no repetir la fórmula de box-shadow en cada regla. */
	--vp-relief-thickness: 4px;
	--vp-relief-top: hsl(142 90% 74% / 0.6);
	--vp-relief-depth: hsl(142 82% 26%);
	--vp-relief-diffuse: hsl(142 76% 40% / 0.55);

	/* Marca externa (iconos 3D) */
	--vp-icon-accent: #53fc18;
	--vp-icon-soft: rgb(83 252 24 / 0.18);
	--vp-icon-glow: rgb(83 252 24 / 0.45);
	--vp-icon-depth: #188323;
	--vp-color-discord: #5865F2;
}

.dark {
	color-scheme: dark;
	--vp-color-background: 150 10% 4%;
	--vp-color-foreground: 150 10% 95%;
	--vp-color-card: 150 12% 6%;
	--vp-color-card-foreground: 150 10% 95%;
	--vp-color-popover: 150 12% 6%;
	--vp-color-popover-foreground: 150 10% 95%;
	--vp-color-primary: 142 76% 50%;
	--vp-color-primary-foreground: 150 10% 4%;
	--vp-color-secondary: 150 6% 10%;
	--vp-color-secondary-foreground: 150 10% 90%;
	--vp-color-muted: 150 6% 10%;
	--vp-color-muted-foreground: 150 5% 50%;
	--vp-color-accent: 142 76% 50%;
	--vp-color-accent-foreground: 150 10% 4%;
	--vp-color-destructive: 0 72% 50%;
	--vp-color-destructive-foreground: 0 0% 98%;
	--vp-color-border: 150 6% 18%;
	--vp-color-input: 150 6% 15%;
	--vp-color-ring: 142 76% 50%;
	--vp-color-success: 142 76% 50%;
	--vp-color-warning: 45 90% 55%;
	--vp-color-info: 200 70% 50%;
	--vp-color-error: 0 72% 50%;
}

/* ── TEMA CLARO — solo con la clase .light explícita ─────────────────────────
   El primario claro (142 72% 38%) es más OSCURO que el oscuro (142 76% 50%)
   a propósito: es la única forma de mantener contraste AA sobre blanco.
   No unificar los dos valores. */
.light {
	color-scheme: light;
	--vp-color-background: 150 20% 98%;
	--vp-color-foreground: 150 12% 12%;
	--vp-color-card: 0 0% 100%;
	--vp-color-card-foreground: 150 12% 12%;
	--vp-color-popover: 0 0% 100%;
	--vp-color-popover-foreground: 150 12% 12%;
	--vp-color-primary: 142 72% 38%;
	--vp-color-primary-foreground: 0 0% 100%;
	--vp-color-secondary: 150 12% 93%;
	--vp-color-secondary-foreground: 150 12% 20%;
	--vp-color-muted: 150 12% 93%;
	--vp-color-muted-foreground: 150 6% 38%;
	--vp-color-accent: 142 72% 38%;
	--vp-color-accent-foreground: 0 0% 100%;
	--vp-color-destructive: 0 72% 48%;
	--vp-color-destructive-foreground: 0 0% 100%;
	--vp-color-border: 150 10% 86%;
	--vp-color-input: 150 10% 86%;
	--vp-color-ring: 142 72% 38%;
	--vp-color-success: 142 72% 38%;
	--vp-color-warning: 38 92% 42%;
	--vp-color-info: 200 75% 38%;
	--vp-color-error: 0 72% 48%;

	--vp-relief-top: hsl(142 80% 60% / 0.55);
	--vp-relief-depth: hsl(142 78% 22%);
	--vp-relief-diffuse: hsl(142 72% 30% / 0.45);
}

@media (min-width: 640px) {
	:root {
		--vp-container-pad: 1.5rem;
		--vp-section-y: 7rem;
	}
}

/* ──────────────────────────────────────────────────────────────────────────
   3. RESET Y COMPORTAMIENTOS GLOBALES HEREDADOS
   ────────────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* WALLPAPER — trampa documentada: la cascada entera depende de que html, body
   y el contenedor raíz sean transparentes. En WordPress el contenedor raíz es
   .vp-app (no #root). Sin estas tres reglas el fondo desaparece o se pinta dos
   veces (una por body::before y otra por el fondo opaco del contenedor). */
html,
body,
.vp-app {
	background: transparent !important;
	background-color: transparent !important;
}

html {
	min-height: 100%;
	overscroll-behavior: none; /* sin rubber-band: comportamiento de app, no de web */
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	scrollbar-width: thin;
	scrollbar-color: hsl(var(--vp-color-primary) / 0.32) transparent;
}

body {
	margin: 0;
	min-height: 100vh;
	overscroll-behavior: none;
	position: relative;
	font-family: var(--vp-font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: hsl(var(--vp-color-foreground));
	-webkit-tap-highlight-color: transparent;
}

/* Capa de fondo fija detrás de TODA la interfaz. El doble degradado plano
   oscurece ~62%: el verde del wallpaper lavaba el texto y dejaba el dashboard
   ilegible. La imagen es auto-hospedada (el dominio original desaparece). */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: var(--vp-z-below);
	background-image:
		linear-gradient(rgb(9 13 11 / 0.62), rgb(9 13 11 / 0.62)),
		url('../images/wallpaper.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
}

.light body::before {
	background-image:
		linear-gradient(rgb(249 252 250 / 0.86), rgb(249 252 250 / 0.86)),
		url('../images/wallpaper.webp');
}

/* Anti-selección de la interfaz. Marcado en el original como "protección
   anti-screenshot": NO protege nada (cualquiera captura la pantalla o lee el
   DOM), su único efecto real es impedir copiar texto legítimo. Se migra por
   paridad visual, pero PHP lo emite tras el filtro `vp_disable_text_selection`
   para poder desactivarlo sin editar CSS. */
.vp-no-select body {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

.vp-no-select input,
.vp-no-select textarea,
.vp-no-select select,
.vp-no-select [contenteditable='true'],
.vp-no-select .selectable {
	-webkit-touch-callout: default;
	-webkit-user-select: text;
	user-select: text;
}

::selection {
	background: hsl(var(--vp-color-primary) / 0.30);
	color: hsl(var(--vp-color-foreground));
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
	background: hsl(var(--vp-color-primary) / 0.26);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
	transition: background var(--vp-duration-fast) ease;
}
*::-webkit-scrollbar-thumb:hover {
	background: hsl(var(--vp-color-primary) / 0.5);
	background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }

/* Anillo de foco consistente. Doble sombra: la primera recorta contra el fondo
   para que el anillo se vea también sobre superficies del mismo color. */
:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px hsl(var(--vp-color-background)),
		0 0 0 4px hsl(var(--vp-color-ring));
	border-radius: var(--vp-radius-sm);
}

/* Quita el retardo de 300ms del doble toque. */
button,
a,
[role='button'],
input,
select,
textarea {
	touch-action: manipulation;
}

/* WCAG 2.2 AA — objetivo táctil mínimo. Se limita a pantallas pequeñas con
   puntero grueso: ahí la rejilla es siempre de 1 columna, así que no rompe los
   grids densos del escritorio. */
@media (pointer: coarse) and (max-width: 639px) {
	button,
	[role='button'],
	a.vp-btn,
	.vp-tab {
		min-height: 44px;
		min-width: 44px;
	}
}

img,
video,
iframe {
	max-width: 100%;
}

img {
	height: auto; /* con width/height explícitos en el HTML, evita layout shift */
}

hr {
	border: 0;
	border-top: 1px solid hsl(var(--vp-color-border));
	margin: 2rem 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   4. TIPOGRAFÍA
   ────────────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6,
.vp-heading {
	font-family: var(--vp-font-heading);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 0.5em;
	color: hsl(var(--vp-color-foreground));
}

p { margin: 0 0 1em; }

a {
	color: hsl(var(--vp-color-primary));
	text-decoration: none;
	transition: color var(--vp-duration-fast) var(--vp-ease-out);
}

a:hover { text-decoration: underline; }

code, pre, .vp-mono { font-family: var(--vp-font-mono); }

.vp-display {
	font-family: var(--vp-font-display);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -0.02em;
}

.vp-title-hero {
	font-family: var(--vp-font-display);
	font-weight: 900;
	font-size: clamp(2.25rem, 6vw, 4.5rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
}

.vp-title-section {
	font-family: var(--vp-font-display);
	font-weight: 900;
	font-size: clamp(1.875rem, 4vw, 3rem);
	letter-spacing: -0.02em;
}

/* Wordmark. El letter-spacing se aplica TAMBIÉN tras el último carácter, así
   que descentra el bloque; el padding-left del mismo valor lo compensa. */
.vp-wordmark {
	font-family: var(--vp-font-display);
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: 0.35em;
	padding-left: 0.35em;
	text-transform: uppercase;
}

.vp-text-muted { color: hsl(var(--vp-color-muted-foreground)); }
.vp-text-primary { color: hsl(var(--vp-color-primary)); }
.vp-text-sm { font-size: 0.875rem; }
.vp-text-xs { font-size: 0.75rem; }
.vp-text-lead { font-size: 1.125rem; color: hsl(var(--vp-color-muted-foreground)); }
.vp-micro { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.vp-tabular { font-variant-numeric: tabular-nums; }

/* ──────────────────────────────────────────────────────────────────────────
   5. LAYOUT
   ────────────────────────────────────────────────────────────────────────── */

.vp-app {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
}

.vp-container {
	width: 100%;
	max-width: var(--vp-container-max);
	margin-inline: auto;
	padding-inline: var(--vp-container-pad);
}

.vp-section { padding-block: var(--vp-section-y); }

.vp-main { flex: 1 0 auto; }

/* Compensa la barra de pestañas fija del móvil, incluyendo el área segura de
   los dispositivos con notch. En escritorio la barra no existe → 0. */
.vp-app--dashboard {
	padding-bottom: calc(var(--vp-tabbar-h) + env(safe-area-inset-bottom));
}

@media (min-width: 768px) {
	.vp-app--dashboard { padding-bottom: 0; }
}

.vp-grid { display: grid; gap: var(--vp-grid-gap); }
.vp-grid--2 { grid-template-columns: 1fr; }
.vp-grid--3 { grid-template-columns: 1fr; }
.vp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 640px) {
	.vp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.vp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.vp-stack { display: flex; flex-direction: column; gap: 1rem; }
.vp-row { display: flex; align-items: center; gap: 0.75rem; }
.vp-row--between { justify-content: space-between; }
.vp-row--center { justify-content: center; }
.vp-wrap { flex-wrap: wrap; }

.vp-hidden-desktop { display: block; }
.vp-hidden-mobile { display: none; }

@media (min-width: 768px) {
	.vp-hidden-desktop { display: none; }
	.vp-hidden-mobile { display: block; }
}

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

/* El skip link debe ser invisible pero FOCALIZABLE: .vp-sr-only a secas lo
   dejaría inalcanzable con el teclado en algunos navegadores. */
.vp-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--vp-z-toast);
	padding: 0.75rem 1.25rem;
	background: hsl(var(--vp-color-primary));
	color: hsl(var(--vp-color-primary-foreground));
	font-weight: 700;
	border-radius: 0 0 var(--vp-radius-md) 0;
}

.vp-skip-link:focus {
	left: 0;
	text-decoration: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   6. RELIEVE 3D — LA FIRMA VISUAL DE LA MARCA

   Patrón exacto, en este orden:
     1. reflejo interior arriba  (inset 0 1px 0 0 …)
     2. espesor sólido abajo     (0 Npx 0 0 …)   ← el "grosor" del botón
     3. difusa proyectada        (0 2Npx …)
   Al pulsar, el elemento baja EXACTAMENTE el espesor (translateY = espesor -
   1px de compensación del hover) para simular un botón físico que se hunde.
   Cambiar cualquiera de las tres capas rompe la ilusión.
   ────────────────────────────────────────────────────────────────────────── */

.vp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.625rem 1.25rem;
	min-height: 2.75rem;
	border: 0;
	border-radius: var(--vp-radius-md);
	font-family: var(--vp-font-body);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	position: relative;
	transition:
		transform var(--vp-duration-fast) var(--vp-ease-out),
		filter var(--vp-duration-fast) var(--vp-ease-out),
		box-shadow var(--vp-duration-fast) var(--vp-ease-out);
}

.vp-btn:hover { text-decoration: none; }

.vp-btn[disabled],
.vp-btn[aria-disabled='true'] {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

.vp-btn--primary {
	color: hsl(var(--vp-color-primary-foreground));
	background-image: linear-gradient(to bottom, hsl(142 80% 55%), hsl(142 78% 44%));
	box-shadow:
		inset 0 1px 0 0 hsl(142 90% 74% / 0.6),      /* reflejo superior */
		0 4px 0 0 hsl(142 82% 26%),                   /* espesor sólido  */
		0 8px 16px -5px hsl(142 76% 40% / 0.55);      /* difusa proyectada */
	margin-bottom: 4px; /* reserva el espacio del espesor: sin esto el botón
	                       "salta" respecto a los elementos vecinos al pulsar */
}

.vp-btn--primary:hover {
	transform: translateY(-1px);
	filter: brightness(1.08);
}

/* Baja exactamente el espesor (4px) partiendo del hover (-1px) → +3px. */
.vp-btn--primary:active {
	transform: translateY(3px);
	box-shadow:
		inset 0 1px 0 0 hsl(142 90% 74% / 0.4),
		0 1px 0 0 hsl(142 82% 26%),
		0 2px 6px -3px hsl(142 76% 40% / 0.5);
}

.vp-btn--secondary {
	color: hsl(var(--vp-color-secondary-foreground));
	background-image: linear-gradient(to bottom, hsl(150 8% 16%), hsl(150 8% 11%));
	box-shadow:
		inset 0 1px 0 0 hsl(0 0% 100% / 0.10),
		0 4px 0 0 hsl(150 8% 6%),
		0 8px 16px -5px rgb(0 0 0 / 0.6);
	margin-bottom: 4px;
}

.vp-btn--secondary:hover { transform: translateY(-1px); filter: brightness(1.12); }

.vp-btn--secondary:active {
	transform: translateY(3px);
	box-shadow:
		inset 0 1px 0 0 hsl(0 0% 100% / 0.06),
		0 1px 0 0 hsl(150 8% 6%),
		0 2px 6px -3px rgb(0 0 0 / 0.5);
}

.vp-btn--outline {
	color: hsl(var(--vp-color-foreground));
	background: hsl(var(--vp-color-card) / 0.6);
	border: 1px solid hsl(var(--vp-color-border));
	box-shadow: inset 0 1px 0 0 hsl(0 0% 100% / 0.04);
}

.vp-btn--outline:hover {
	border-color: hsl(var(--vp-color-primary) / 0.5);
	color: hsl(var(--vp-color-primary));
	transform: translateY(-1px);
}

.vp-btn--outline:active { transform: translateY(0); }

.vp-btn--ghost {
	color: hsl(var(--vp-color-muted-foreground));
	background: transparent;
}

.vp-btn--ghost:hover { color: hsl(var(--vp-color-foreground)); background: hsl(var(--vp-color-secondary)); }

.vp-btn--destructive {
	color: hsl(var(--vp-color-destructive-foreground));
	background-image: linear-gradient(to bottom, hsl(0 74% 56%), hsl(0 72% 45%));
	box-shadow:
		inset 0 1px 0 0 hsl(0 90% 76% / 0.5),
		0 4px 0 0 hsl(0 72% 26%),
		0 8px 16px -5px hsl(0 72% 40% / 0.5);
	margin-bottom: 4px;
}

.vp-btn--destructive:hover { transform: translateY(-1px); filter: brightness(1.08); }

.vp-btn--destructive:active {
	transform: translateY(3px);
	box-shadow:
		inset 0 1px 0 0 hsl(0 90% 76% / 0.35),
		0 1px 0 0 hsl(0 72% 26%),
		0 2px 6px -3px hsl(0 72% 40% / 0.45);
}

.vp-btn--sm { padding: 0.375rem 0.875rem; font-size: 0.8125rem; min-height: 2.25rem; }
.vp-btn--lg { padding: 0.875rem 1.75rem; font-size: 1rem; min-height: 3.25rem; }
.vp-btn--block { width: 100%; }

/* ── Iconos 3D — misma gramática de relieve que los botones ────────────────── */

.vp-icon3d {
	position: relative;
	isolation: isolate;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--vp-radius-md);
	color: var(--vp-icon-accent);
	transform-style: preserve-3d;
	background:
		radial-gradient(circle at 30% 18%, hsl(0 0% 100% / 0.26), transparent 30%),
		radial-gradient(circle at 70% 72%, var(--vp-icon-soft), transparent 56%),
		linear-gradient(145deg, hsl(150 14% 22%), hsl(150 12% 5%) 58%, hsl(150 18% 2%));
	border: 1px solid color-mix(in srgb, var(--vp-icon-accent) 42%, transparent);
	box-shadow:
		inset 0 1px 0 hsl(0 0% 100% / 0.18),
		inset 0 -10px 16px hsl(0 0% 0% / 0.48),
		0 4px 0 var(--vp-icon-depth),
		0 16px 28px -13px var(--vp-icon-glow),
		0 0 0 1px hsl(0 0% 100% / 0.02);
}

.vp-icon3d::before {
	content: '';
	position: absolute;
	inset: 1px;
	border-radius: inherit;
	background:
		linear-gradient(135deg, hsl(0 0% 100% / 0.18), transparent 38%),
		radial-gradient(circle at 70% 75%, var(--vp-icon-soft), transparent 55%);
	pointer-events: none;
	z-index: 0;
}

/* Difusa proyectada bajo el icono: el "charco" de luz que lo despega del fondo. */
.vp-icon3d::after {
	content: '';
	position: absolute;
	left: 12%;
	right: 12%;
	bottom: -7px;
	height: 12px;
	border-radius: 999px;
	background: var(--vp-icon-glow);
	filter: blur(7px);
	opacity: 0.74;
	pointer-events: none;
	z-index: -2;
}

.vp-icon3d__glyph {
	position: relative;
	z-index: 1;
	width: 55%;
	height: 55%;
	stroke-width: 2.35;
	transform: translateY(-1px);
	filter:
		drop-shadow(0 1px 0 hsl(0 0% 100% / 0.22))
		drop-shadow(0 0 9px var(--vp-icon-glow))
		drop-shadow(0 4px 4px hsl(0 0% 0% / 0.5));
}

.vp-icon3d[data-size='xs'] { width: 1.5rem; height: 1.5rem; border-radius: var(--vp-radius-sm); }
.vp-icon3d[data-size='sm'] { width: 2rem; height: 2rem; }
.vp-icon3d[data-size='lg'] { width: 3rem; height: 3rem; border-radius: var(--vp-radius-lg); }
.vp-icon3d[data-size='xl'] { width: 4rem; height: 4rem; border-radius: var(--vp-radius-xl); }

.vp-icon3d[data-size='xs']::after,
.vp-icon3d[data-size='sm']::after {
	bottom: -4px;
	height: 7px;
	filter: blur(6px);
}

.vp-icon3d[data-size='xs'] {
	box-shadow:
		inset 0 1px 0 hsl(0 0% 100% / 0.1),
		inset 0 -5px 9px hsl(0 0% 0% / 0.38),
		0 2px 0 var(--vp-icon-depth),
		0 8px 16px -12px var(--vp-icon-glow);
}

.vp-icon3d[data-variant='gold']   { --vp-icon-accent: #facc15; --vp-icon-soft: rgb(250 204 21 / 0.18); --vp-icon-glow: rgb(250 204 21 / 0.42); --vp-icon-depth: #9a6507; }
.vp-icon3d[data-variant='blue']   { --vp-icon-accent: #60a5fa; --vp-icon-soft: rgb(96 165 250 / 0.18); --vp-icon-glow: rgb(96 165 250 / 0.42); --vp-icon-depth: #1d4f91; }
.vp-icon3d[data-variant='purple'] { --vp-icon-accent: #c084fc; --vp-icon-soft: rgb(192 132 252 / 0.18); --vp-icon-glow: rgb(192 132 252 / 0.38); --vp-icon-depth: #6d28a7; }
.vp-icon3d[data-variant='orange'] { --vp-icon-accent: #fb923c; --vp-icon-soft: rgb(251 146 60 / 0.18); --vp-icon-glow: rgb(251 146 60 / 0.38); --vp-icon-depth: #9a4310; }
.vp-icon3d[data-variant='red']    { --vp-icon-accent: #f87171; --vp-icon-soft: rgb(248 113 113 / 0.16); --vp-icon-glow: rgb(248 113 113 / 0.36); --vp-icon-depth: #991b1b; }
.vp-icon3d[data-variant='muted']  { --vp-icon-accent: #8fa39a; --vp-icon-soft: rgb(143 163 154 / 0.14); --vp-icon-glow: rgb(143 163 154 / 0.24); --vp-icon-depth: #26312d; }

/* ── Superficies ──────────────────────────────────────────────────────────── */

.vp-surface-3d { box-shadow: var(--vp-shadow-md); }

.vp-surface-3d-hover {
	transition:
		transform var(--vp-duration-fast) var(--vp-ease-out),
		box-shadow var(--vp-duration-fast) var(--vp-ease-out);
}

.vp-surface-3d-hover:hover {
	transform: translateY(-2px);
	box-shadow: var(--vp-shadow-lg);
}

/* ──────────────────────────────────────────────────────────────────────────
   7. COMPONENTES
   ────────────────────────────────────────────────────────────────────────── */

.vp-card {
	background: hsl(var(--vp-color-card));
	border: 1px solid hsl(var(--vp-color-border) / 0.5);
	border-radius: var(--vp-radius-xl);
	padding: 1.5rem;
	box-shadow: var(--vp-shadow-md);
}

.vp-card--interactive {
	transition:
		transform var(--vp-duration-fast) var(--vp-ease-out),
		box-shadow var(--vp-duration-fast) var(--vp-ease-out),
		border-color var(--vp-duration-fast) var(--vp-ease-out);
}

.vp-card--interactive:hover {
	transform: translateY(-4px);
	border-color: hsl(var(--vp-color-primary) / 0.4);
	box-shadow: var(--vp-shadow-lg);
}

.vp-card__title {
	font-family: var(--vp-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
}

.vp-card__desc {
	font-size: 0.875rem;
	line-height: 1.65;
	color: hsl(var(--vp-color-muted-foreground));
	margin: 0;
}

.vp-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.125rem 0.5rem;
	border-radius: var(--vp-radius-full);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.6;
	background: hsl(var(--vp-color-primary) / 0.15);
	color: hsl(var(--vp-color-primary));
}

.vp-badge--live { background: hsl(0 72% 50%); color: #fff; }
.vp-badge--warning { background: hsl(var(--vp-color-warning) / 0.18); color: hsl(var(--vp-color-warning)); }
.vp-badge--muted { background: hsl(var(--vp-color-muted)); color: hsl(var(--vp-color-muted-foreground)); }

/* Punto pulsante del indicador LIVE. La segunda capa es estática para que el
   indicador siga siendo visible con las animaciones desactivadas. */
.vp-dot {
	position: relative;
	display: inline-flex;
	width: 0.5rem;
	height: 0.5rem;
	flex: 0 0 auto;
}

.vp-dot::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: currentColor;
	opacity: 0.75;
	animation: vp-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.vp-dot::after {
	content: '';
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 999px;
	background: currentColor;
}

/* ── Formularios ──────────────────────────────────────────────────────────── */

.vp-field { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1.125rem; }

.vp-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: hsl(var(--vp-color-foreground));
}

.vp-label__req {
	color: hsl(var(--vp-color-destructive));
	margin-left: 0.15em;
}

.vp-input,
.vp-select,
.vp-textarea {
	width: 100%;
	padding: 0.6875rem 0.875rem;
	min-height: 2.75rem;
	font-family: var(--vp-font-body);
	font-size: 0.9375rem;
	color: hsl(var(--vp-color-foreground));
	background: hsl(var(--vp-color-input));
	border: 1px solid hsl(var(--vp-color-border));
	border-radius: var(--vp-radius-md);
	transition: border-color var(--vp-duration-fast) var(--vp-ease-out);
}

.vp-input::placeholder,
.vp-textarea::placeholder { color: hsl(var(--vp-color-muted-foreground)); }

.vp-input:focus,
.vp-select:focus,
.vp-textarea:focus { border-color: hsl(var(--vp-color-primary)); }

.vp-textarea { min-height: 8rem; resize: vertical; }

/* Estado de error: NO depende solo del color. El borde cambia, el mensaje se
   asocia con aria-describedby y lleva su propio icono textual. */
.vp-input[aria-invalid='true'],
.vp-select[aria-invalid='true'],
.vp-textarea[aria-invalid='true'] {
	border-color: hsl(var(--vp-color-destructive));
	border-width: 2px;
}

.vp-field__error {
	display: flex;
	align-items: flex-start;
	gap: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: hsl(var(--vp-color-destructive));
}

.vp-field__error::before { content: '\26A0'; flex: 0 0 auto; }

.vp-field__hint { font-size: 0.8125rem; color: hsl(var(--vp-color-muted-foreground)); }

.vp-checkbox { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.875rem; }
.vp-checkbox input { margin-top: 0.2rem; width: 1.125rem; height: 1.125rem; accent-color: hsl(var(--vp-color-primary)); }

/* Indicador de envío: el botón conserva su ancho para que la fila no salte. */
.vp-btn[data-loading='true'] { pointer-events: none; opacity: 0.75; }
.vp-btn[data-loading='true'] .vp-btn__label { visibility: hidden; }

.vp-btn[data-loading='true']::after {
	content: '';
	position: absolute;
	width: 1.125rem;
	height: 1.125rem;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 999px;
	animation: vp-spin-slow 1.1s linear infinite;
}

/* ── Alertas ──────────────────────────────────────────────────────────────── */

.vp-alert {
	display: flex;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	border-radius: var(--vp-radius-md);
	border-left: 4px solid hsl(var(--vp-color-info));
	background: hsl(var(--vp-color-card));
	font-size: 0.9375rem;
	margin-bottom: 1rem;
}

.vp-alert__icon { flex: 0 0 auto; font-weight: 700; }
.vp-alert__body { flex: 1 1 auto; min-width: 0; }
.vp-alert__body :last-child { margin-bottom: 0; }

.vp-alert--success { border-left-color: hsl(var(--vp-color-success)); }
.vp-alert--warning { border-left-color: hsl(var(--vp-color-warning)); }
.vp-alert--error   { border-left-color: hsl(var(--vp-color-error)); }

/* ── Estados (carga, vacío, error) ────────────────────────────────────────── */

.vp-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 3rem 1.5rem;
	text-align: center;
	color: hsl(var(--vp-color-muted-foreground));
}

.vp-state__title {
	font-family: var(--vp-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	color: hsl(var(--vp-color-foreground));
	margin: 0;
}

.vp-state__desc { font-size: 0.9375rem; max-width: 32rem; margin: 0; }

.vp-spinner {
	width: 2rem;
	height: 2rem;
	border: 3px solid hsl(var(--vp-color-border));
	border-top-color: hsl(var(--vp-color-primary));
	border-radius: 999px;
	animation: vp-spin-slow 1.1s linear infinite;
}

.vp-skeleton {
	background: linear-gradient(
		90deg,
		hsl(var(--vp-color-secondary)) 25%,
		hsl(var(--vp-color-border)) 50%,
		hsl(var(--vp-color-secondary)) 75%
	);
	background-size: 200% 100%;
	animation: vp-shimmer 1.4s linear infinite;
	border-radius: var(--vp-radius-sm);
}

/* ── Cabecera pública y del panel ─────────────────────────────────────────── */

.vp-header {
	position: sticky;
	top: 0;
	z-index: var(--vp-z-header);
	border-bottom: 1px solid hsl(var(--vp-color-border) / 0.5);
	background: hsl(var(--vp-color-background) / 0.72);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.vp-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--vp-header-h);
	padding-block: 0.5rem;
}

.vp-brand { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; color: inherit; }
.vp-brand:hover { text-decoration: none; }
.vp-brand__text { font-family: var(--vp-font-display); font-weight: 800; font-size: 1.0625rem; letter-spacing: 0.22em; padding-left: 0.22em; text-transform: uppercase; }

.vp-nav { display: none; align-items: center; gap: 0.25rem; }

@media (min-width: 1024px) { .vp-nav { display: flex; } }

/* Lista de menú generada por WordPress. Se conserva el <ul>/<li> (es lo que
   anuncia «lista de N elementos» al lector de pantalla) y se le quita el
   aspecto de lista solo visualmente. */
.vp-nav__list,
.vp-footer__menu,
.vp-legal-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vp-nav__list {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

/* Los enlaces del menú los genera WordPress sin nuestra clase, así que la
   apariencia se aplica por descendencia además de por clase. */
.vp-nav__link,
.vp-nav__list a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.875rem;
	border-radius: var(--vp-radius-full);
	font-size: 0.875rem;
	font-weight: 600;
	color: hsl(var(--vp-color-muted-foreground));
	transition: color var(--vp-duration-fast) var(--vp-ease-out), background var(--vp-duration-fast) var(--vp-ease-out);
}

.vp-nav__link:hover,
.vp-nav__list a:hover { color: hsl(var(--vp-color-foreground)); background: hsl(var(--vp-color-secondary)); text-decoration: none; }

/* El estado activo NO se marca solo con color: lleva también fondo propio y
   aria-current="page" en el marcado. */
.vp-nav__link[aria-current='page'],
.vp-nav__list a[aria-current='page'] {
	color: hsl(var(--vp-color-primary));
	background: hsl(var(--vp-color-primary) / 0.12);
}

/* ── Barra de pestañas inferior (solo móvil, equivalente a md:hidden) ─────── */

.vp-tabbar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: var(--vp-z-header);
	background: hsl(var(--vp-color-card) / 0.95);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-top: 1px solid hsl(var(--vp-color-border) / 0.5);
	padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 768px) { .vp-tabbar { display: none; } }

.vp-tabbar__list {
	display: flex;
	align-items: stretch;
	height: var(--vp-tabbar-h);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
}

.vp-tabbar__item { flex: 1 1 0; display: flex; }

.vp-tab {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	font-size: 0.625rem;
	font-weight: 600;
	color: hsl(var(--vp-color-muted-foreground));
	text-decoration: none;
	transition: color var(--vp-duration-fast) var(--vp-ease-out);
}

.vp-tab:hover { text-decoration: none; }
.vp-tab[aria-current='page'] { color: hsl(var(--vp-color-primary)); }

/* Subrayado del estado activo: refuerzo no cromático del aria-current. */
.vp-tab[aria-current='page']::before {
	content: '';
	position: absolute;
	top: 0;
	left: 20%;
	right: 20%;
	height: 2px;
	background: hsl(var(--vp-color-primary));
	border-radius: 0 0 2px 2px;
}

.vp-tab__badge {
	position: absolute;
	top: 0.25rem;
	right: 50%;
	transform: translateX(1.1rem);
	min-width: 1.05rem;
	padding: 0 0.25rem;
	border-radius: 999px;
	background: hsl(var(--vp-color-destructive));
	color: hsl(var(--vp-color-destructive-foreground));
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1.05rem;
	text-align: center;
}

/* ── Menú de usuario / desplegables ───────────────────────────────────────── */

.vp-dropdown { position: relative; }

.vp-dropdown__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 0.5rem);
	z-index: var(--vp-z-dropdown);
	min-width: 14rem;
	padding: 0.375rem;
	background: hsl(var(--vp-color-popover));
	border: 1px solid hsl(var(--vp-color-border));
	border-radius: var(--vp-radius-lg);
	box-shadow: var(--vp-shadow-lg);
}

.vp-dropdown__panel[hidden] { display: none; }

.vp-dropdown__item {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 0;
	border-radius: var(--vp-radius-sm);
	background: transparent;
	color: hsl(var(--vp-color-foreground));
	font-size: 0.875rem;
	font-weight: 600;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.vp-dropdown__item:hover { background: hsl(var(--vp-color-secondary)); text-decoration: none; }

/* ── Modales ──────────────────────────────────────────────────────────────── */

.vp-modal[hidden] { display: none; }

.vp-modal {
	position: fixed;
	inset: 0;
	z-index: var(--vp-z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgb(0 0 0 / 0.7);
}

.vp-modal__dialog {
	width: 100%;
	max-width: 32rem;
	max-height: 90vh;
	overflow-y: auto;
	background: hsl(var(--vp-color-popover));
	border: 1px solid hsl(var(--vp-color-border));
	border-radius: var(--vp-radius-2xl);
	box-shadow: var(--vp-shadow-lg);
	padding: 1.5rem;
}

.vp-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.vp-modal__title { font-family: var(--vp-font-heading); font-size: 1.25rem; font-weight: 700; margin: 0; }

.vp-modal__close {
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: var(--vp-radius-sm);
	background: transparent;
	color: hsl(var(--vp-color-muted-foreground));
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.vp-modal__close:hover { background: hsl(var(--vp-color-secondary)); color: hsl(var(--vp-color-foreground)); }

/* ──────────────────────────────────────────────────────────────────────────
   8. LANDING
   ────────────────────────────────────────────────────────────────────────── */

.vp-hero { position: relative; isolation: isolate; overflow: hidden; }

.vp-hero__inner {
	display: grid;
	gap: 3rem;
	align-items: center;
	padding-block: 4rem;
}

@media (min-width: 1024px) {
	.vp-hero__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; padding-block: 7rem; }
	.vp-hero__copy { text-align: left; }
}

.vp-hero__copy { text-align: center; }

.vp-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	padding: 0.375rem 1rem;
	border: 1px solid hsl(var(--vp-color-primary) / 0.3);
	border-radius: var(--vp-radius-full);
	background: hsl(var(--vp-color-primary) / 0.1);
	font-size: 0.8125rem;
	font-weight: 600;
	color: hsl(var(--vp-color-primary));
}

/* Titular a dos tonos: la segunda línea usa degradado recortado al texto. El
   color de reserva importa — si background-clip falla, el texto sigue visible. */
.vp-hero__title-accent {
	display: block;
	margin-top: 0.25rem;
	color: hsl(var(--vp-color-primary));
	background-image: linear-gradient(to right, hsl(142 76% 50%), hsl(160 84% 55%), hsl(142 76% 50%));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.vp-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin-top: 2rem;
}

@media (min-width: 640px) { .vp-hero__actions { flex-direction: row; } }
@media (min-width: 1024px) { .vp-hero__actions { justify-content: flex-start; } }

/* Fondo decorativo del hero: rejilla + resplandores. Puramente ornamental,
   marcado con aria-hidden en el HTML. */
.vp-neon { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.vp-neon__glow {
	position: absolute;
	border-radius: 999px;
	filter: blur(40px);
}

.vp-neon__glow--top {
	top: -10rem;
	left: 50%;
	width: 40rem;
	height: 40rem;
	transform: translateX(-50%);
	background: radial-gradient(circle, hsl(142 76% 50% / 0.18), transparent 62%);
}

.vp-neon__glow--left {
	top: 30%;
	left: -8rem;
	width: 26rem;
	height: 26rem;
	background: radial-gradient(circle, hsl(142 76% 50% / 0.12), transparent 65%);
}

.vp-neon__glow--right {
	bottom: 0;
	right: -6rem;
	width: 29rem;
	height: 29rem;
	background: radial-gradient(circle, hsl(142 76% 50% / 0.10), transparent 65%);
}

.vp-neon__grid {
	position: absolute;
	inset: 0;
	opacity: 0.5;
	background-image:
		linear-gradient(hsl(142 76% 50% / 0.06) 1px, transparent 1px),
		linear-gradient(90deg, hsl(142 76% 50% / 0.06) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 75%);
	mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 75%);
	animation: vp-grid-drift 8s linear infinite;
}

/* Maqueta del producto */
.vp-mockup { position: relative; }

.vp-mockup__glow {
	position: absolute;
	inset: -1.5rem;
	border-radius: 28px;
	background: radial-gradient(circle at 50% 30%, hsl(142 76% 50% / 0.22), transparent 70%);
	filter: blur(40px);
	pointer-events: none;
}

.vp-mockup__frame {
	position: relative;
	padding: 0.75rem;
	border: 1px solid hsl(var(--vp-color-border) / 0.5);
	border-radius: var(--vp-radius-2xl);
	background: hsl(var(--vp-color-card) / 0.7);
	box-shadow: var(--vp-shadow-glow);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

@media (min-width: 640px) { .vp-mockup__frame { padding: 1rem; } }

.vp-mockup__chrome { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; padding-inline: 0.25rem; }
.vp-mockup__dots { display: flex; gap: 0.375rem; }
.vp-mockup__dot { width: 0.625rem; height: 0.625rem; border-radius: 999px; }
.vp-mockup__dot:nth-child(1) { background: hsl(0 72% 50% / 0.7); }
.vp-mockup__dot:nth-child(2) { background: hsl(45 90% 55% / 0.7); }
.vp-mockup__dot:nth-child(3) { background: hsl(var(--vp-color-primary) / 0.8); }

.vp-mockup__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }

.vp-mockup__tile {
	position: relative;
	overflow: hidden;
	border: 1px solid hsl(var(--vp-color-border) / 0.5);
	border-radius: var(--vp-radius-lg);
	background: hsl(var(--vp-color-card));
	box-shadow: 0 8px 30px -12px rgb(0 0 0 / 0.7);
}

.vp-mockup__screen {
	position: relative;
	height: 7rem;
	background-image: linear-gradient(135deg, hsl(160 70% 45% / 0.3), hsl(var(--vp-color-card)) 55%, hsl(174 70% 30% / 0.3));
}

/* Brillo que barre la miniatura. Decorativo: se anula en Lite Mode. */
.vp-mockup__shimmer {
	position: absolute;
	inset-block: 0;
	width: 33%;
	transform: skewX(-12deg);
	background: hsl(0 0% 100% / 0.1);
	filter: blur(6px);
	animation: vp-shimmer-sweep 3.5s linear infinite;
}

.vp-mockup__meta { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.625rem; }
.vp-mockup__bar { height: 0.5rem; width: 3.5rem; border-radius: 999px; background: hsl(var(--vp-color-foreground) / 0.15); }
.vp-mockup__avatar { width: 1.25rem; height: 1.25rem; border-radius: 999px; background: linear-gradient(135deg, hsl(var(--vp-color-primary) / 0.8), hsl(var(--vp-color-primary) / 0.3)); }

/* Marquee */
.vp-marquee {
	position: relative;
	overflow: hidden;
	border-block: 1px solid hsl(var(--vp-color-border) / 0.5);
	background: hsl(var(--vp-color-card) / 0.4);
	padding-block: 1rem;
}

.vp-marquee::before,
.vp-marquee::after {
	content: '';
	position: absolute;
	inset-block: 0;
	width: 6rem;
	z-index: 2;
	pointer-events: none;
}

.vp-marquee::before { left: 0; background: linear-gradient(to right, hsl(var(--vp-color-background)), transparent); }
.vp-marquee::after { right: 0; background: linear-gradient(to left, hsl(var(--vp-color-background)), transparent); }

.vp-marquee__track {
	display: flex;
	width: max-content;
	gap: 2.5rem;
	white-space: nowrap;
	animation: vp-marquee 22s linear infinite;
}

.vp-marquee__item { display: inline-flex; align-items: center; gap: 0.75rem; }

.vp-marquee__label {
	font-family: var(--vp-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: hsl(var(--vp-color-foreground) / 0.7);
}

.vp-marquee:hover .vp-marquee__track { animation-play-state: paused; }

/* Pasos */
.vp-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }

@media (min-width: 768px) { .vp-step { align-items: flex-start; text-align: left; } }

.vp-step__icon-wrap { position: relative; margin-bottom: 1.25rem; }

.vp-step__number {
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 999px;
	background: hsl(var(--vp-color-primary));
	color: hsl(var(--vp-color-primary-foreground));
	font-family: var(--vp-font-display);
	font-size: 0.75rem;
	font-weight: 900;
}

/* Estadísticas */
.vp-stat {
	padding: 1.5rem;
	text-align: center;
	border: 1px solid hsl(var(--vp-color-border) / 0.5);
	border-radius: var(--vp-radius-xl);
	background: hsl(var(--vp-color-card));
}

.vp-stat__value {
	font-family: var(--vp-font-display);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 900;
	line-height: 1;
	color: hsl(var(--vp-color-primary));
	background-image: linear-gradient(to bottom, hsl(142 76% 50%), hsl(160 84% 39%));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.vp-stat__label {
	margin-top: 0.5rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: hsl(var(--vp-color-muted-foreground));
}

/* CTA final */
.vp-cta {
	position: relative;
	overflow: hidden;
	padding: 4rem 1.5rem;
	text-align: center;
	border: 1px solid hsl(var(--vp-color-primary) / 0.3);
	border-radius: var(--vp-radius-2xl);
	background: hsl(var(--vp-color-card));
	box-shadow: var(--vp-shadow-glow-strong);
}

@media (min-width: 640px) { .vp-cta { padding: 5rem 3rem; } }

.vp-cta__decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.3;
	background-image:
		linear-gradient(hsl(142 76% 50% / 0.06) 1px, transparent 1px),
		linear-gradient(90deg, hsl(142 76% 50% / 0.06) 1px, transparent 1px);
	background-size: 40px 40px;
	-webkit-mask-image: radial-gradient(ellipse at center, black, transparent 70%);
	mask-image: radial-gradient(ellipse at center, black, transparent 70%);
}

.vp-cta__body { position: relative; }

/* Precios */
.vp-price { display: flex; flex-direction: column; }
.vp-price--featured { border-color: hsl(var(--vp-color-primary) / 0.5); box-shadow: var(--vp-shadow-glow); }
.vp-price__amount { font-family: var(--vp-font-display); font-size: 2.5rem; font-weight: 900; line-height: 1; }
.vp-price__period { font-size: 0.875rem; color: hsl(var(--vp-color-muted-foreground)); }
.vp-price__list { list-style: none; margin: 1.25rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; }
.vp-price__list li { display: flex; gap: 0.5rem; }
.vp-price__list li::before { content: '\2713'; color: hsl(var(--vp-color-primary)); font-weight: 700; flex: 0 0 auto; }

/* FAQ */
.vp-faq__item { border-bottom: 1px solid hsl(var(--vp-color-border) / 0.5); }
.vp-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.125rem 0; border: 0; background: transparent; color: inherit; font-family: var(--vp-font-heading); font-size: 1rem; font-weight: 700; text-align: left; cursor: pointer; }
.vp-faq__q::after { content: '+'; flex: 0 0 auto; font-size: 1.25rem; color: hsl(var(--vp-color-primary)); }
.vp-faq__q[aria-expanded='true']::after { content: '\2212'; }
.vp-faq__a { padding-bottom: 1.125rem; color: hsl(var(--vp-color-muted-foreground)); }
.vp-faq__a[hidden] { display: none; }

/* Footer */
.vp-footer {
	border-top: 1px solid hsl(var(--vp-color-border) / 0.5);
	background: hsl(var(--vp-color-card) / 0.4);
	padding-block: 2.5rem;
	margin-top: auto;
}

.vp-footer__grid { display: grid; gap: 2rem; }

@media (min-width: 768px) { .vp-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }

.vp-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.vp-footer__menu a { font-size: 0.875rem; color: hsl(var(--vp-color-muted-foreground)); }
.vp-footer__menu a:hover { color: hsl(var(--vp-color-primary)); }

.vp-footer__bottom {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid hsl(var(--vp-color-border) / 0.4);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: center;
	text-align: center;
	font-size: 0.75rem;
	color: hsl(var(--vp-color-muted-foreground));
}

@media (min-width: 640px) { .vp-footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; } }

.vp-legal-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }

/* ──────────────────────────────────────────────────────────────────────────
   9. PANEL PRIVADO — MULTIVIEW
   ────────────────────────────────────────────────────────────────────────── */

.vp-dash__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 0;
	margin-bottom: 1rem;
}

.vp-dash__toolbar-group { display: flex; align-items: center; gap: 0.5rem; }

/* Rejilla del multiview. El número de columnas lo escribe la isla vp-player en
   la custom property --vp-cols (1..50), no en una clase: 50 clases de columnas
   serían CSS muerto casi entero. */
.vp-player-grid {
	display: grid;
	grid-template-columns: repeat(var(--vp-cols, 1), minmax(0, 1fr));
	gap: 0.375rem;
}

/* En móvil SIEMPRE una columna, pase lo que pase en localStorage: 8 iframes de
   vídeo en 360px de ancho no son visibles ni decodificables. */
@media (max-width: 767px) {
	.vp-player-grid { grid-template-columns: minmax(0, 1fr); }
}

.vp-player-tile {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid hsl(var(--vp-color-border) / 0.4);
	border-radius: var(--vp-radius-lg);
	background: #000;
}

/* Contenedor del iframe. El escalado de calidad se aplica AQUÍ y no al iframe:
   el iframe se renderiza a resolución interna menor (width/height al 33-100%)
   y se reescala con transform. Reduce coste de composición y tiende a bajar el
   bitrate del ABR de Kick SIN recargar el iframe — el stream no se corta y el
   espectador no se pierde. */
.vp-player-tile__frame {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--vp-quality-size, 100%);
	height: var(--vp-quality-size, 100%);
	transform: scale(var(--vp-quality-scale, 1));
	transform-origin: top left;
	border: 0;
}

.vp-player-tile__overlay {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
	padding: 1.5rem 0.625rem 0.625rem;
	background: linear-gradient(to top, rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.6), transparent);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity var(--vp-duration-fast) var(--vp-ease-out), transform var(--vp-duration-fast) var(--vp-ease-out);
}

/* :focus-within además de :hover — sin él, la superposición es inalcanzable
   con el teclado y sus botones quedan invisibles pero focalizables. */
.vp-player-tile:hover .vp-player-tile__overlay,
.vp-player-tile:focus-within .vp-player-tile__overlay {
	opacity: 1;
	transform: translateY(0);
}

.vp-player-tile__corner {
	position: absolute;
	top: 0.5rem;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.125rem 0.375rem;
	border-radius: var(--vp-radius-sm);
	background: rgb(0 0 0 / 0.65);
	border: 1px solid hsl(0 0% 100% / 0.1);
	font-size: 0.5625rem;
	font-weight: 700;
	color: #fff;
	pointer-events: none;
}

.vp-player-tile__corner--live { left: 0.5rem; background: hsl(0 72% 45% / 0.9); border-color: transparent; }
.vp-player-tile__corner--viewers { right: 0.5rem; }

.vp-player-tile__name { font-size: 0.6875rem; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vp-player-tile__actions { display: flex; align-items: center; gap: 0.25rem; flex: 0 0 auto; }

.vp-player-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 1px solid hsl(0 0% 100% / 0.15);
	border-radius: var(--vp-radius-sm);
	background: rgb(0 0 0 / 0.5);
	color: hsl(0 0% 100% / 0.7);
	cursor: pointer;
	transition: color var(--vp-duration-fast) var(--vp-ease-out), border-color var(--vp-duration-fast) var(--vp-ease-out);
}

.vp-player-btn:hover { color: hsl(var(--vp-color-primary)); border-color: hsl(var(--vp-color-primary) / 0.5); }

/* Estado "con sonido": el botón se rellena, no solo cambia de color. */
.vp-player-btn[aria-pressed='true'] {
	background: hsl(var(--vp-color-primary));
	border-color: hsl(var(--vp-color-primary));
	color: hsl(var(--vp-color-primary-foreground));
}

/* Indicador de estado del player (loading/error/blocked). Superpuesto al
   iframe, nunca lo sustituye: desmontar el iframe tira al espectador. */
.vp-player-tile__status {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: rgb(0 0 0 / 0.55);
	color: hsl(var(--vp-color-muted-foreground));
	font-size: 0.75rem;
	font-weight: 600;
	pointer-events: none;
}

.vp-player-tile__status[hidden] { display: none; }
.vp-player-tile[data-status='playing'] .vp-player-tile__status,
.vp-player-tile[data-status='background_playing'] .vp-player-tile__status { display: none; }
.vp-player-tile[data-status='error'] .vp-player-tile__status { color: hsl(var(--vp-color-destructive)); }

.vp-dash-stat {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.875rem 1rem;
	border: 1px solid hsl(var(--vp-color-border) / 0.5);
	border-radius: var(--vp-radius-lg);
	background: hsl(var(--vp-color-card));
}

.vp-dash-stat__value { font-family: var(--vp-font-display); font-size: 1.5rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.vp-dash-stat__label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: hsl(var(--vp-color-muted-foreground)); }

/* ──────────────────────────────────────────────────────────────────────────
   10. ANIMACIÓN — CSS + IntersectionObserver (sin Framer Motion, −110KB)
   ────────────────────────────────────────────────────────────────────────── */

@keyframes vp-fade-up {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes vp-wiggle {
	0%, 100% { transform: rotate(0deg); }
	25%      { transform: rotate(-9deg); }
	75%      { transform: rotate(9deg); }
}

@keyframes vp-pop {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.35); }
	100% { transform: scale(1); }
}

@keyframes vp-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-4px); }
}

@keyframes vp-glow-pulse {
	0%, 100% { opacity: 0.55; }
	50%      { opacity: 1; }
}

@keyframes vp-spin-slow { to { transform: rotate(360deg); } }

@keyframes vp-ping {
	75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes vp-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@keyframes vp-shimmer-sweep { from { transform: translateX(-120%) skewX(-12deg); } to { transform: translateX(320%) skewX(-12deg); } }

@keyframes vp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@keyframes vp-grid-drift { from { background-position: 0 0; } to { background-position: 0 56px; } }

@keyframes vp-accordion-down { from { height: 0; } to { height: var(--vp-accordion-h, auto); } }
@keyframes vp-accordion-up   { from { height: var(--vp-accordion-h, auto); } to { height: 0; } }

/* Estado inicial de las entradas por scroll. Se aplica SOLO cuando el JS ha
   marcado el documento con .vp-js: sin JavaScript, .vp-reveal nunca recibiría
   la clase --in y el contenido quedaría invisible para siempre. */
.vp-js .vp-reveal { opacity: 0; transform: translateY(28px); }

.vp-js .vp-reveal--in {
	animation: vp-fade-up var(--vp-duration-slow) var(--vp-ease-out) both;
}

.vp-anim-wiggle { animation: vp-wiggle 0.4s ease-in-out; }
.vp-anim-pop { animation: vp-pop var(--vp-duration-base) var(--vp-ease-out); }
.vp-anim-float { animation: vp-float 3s ease-in-out infinite; }
.vp-anim-glow { animation: vp-glow-pulse 2.2s ease-in-out infinite; }
.vp-anim-spin { animation: vp-spin-slow 1.1s linear infinite; }

/* ──────────────────────────────────────────────────────────────────────────
   11. REDUCCIÓN DE MOVIMIENTO — nivel 1: preferencia del sistema (WCAG)
   ────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	/* Sin esto, .vp-reveal se quedaría en opacity:0 al anularse la animación
	   que era la encargada de devolverlo a opacity:1. */
	.vp-js .vp-reveal { opacity: 1; transform: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   12. LITE MODE — nivel 2: rendimiento extremo, elegido por el usuario

   Existe porque el panel renderiza N iframes de vídeo a la vez: en equipos
   modestos el coste de composición de blur/sombras/animaciones compite con la
   decodificación de vídeo y los players no llegan a "playing". Apagar los
   efectos recupera espectadores reales — es una decisión de producto, no un
   ajuste cosmético.
   ────────────────────────────────────────────────────────────────────────── */

.lite-mode *,
.lite-mode *::before,
.lite-mode *::after {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	filter: none !important;
	-webkit-filter: none !important;
	animation: none !important;
	animation-duration: 0.001ms !important;
	animation-delay: 0s !important;
	animation-iteration-count: 1 !important;
	transition: none !important;
	transition-duration: 0.001ms !important;
	will-change: auto !important;
	transform-style: flat !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

/* Wallpaper → color sólido: sin imagen no hay decode ni capa de textura. */
.lite-mode body::before {
	background-image: none !important;
	background-color: hsl(var(--vp-color-background)) !important;
}

/* Las entradas por scroll no pueden depender de una animación que Lite Mode
   acaba de anular: se muestran de inmediato. */
.lite-mode .vp-reveal { opacity: 1 !important; transform: none !important; }

.lite-mode .vp-neon,
.lite-mode .vp-mockup__glow,
.lite-mode .vp-mockup__shimmer,
.lite-mode .vp-cta__decor,
.lite-mode .lite-bg-layer { display: none !important; }

.lite-mode .vp-card,
.lite-mode .vp-mockup__frame,
.lite-mode .vp-header,
.lite-mode .vp-tabbar { background: hsl(var(--vp-color-card)) !important; }

.lite-mode .vp-marquee__track { transform: none !important; }

/* El texto recortado con degradado desaparece si se anula el pintado del
   fondo; se devuelve a color plano. */
.lite-mode .vp-hero__title-accent,
.lite-mode .vp-stat__value {
	background-image: none !important;
	-webkit-text-fill-color: hsl(var(--vp-color-primary)) !important;
	color: hsl(var(--vp-color-primary)) !important;
}

.lite-mode .vp-skeleton { background: hsl(var(--vp-color-secondary)) !important; }

/* ──────────────────────────────────────────────────────────────────────────
   13. CONTENIDO EDITORIAL Y BLOQUES
   ────────────────────────────────────────────────────────────────────────── */

.vp-prose { max-width: 50rem; }
.vp-prose > * + * { margin-top: 1.25rem; }
.vp-prose h2 { margin-top: 2.5rem; font-size: 1.75rem; }
.vp-prose h3 { margin-top: 2rem; font-size: 1.25rem; }
.vp-prose ul, .vp-prose ol { padding-left: 1.5rem; }
.vp-prose li + li { margin-top: 0.375rem; }
.vp-prose img { border-radius: var(--vp-radius-lg); }

.vp-prose blockquote {
	margin: 0;
	padding: 0.75rem 1.25rem;
	border-left: 4px solid hsl(var(--vp-color-primary));
	background: hsl(var(--vp-color-card));
	border-radius: 0 var(--vp-radius-md) var(--vp-radius-md) 0;
}

.vp-prose pre {
	padding: 1rem;
	overflow-x: auto;
	background: hsl(var(--vp-color-secondary));
	border-radius: var(--vp-radius-md);
	font-size: 0.875rem;
}

.vp-prose table { width: 100%; border-collapse: collapse; }
.vp-prose th, .vp-prose td { padding: 0.625rem 0.75rem; border: 1px solid hsl(var(--vp-color-border)); text-align: left; }
.vp-prose th { background: hsl(var(--vp-color-secondary)); font-weight: 700; }

/* Las tablas anchas hacen scroll dentro de su caja: el body nunca debe
   desplazarse en horizontal. */
.vp-table-scroll { overflow-x: auto; }

.alignwide { max-width: var(--vp-container-max); margin-inline: auto; }
.alignfull { max-width: none; margin-inline: calc(50% - 50vw); width: 100vw; }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption { font-size: 0.8125rem; color: hsl(var(--vp-color-muted-foreground)); text-align: center; }

.vp-pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 2.5rem; }
.vp-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0 0.625rem;
	border: 1px solid hsl(var(--vp-color-border));
	border-radius: var(--vp-radius-sm);
	color: hsl(var(--vp-color-foreground));
	font-weight: 600;
	text-decoration: none;
}
.vp-pagination .page-numbers.current { background: hsl(var(--vp-color-primary)); color: hsl(var(--vp-color-primary-foreground)); border-color: hsl(var(--vp-color-primary)); }
.vp-pagination .page-numbers:hover { border-color: hsl(var(--vp-color-primary)); text-decoration: none; }

.vp-post-card { display: flex; flex-direction: column; gap: 0.75rem; }
.vp-post-card__thumb { border-radius: var(--vp-radius-lg); overflow: hidden; background: hsl(var(--vp-color-secondary)); }
.vp-post-card__thumb img { display: block; width: 100%; height: auto; }
.vp-post-card__meta { font-size: 0.75rem; color: hsl(var(--vp-color-muted-foreground)); }

.vp-search-form { display: flex; gap: 0.5rem; }
.vp-search-form .vp-input { flex: 1 1 auto; }

.vp-comments { margin-top: 3rem; }
.vp-comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.vp-comment-list .children { list-style: none; margin: 1.25rem 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.vp-comment { padding: 1rem; border: 1px solid hsl(var(--vp-color-border) / 0.5); border-radius: var(--vp-radius-lg); background: hsl(var(--vp-color-card)); }
.vp-comment__meta { font-size: 0.8125rem; color: hsl(var(--vp-color-muted-foreground)); margin-bottom: 0.5rem; }

/* Widgets del área lateral (usada solo en el blog, no en el panel: la app no
   tiene sidebar — los tokens --sidebar-* del original eran código muerto). */
.vp-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.vp-widget { padding: 1.25rem; border: 1px solid hsl(var(--vp-color-border) / 0.5); border-radius: var(--vp-radius-lg); background: hsl(var(--vp-color-card)); }
.vp-widget__title { font-family: var(--vp-font-heading); font-size: 1rem; font-weight: 700; margin: 0 0 0.75rem; }
.vp-widget ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; }

/* Autenticación */
.vp-auth { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem 1rem; }
.vp-auth__card { width: 100%; max-width: 26rem; }
.vp-auth__head { text-align: center; margin-bottom: 1.75rem; }
.vp-auth__title { font-family: var(--vp-font-display); font-size: 1.5rem; font-weight: 900; margin: 0 0 0.375rem; }
.vp-auth__sub { font-size: 0.875rem; color: hsl(var(--vp-color-muted-foreground)); margin: 0; }
.vp-auth__foot { margin-top: 1.5rem; text-align: center; font-size: 0.875rem; color: hsl(var(--vp-color-muted-foreground)); }

/* ── Perfil ───────────────────────────────────────────────────────────────── */

.vp-profile__status { margin: 2rem 0; }
.vp-profile__status .vp-btn { margin-top: 1rem; }

.vp-profile__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }

@media (min-width: 62rem) {
	.vp-profile__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
}

.vp-profile__main { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }

.vp-profile__card { padding: 0; overflow: hidden; }
.vp-profile__card-cover {
	height: 5rem;
	background: linear-gradient(135deg, hsl(var(--vp-color-primary) / 0.25), hsl(210 90% 55% / 0.12));
}
.vp-profile__card-body { padding: 0 1.5rem 1.5rem; margin-top: -2rem; }

.vp-profile__avatar {
	border-radius: var(--vp-radius-full);
	border: 3px solid hsl(var(--vp-color-card));
	display: block;
}

.vp-profile__name { font-size: 1.125rem; font-weight: 800; margin: 0.75rem 0 0.5rem; word-break: break-word; }

.vp-profile__badges { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0 0 0.75rem; }
.vp-badge--primary { background: hsl(var(--vp-color-primary) / 0.15); color: hsl(var(--vp-color-primary)); }
.vp-badge--gold { background: hsl(45 93% 55% / 0.15); color: hsl(45 93% 60%); }
.vp-badge--red { background: hsl(0 72% 55% / 0.15); color: hsl(0 72% 65%); }

.vp-profile__channel { margin: 0 0 1rem; font-size: 0.875rem; word-break: break-all; }
.vp-profile__channel a { color: hsl(var(--vp-color-primary)); }

.vp-profile__xp { margin-bottom: 1.25rem; }
.vp-profile__xp-head { display: flex; justify-content: space-between; font-size: 0.75rem; margin-bottom: 0.375rem; }
.vp-profile__xp-label,
.vp-profile__xp-value { color: hsl(var(--vp-color-muted-foreground)); font-variant-numeric: tabular-nums; }
.vp-profile__xp-track {
	height: 0.5rem;
	border-radius: var(--vp-radius-full);
	background: hsl(var(--vp-color-muted));
	overflow: hidden;
}
.vp-profile__xp-fill {
	height: 100%;
	border-radius: var(--vp-radius-full);
	background: hsl(var(--vp-color-primary));
	transition: width 0.5s ease;
}
.vp-profile__xp-total { font-size: 0.6875rem; color: hsl(var(--vp-color-muted-foreground)); margin: 0.375rem 0 0; }

.vp-profile__stats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.vp-profile__stat { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.875rem; }
.vp-profile__stat-label { color: hsl(var(--vp-color-muted-foreground)); }
.vp-profile__stat-value { font-weight: 700; font-variant-numeric: tabular-nums; }

.vp-profile__section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}
.vp-profile__section-head .vp-card__title { margin: 0; }

.vp-profile__list { margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.vp-profile__row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem; }
.vp-profile__row dt { color: hsl(var(--vp-color-muted-foreground)); margin: 0; }
.vp-profile__row dd { margin: 0; text-align: right; word-break: break-word; }

.vp-profile__form { display: flex; flex-direction: column; gap: 0.25rem; }
.vp-profile__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }

/* Mensajes de las islas: mismo tono que los errores de campo. */
.vp-form__error { color: hsl(var(--vp-color-error)); font-size: 0.8125rem; margin: 0.5rem 0 0; }
.vp-form__note { color: hsl(var(--vp-color-success)); font-size: 0.8125rem; margin: 0.5rem 0 0; }

/* ── Tarjeta de Kick ──────────────────────────────────────────────────────── */

.vp-kick__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.125rem 0.5rem;
	border-radius: var(--vp-radius-full);
	font-size: 0.6875rem;
	font-weight: 700;
	white-space: nowrap;
}
.vp-kick__badge--ok { background: hsl(var(--vp-color-primary) / 0.15); color: hsl(var(--vp-color-primary)); }
.vp-kick__badge--warn { background: hsl(var(--vp-color-warning) / 0.18); color: hsl(var(--vp-color-warning)); }

.vp-kick__channel { margin: 0.75rem 0; font-size: 0.875rem; word-break: break-all; }
.vp-kick__channel a { color: hsl(var(--vp-color-primary)); }

.vp-kick__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.vp-kick__confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.vp-kick__confirm-text { font-size: 0.8125rem; color: hsl(var(--vp-color-muted-foreground)); }

/* Verde de marca de Kick sobre texto negro: es su identidad, no la nuestra. */
.vp-btn--kick { background: #53fc18; color: #000; border-color: #53fc18; font-weight: 700; }
.vp-btn--kick:hover:not(:disabled) { background: #45e014; border-color: #45e014; }

/* ── Privacidad ───────────────────────────────────────────────────────────── */

.vp-privacy__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0;
}
.vp-privacy__row .vp-card__desc { flex: 1 1 14rem; margin: 0; }
.vp-privacy__row--danger { border-top: 1px solid hsl(var(--vp-color-border)); }

.vp-privacy__delete {
	margin-top: 1rem;
	padding: 1rem;
	border: 1px solid hsl(var(--vp-color-error) / 0.4);
	border-radius: var(--vp-radius-lg);
	background: hsl(var(--vp-color-error) / 0.05);
}
.vp-privacy__warning { font-size: 0.8125rem; font-weight: 600; margin: 0 0 1rem; color: hsl(var(--vp-color-error)); }
.vp-privacy__legal { margin: 1rem 0 0; font-size: 0.75rem; color: hsl(var(--vp-color-muted-foreground)); }

/* Botón ocupado: el cursor y la opacidad avisan de que ya se está enviando. */
.vp-btn[data-loading="true"] { opacity: 0.65; cursor: progress; }

/* ── Cartera, ranking y avisos ─────────────────────────────────────────────
   Componentes de las tres pantallas conectadas a la API: filas de movimiento,
   posiciones del ranking y avisos. Las tres comparten la misma rejilla de
   "icono + cuerpo + lateral" porque son la misma forma de lista; separarlas en
   tres bloques de CSS distintos solo produciría divergencias visuales. */

.vp-tx,
.vp-notif,
.vp-rank {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	border-top: 1px solid hsl(var(--vp-color-border) / 0.4);
}

.vp-tx:first-child,
.vp-notif:first-child,
.vp-rank:first-child { border-top: 0; }

.vp-tx__body,
.vp-notif__body,
.vp-rank__body { flex: 1 1 auto; min-width: 0; }

.vp-tx__reason,
.vp-notif__title,
.vp-rank__name {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.vp-tx__date,
.vp-notif__date,
.vp-notif__message,
.vp-rank__level {
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	color: hsl(var(--vp-color-muted-foreground));
	overflow-wrap: anywhere;
}

.vp-tx__side { text-align: right; flex: 0 0 auto; }

.vp-tx__amount {
	margin: 0 0 0.25rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* El signo (+/−) acompaña siempre al color: el importe sigue siendo legible
   con daltonismo o en alto contraste. */
.vp-tx__amount--primary { color: hsl(var(--vp-color-primary)); }
.vp-tx__amount--gold    { color: hsl(var(--vp-color-warning)); }
.vp-tx__amount--blue    { color: hsl(210 90% 60%); }
.vp-tx__amount--red     { color: hsl(0 72% 55%); }

.vp-card--flush { padding: 0; overflow: hidden; }
.vp-card--flush .vp-card__header { padding: 1rem; border-bottom: 1px solid hsl(var(--vp-color-border) / 0.4); }
.vp-card--flush .vp-card__header .vp-card__title { margin: 0; }

.vp-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border-top: 1px solid hsl(var(--vp-color-border) / 0.4);
}

.vp-pager__status {
	font-size: 0.75rem;
	color: hsl(var(--vp-color-muted-foreground));
	font-variant-numeric: tabular-nums;
}

.vp-card--stat { text-align: left; }
.vp-stat__value--positive { color: hsl(var(--vp-color-primary)); }
.vp-stat__value--negative { color: hsl(0 72% 55%); }

.vp-note {
	margin: 0.5rem 0 1.5rem;
	font-size: 0.6875rem;
	color: hsl(var(--vp-color-muted-foreground));
}

/* Esqueletos de lista: alto fijo para que la sustitución por las filas reales
   no desplace el contenido de abajo (CLS). */
.vp-skeleton--text { display: block; width: 6ch; height: 1.5rem; }
.vp-skeleton--avatar { flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: var(--vp-radius-md); }
.vp-skeleton--line { flex: 1 1 auto; height: 2.25rem; }

/* ── Ranking ── */

.vp-rank { align-items: center; }

.vp-rank__position {
	flex: 0 0 auto;
	min-width: 2.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: hsl(var(--vp-color-muted-foreground));
}

.vp-rank__stats { display: flex; gap: 1rem; flex: 0 0 auto; }
.vp-rank__stat { display: flex; flex-direction: column; }
.vp-rank__stat-label { font-size: 0.625rem; color: hsl(var(--vp-color-muted-foreground)); text-transform: uppercase; }
.vp-rank__stat-value { font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.vp-podium { text-align: center; }
.vp-podium__medal { font-size: 2.5rem; line-height: 1; margin: 0 0 0.5rem; }
.vp-podium__name { margin: 0; font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }
.vp-podium .vp-rank__stats { justify-content: center; margin-top: 0.75rem; }

.vp-podium--1 { border-color: hsl(45 90% 55% / 0.45); }
.vp-podium--2 { border-color: hsl(0 0% 65% / 0.45); }
.vp-podium--3 { border-color: hsl(30 90% 55% / 0.45); }

@media (max-width: 40rem) {
	.vp-rank { flex-wrap: wrap; }
	.vp-rank__stats { width: 100%; justify-content: space-between; }
}

/* ── Avisos ── */

/* Los no leídos se distinguen por fondo Y por la barra lateral: solo con el
   fondo, la diferencia desaparece en modo alto contraste. */
.vp-notif--unread {
	background: hsl(var(--vp-color-primary) / 0.06);
	box-shadow: inset 3px 0 0 hsl(var(--vp-color-primary));
}

.vp-notif__title { text-decoration: none; color: inherit; }
a.vp-notif__title:hover { text-decoration: underline; }

.vp-push {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.vp-bell { position: relative; }

.vp-bell__count {
	position: absolute;
	top: -0.25rem;
	right: -0.25rem;
	min-width: 1.25rem;
	justify-content: center;
	padding: 0 0.25rem;
	background: hsl(0 72% 50%);
	color: #fff;
	font-variant-numeric: tabular-nums;
}

/* ── Alta guiada ──────────────────────────────────────────────────────────── */

.vp-auth__card--wide { max-width: 32rem; }

.vp-onboarding__status { padding: 1rem 0; }
.vp-onboarding__form { display: flex; flex-direction: column; gap: 0.25rem; }

.vp-onboarding__locked {
	font-size: 0.75rem;
	color: hsl(var(--vp-color-primary));
	margin: -0.25rem 0 0.75rem;
}

/* Reutiliza el envoltorio .vp-checkbox que el tema ya define (flex + tamaño del
   input); aquí sólo se ajusta el tono del texto legal, que es secundario. */
.vp-onboarding__terms { margin: 0.75rem 0; }
.vp-onboarding__terms-label { font-size: 0.8125rem; line-height: 1.6; color: hsl(var(--vp-color-muted-foreground)); }
.vp-onboarding__terms-label a { color: hsl(var(--vp-color-primary)); }

/* Un campo de sólo lectura debe VERSE de sólo lectura. */
.vp-input[readonly] { opacity: 0.7; cursor: not-allowed; }

/* ── Pantallas de acceso: fondo, lockup y tarjeta ─────────────────────────── */

.vp-auth { position: relative; overflow: hidden; }

.vp-auth__backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* Rejilla tenue con desvanecido radial, como en el original. */
.vp-auth__grid {
	position: absolute;
	inset: 0;
	opacity: 0.06;
	background-image:
		linear-gradient(hsl(var(--vp-color-primary) / 0.5) 1px, transparent 1px),
		linear-gradient(90deg, hsl(var(--vp-color-primary) / 0.5) 1px, transparent 1px);
	background-size: 44px 44px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000, transparent 75%);
}

.vp-auth__blob { position: absolute; border-radius: var(--vp-radius-full); filter: blur(120px); }
.vp-auth__blob--one {
	top: -8rem;
	left: 25%;
	width: 32rem;
	height: 32rem;
	background: hsl(var(--vp-color-primary) / 0.10);
	animation: vp-auth-drift-a 12s ease-in-out infinite;
}
.vp-auth__blob--two {
	bottom: 0;
	right: 25%;
	width: 28rem;
	height: 28rem;
	background: hsl(152 76% 45% / 0.10);
	animation: vp-auth-drift-b 14s ease-in-out infinite 1s;
}

.vp-auth__hairline {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, hsl(var(--vp-color-primary) / 0.4), transparent);
}

@keyframes vp-auth-drift-a {
	0%, 100% { transform: translate(0, 0); opacity: 0.5; }
	50%      { transform: translate(60px, 40px); opacity: 0.8; }
}
@keyframes vp-auth-drift-b {
	0%, 100% { transform: translate(0, 0); opacity: 0.4; }
	50%      { transform: translate(-50px, -30px); opacity: 0.7; }
}

/* Sin movimiento para quien lo ha pedido: el fondo se queda quieto, no desaparece. */
@media (prefers-reduced-motion: reduce) {
	.vp-auth__blob { animation: none; }
}

.vp-auth__card { position: relative; z-index: 1; }

/* Lockup vertical: distintivo, wordmark, separador, título. */
.vp-auth__lockup { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 2rem; }

.vp-auth__badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	margin-bottom: 1.25rem;
	border-radius: 1rem;
	border: 1px solid hsl(var(--vp-color-primary) / 0.3);
	background: linear-gradient(135deg, hsl(var(--vp-color-primary) / 0.25), hsl(var(--vp-color-primary) / 0.10), transparent);
	box-shadow:
		inset 0 1px 0 0 hsl(142 90% 78% / 0.45),
		0 14px 34px -10px hsl(var(--vp-color-primary) / 0.55);
}
.vp-auth__badge-logo { max-width: 40px; height: auto; }

.vp-auth__wordmark {
	font-family: var(--vp-font-display);
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: 0.35em;
	padding-left: 0.35em;
	text-transform: uppercase;
	color: hsl(var(--vp-color-primary));
	text-shadow: 0 0 16px hsl(var(--vp-color-primary) / 0.6);
}

.vp-auth__divider {
	display: block;
	width: 6rem;
	height: 1px;
	margin: 1.25rem 0 0.25rem;
	background: linear-gradient(90deg, transparent, hsl(var(--vp-color-primary) / 0.5), transparent);
}

.vp-auth__lockup .vp-auth__title { margin-top: 1rem; }

/* Borde degradado de la tarjeta: un pseudo-elemento hace de marco de 1px, que
   es lo que en el original conseguía el envoltorio con padding de 1px. */
.vp-auth .vp-card {
	position: relative;
	background: hsl(var(--vp-color-card) / 0.85);
	backdrop-filter: blur(16px);
	box-shadow: 0 30px 80px -30px hsl(var(--vp-color-primary) / 0.35);
}
.vp-auth .vp-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(180deg, hsl(var(--vp-color-primary) / 0.4), hsl(var(--vp-color-border) / 0.4), transparent);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
}