/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* === Paleta (aprox. Tailwind Neutral + Amarillo) === */
:root {
	--va-bg: #0f0f0f;
	/* ~neutral-950 */
	--va-fg: #f5f5f5;
	/* ~neutral-100 */
	--va-muted: #d4d4d4;
	/* ~neutral-300 */
	--va-border: rgba(255, 255, 255, .08);
	--va-border-hover: rgba(255, 255, 255, .14);
	--va-card: rgba(255, 255, 255, .03);
	/* ~bg-neutral-850/50 */
	--va-card-hover: rgba(255, 255, 255, .05);
	/* ~hover:bg-neutral-800 */
	--va-badge-border: rgba(255, 255, 255, .12);
	--va-badge-bg: rgba(255, 255, 255, .04);
	--va-wa: #25D366;
	/* WhatsApp green */
	/* Tema (si existen en tu theme, se usan; si no, fallback exacto al Tailwind amarillo) */
	--va-accent: var(--cnvs-themecolor, #facc15);
	/* yellow-400 */
	--va-accent-rgb: var(--cnvs-themecolor-rgb, 250, 204, 21);
}

/* === Contenedor general (hereda del tema) === */
.va-contact {
	color: var(--va-fg);
}

.va-contact .container {
	/* no cambiamos padding del tema */
}

/* === Hero === */
.va-hero {
	text-align: center;
	margin-bottom: 3rem;
}

.va-title {
	font-weight: 600;
	letter-spacing: -0.02em;
	font-size: clamp(2rem, 3.5vw, 3rem);
	/* 32 → 48 */
	margin: 0 0 .75rem 0;
}

.va-subtitle {
	color: var(--va-muted);
	max-width: 42rem;
	margin: 0 auto;
	font-size: 1.0625rem;
	/* ~17px */
}

/* === Card (tile) === */
.va-card {
	border: 1px solid var(--va-border);
	border-radius: 16px;
	/* rounded-2xl */
	padding: 1.25rem 1.25rem 1.35rem;
	background: var(--va-card);
	transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.va-card:hover {
	background: var(--va-card-hover);
	border-color: var(--va-border-hover);
	transform: translateY(-2px);
}

.va-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .35rem;
}

.va-card__title {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: .2px;
	margin: 0;
}

.va-icon {
	display: inline-flex;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 999px;
	color: var(--va-fg);
}

.va-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .72rem;
	padding: .25rem .6rem;
	border-radius: 999px;
	border: 1px solid var(--va-badge-border);
	color: rgba(255, 255, 255, .75);
	background: var(--va-badge-bg);
}

.va-muted {
	color: var(--va-muted);
}

/* === Botones === */
.va-btn {
	--_py: .875rem;
	--_px: 1rem;
	--_radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: var(--_py) var(--_px);
	border-radius: var(--_radius);
	text-decoration: none;
	font-weight: 600;
	line-height: 1;
	transition: filter .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.va-btn.w-100 {
	width: 100%;
}

.va-btn--primary {
	background: var(--va-accent);
	color: #111 !important;
	border: 0;
}

.va-btn--primary:hover {
	filter: brightness(.95);
}

.va-btn--outline {
	color: var(--va-fg);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .16);
}

.va-btn--outline:hover {
	background: rgba(var(--va-accent-rgb), .15);
	border-color: rgba(var(--va-accent-rgb), .35);
}

.va-btn--wa {
	background: var(--va-wa);
	color: #111 !important;
	border: 0;
}

.va-btn--wa:hover {
	filter: brightness(.95);
}

/* === Nota final === */
.va-footnote {
	text-align: center;
	color: var(--va-muted);
	font-size: .9rem;
	margin-top: 1.75rem;
}

/* === Accesibilidad (reduce motion) === */
@media (prefers-reduced-motion: reduce) {
	.va-card {
		transition: none;
	}

	.va-btn {
		transition: none;
	}
}