/*
 * Sistema de diseño Venues: base noche con brillo iridiscente (paleta Vyte).
 * Mobile first. Las secciones se arman en landing.css y el formulario en formulario.css.
 * Regla: nunca texto largo directo sobre el degradado iridiscente; va sobre noche, perla o vidrio.
 */

/* Ángulo animable para bordes y brillos cónicos */
@property --vevy-angulo {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

:root {
	/* Marca Vyte */
	--vevy-azul: #0496eb;
	--vevy-magenta: #ff00b0;
	--vevy-amarillo: #ffd200;
	--vevy-verde: #00c963;

	/* Tonos perla de la iridiscencia */
	--vevy-menta: #7ff5d6;
	--vevy-cielo: #8fd3ff;
	--vevy-lila: #b79cff;
	--vevy-rosa: #ff8fd8;
	--vevy-durazno: #ffc9a8;

	/* Superficies */
	--vevy-noche: #0a0911;
	--vevy-noche-2: #13111d;
	--vevy-noche-3: #1d1a2a;
	--vevy-perla: #f8f6fc;
	--vevy-perla-2: #efebf7;
	--vevy-blanco: #ffffff;
	--vevy-vidrio: rgba(255, 255, 255, 0.06);
	--vevy-vidrio-borde: rgba(255, 255, 255, 0.12);

	/* Texto */
	--vevy-tinta: #17141f;
	--vevy-tinta-2: #5a556d;
	--vevy-claro: #f4f2fa;
	--vevy-claro-2: #b9b4cb;
	--vevy-linea: rgba(23, 20, 31, 0.1);
	--vevy-linea-noche: rgba(255, 255, 255, 0.1);

	/* Estados */
	--vevy-whatsapp: #25d366;
	--vevy-error: #e5484d;
	--vevy-exito: #12a150;

	/* Degradados iridiscentes */
	--vevy-iri: linear-gradient(115deg, var(--vevy-menta) 0%, var(--vevy-cielo) 18%, var(--vevy-azul) 34%, var(--vevy-lila) 50%, var(--vevy-magenta) 68%, var(--vevy-rosa) 84%, var(--vevy-durazno) 100%);
	--vevy-iri-perla: linear-gradient(115deg, #e4fff7 0%, #e2f2ff 25%, #eee6ff 50%, #ffe4f5 75%, #fff0e4 100%);
	--vevy-iri-conico: conic-gradient(from var(--vevy-angulo), var(--vevy-menta), var(--vevy-azul), var(--vevy-lila), var(--vevy-magenta), var(--vevy-durazno), var(--vevy-menta));

	/* Tipografía */
	--vevy-fuente: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--vevy-fuente-acento: "Instrument Serif", Georgia, "Times New Roman", serif;
	--vevy-t-xs: 0.8125rem;
	--vevy-t-s: 0.9375rem;
	--vevy-t-m: 1rem;
	--vevy-t-l: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	--vevy-t-xl: clamp(1.375rem, 1.15rem + 1.1vw, 2rem);
	--vevy-t-2xl: clamp(1.875rem, 1.3rem + 2.8vw, 3.25rem);
	--vevy-t-3xl: clamp(2.375rem, 1.4rem + 4.8vw, 4.75rem);
	--vevy-interlineado: 1.6;

	/* Espacios */
	--vevy-e-1: 0.25rem;
	--vevy-e-2: 0.5rem;
	--vevy-e-3: 0.75rem;
	--vevy-e-4: 1rem;
	--vevy-e-5: 1.5rem;
	--vevy-e-6: 2rem;
	--vevy-e-7: 3rem;
	--vevy-e-8: 4rem;
	--vevy-gutter: clamp(1rem, 4vw, 2rem);
	--vevy-ancho: 72rem;
	--vevy-seccion: clamp(4rem, 10vw, 7.5rem);

	/* Formas y profundidad */
	--vevy-r-s: 0.625rem;
	--vevy-r-m: 1rem;
	--vevy-r-l: 1.5rem;
	--vevy-r-xl: 2rem;
	--vevy-r-pill: 999px;
	--vevy-sombra: 0 1px 2px rgba(10, 9, 17, 0.06), 0 10px 30px -12px rgba(10, 9, 17, 0.22);
	--vevy-sombra-alta: 0 2px 6px rgba(10, 9, 17, 0.08), 0 30px 60px -20px rgba(10, 9, 17, 0.35);
	--vevy-brillo: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 70px -24px rgba(183, 156, 255, 0.55);
	--vevy-transicion: 220ms cubic-bezier(0.2, 0.7, 0.2, 1);

	/* Grano sutil para superficies noche */
	--vevy-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 5rem;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, ul, ol, dl, dd {
	margin: 0;
}

body {
	min-height: 100vh;
	background: var(--vevy-noche);
	color: var(--vevy-claro);
	font-family: var(--vevy-fuente);
	font-size: var(--vevy-t-m);
	line-height: var(--vevy-interlineado);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img,
video,
svg,
picture {
	display: block;
	max-width: 100%;
	height: auto;
}

ul[class],
ol[class] {
	list-style: none;
	padding: 0;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

h1, h2, h3, h4 {
	line-height: 1.12;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

:focus-visible {
	outline: 2px solid var(--vevy-lila);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection {
	background: var(--vevy-lila);
	color: var(--vevy-noche);
}

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

/* Layout */
.vevy-contenedor {
	width: 100%;
	max-width: calc(var(--vevy-ancho) + 2 * var(--vevy-gutter));
	margin-inline: auto;
	padding-inline: var(--vevy-gutter);
}

.vevy-seccion {
	position: relative;
	padding-block: var(--vevy-seccion);
	isolation: isolate;
}

.vevy-seccion--noche {
	background: var(--vevy-noche);
	color: var(--vevy-claro);
}

.vevy-seccion--noche::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--vevy-grano);
	opacity: 0.05;
	pointer-events: none;
}

.vevy-seccion--perla {
	background: var(--vevy-perla);
	color: var(--vevy-tinta);
}

.vevy-seccion--iri-perla {
	background: var(--vevy-iri-perla);
	color: var(--vevy-tinta);
}

/* Encabezados de sección */
.vevy-cabecera {
	display: grid;
	gap: var(--vevy-e-4);
	max-width: 46rem;
	margin-bottom: var(--vevy-e-7);
}

.vevy-cabecera--centro {
	margin-inline: auto;
	text-align: center;
	justify-items: center;
}

.vevy-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--vevy-e-2);
	width: fit-content;
	padding: 0.375rem 0.875rem;
	border-radius: var(--vevy-r-pill);
	font-size: var(--vevy-t-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: linear-gradient(var(--vevy-noche-2), var(--vevy-noche-2)) padding-box, var(--vevy-iri) border-box;
	border: 1px solid transparent;
	color: var(--vevy-claro);
}

.vevy-seccion--perla .vevy-eyebrow,
.vevy-seccion--iri-perla .vevy-eyebrow {
	background: linear-gradient(var(--vevy-blanco), var(--vevy-blanco)) padding-box, var(--vevy-iri) border-box;
	color: var(--vevy-tinta);
}

.vevy-titulo {
	font-size: var(--vevy-t-2xl);
}

.vevy-titulo-hero {
	font-size: var(--vevy-t-3xl);
	font-weight: 800;
	letter-spacing: -0.035em;
}

.vevy-lead {
	font-size: var(--vevy-t-l);
	color: var(--vevy-claro-2);
}

.vevy-seccion--perla .vevy-lead,
.vevy-seccion--iri-perla .vevy-lead {
	color: var(--vevy-tinta-2);
}

/* Palabra en serif itálica para dar elegancia */
.vevy-acento {
	font-family: var(--vevy-fuente-acento);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
}

/* Texto iridiscente animado (solo títulos cortos) */
.vevy-iri-texto {
	background: var(--vevy-iri);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: vevy-desliza 8s ease-in-out infinite alternate;
}

@keyframes vevy-desliza {
	from { background-position: 0% 50%; }
	to { background-position: 100% 50%; }
}

@keyframes vevy-gira {
	to { --vevy-angulo: 360deg; }
}

/* Botones */
.vevy-btn {
	--vevy-btn-alto: 3.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vevy-e-2);
	min-height: var(--vevy-btn-alto);
	padding: 0 1.5rem;
	border: 0;
	border-radius: var(--vevy-r-pill);
	font-size: var(--vevy-t-s);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	transition: transform var(--vevy-transicion), box-shadow var(--vevy-transicion), background-position 600ms ease;
	-webkit-tap-highlight-color: transparent;
}

.vevy-btn:active {
	transform: scale(0.97);
}

.vevy-btn svg {
	width: 1.25em;
	height: 1.25em;
	flex: none;
}

.vevy-btn--primario {
	background: var(--vevy-iri);
	background-size: 160% 100%;
	color: var(--vevy-noche);
	box-shadow: var(--vevy-brillo);
}

.vevy-btn--primario:hover {
	background-position: 100% 50%;
	transform: translateY(-2px);
}

.vevy-btn--vidrio {
	background: var(--vevy-vidrio);
	color: var(--vevy-claro);
	box-shadow: inset 0 0 0 1px var(--vevy-vidrio-borde);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.vevy-btn--vidrio:hover {
	background: rgba(255, 255, 255, 0.12);
}

.vevy-btn--oscuro {
	background: var(--vevy-noche);
	color: var(--vevy-claro);
}

.vevy-btn--oscuro:hover {
	box-shadow: var(--vevy-brillo);
	transform: translateY(-2px);
}

.vevy-btn--whatsapp {
	background: var(--vevy-whatsapp);
	color: #062b14;
}

.vevy-btn--bloque {
	width: 100%;
}

/* Superficies */
.vevy-tarjeta {
	position: relative;
	padding: var(--vevy-e-5);
	border-radius: var(--vevy-r-l);
	background: var(--vevy-blanco);
	color: var(--vevy-tinta);
	box-shadow: var(--vevy-sombra);
}

.vevy-vidrio {
	position: relative;
	padding: var(--vevy-e-5);
	border-radius: var(--vevy-r-l);
	background: var(--vevy-vidrio);
	box-shadow: inset 0 0 0 1px var(--vevy-vidrio-borde);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
}

/* Borde iridiscente que gira (en tarjetas destacadas) */
.vevy-iri-borde {
	position: relative;
	isolation: isolate;
}

.vevy-iri-borde::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	padding: 1px;
	border-radius: inherit;
	background: var(--vevy-iri-conico);
	-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 exclude, linear-gradient(#000 0 0);
	animation: vevy-gira 6s linear infinite;
	pointer-events: none;
}

/* Brillo de lámina que sigue el puntero: main.js actualiza --mx y --my */
.vevy-foil {
	--mx: 50%;
	--my: 50%;
	position: relative;
	overflow: hidden;
}

.vevy-foil::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.35), transparent 40%),
		var(--vevy-iri);
	background-size: 100% 100%, 300% 300%;
	background-position: 0 0, var(--mx) var(--my);
	mix-blend-mode: soft-light;
	opacity: 0;
	transition: opacity var(--vevy-transicion);
	pointer-events: none;
}

.vevy-foil:hover::before,
.vevy-foil.is-activo::before {
	opacity: 0.6;
}

/* Orbes difuminados de fondo */
.vevy-orbe {
	position: absolute;
	z-index: -1;
	width: min(80vw, 36rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--vevy-iri-conico);
	filter: blur(70px);
	opacity: 0.45;
	animation: vevy-gira 18s linear infinite, vevy-flota 14s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes vevy-flota {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to { transform: translate3d(4%, -6%, 0) scale(1.08); }
}

/* Chips */
.vevy-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--vevy-e-2);
	padding: 0.4rem 0.85rem;
	border-radius: var(--vevy-r-pill);
	font-size: var(--vevy-t-xs);
	font-weight: 600;
	background: var(--vevy-vidrio);
	box-shadow: inset 0 0 0 1px var(--vevy-vidrio-borde);
}

.vevy-seccion--perla .vevy-chip {
	background: var(--vevy-blanco);
	box-shadow: inset 0 0 0 1px var(--vevy-linea);
}

/* Aparición al hacer scroll: main.js agrega .is-visible */
.vevy-revelar {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--vevy-retraso, 0ms);
}

.vevy-revelar.is-visible {
	opacity: 1;
	transform: none;
}

.no-js .vevy-revelar {
	opacity: 1;
	transform: none;
}

/* Rejillas */
.vevy-rejilla {
	display: grid;
	gap: var(--vevy-e-4);
}

@media (min-width: 40rem) {
	.vevy-rejilla--2,
	.vevy-rejilla--3,
	.vevy-rejilla--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.vevy-rejilla { gap: var(--vevy-e-5); }
	.vevy-rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vevy-rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Movimiento reducido: degradados quietos, sin brillos ni apariciones */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.vevy-revelar {
		opacity: 1;
		transform: none;
	}
}