/* ==========================================================================
   Página de Talleres · "Taller de Velas — Edición Especial Cumpleaños"
   Consume los tokens del sistema de diseño. Se auto-encola vía glob.
   Estructura: hero · intro · grid de 3 paquetes · personalización · CTA.
   ========================================================================== */

.vv-taller {
	background: var(--cream);
}

/* --- Hero de sección ------------------------------------------------------ */
.vv-taller-hero {
	/* Degradado cálido oscuro de marca, como el hero de la tienda. */
	background: linear-gradient(135deg, #2C2620 0%, #5A4A38 55%, var(--gold-800) 100%);
	color: var(--text-on-brand);
	text-align: center;
}

.vv-taller-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	padding-block: var(--space-20);
}

.vv-taller-hero__eyebrow {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--gold-300);
}

.vv-taller-hero__title {
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	font-size: var(--text-4xl);
	line-height: 1.04;
	color: #fff;
	margin: 0;
}

.vv-taller-hero__sub {
	display: block;
	font-size: var(--text-2xl);
	font-weight: var(--fw-medium);
	color: var(--gold-200);
	margin-top: var(--space-2);
}

.vv-taller-hero__script {
	margin: var(--space-2) 0 0;
	font-family: var(--font-script);
	font-weight: var(--fw-bold);
	font-size: var(--text-3xl);
	line-height: 1.1;
	color: var(--gold-300);
}

/* --- Intro ---------------------------------------------------------------- */
.vv-taller-intro {
	padding-block: var(--space-16) var(--space-8);
	text-align: center;
}

.vv-taller-intro__text {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	color: var(--ink-600);
}

/* --- Sección de paquetes -------------------------------------------------- */
.vv-taller-paquetes {
	padding-block: var(--space-8) var(--space-16);
}

.vv-paquetes-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	align-items: start;
}

/* --- Tarjeta de paquete --------------------------------------------------- */
.vv-paquete {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--white);
	border: 1px solid var(--line-warm);
	border-radius: var(--radius-lg);
	padding: var(--space-8) var(--space-6) var(--space-6);
	box-shadow: var(--shadow-sm);
	transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.vv-paquete:hover {
	transform: var(--hover-lift);
	box-shadow: var(--shadow-md);
}

/* Paquete destacado: borde y acento terracota + ligera elevación. */
.vv-paquete--featured {
	border: 1.5px solid var(--terra-600);
	box-shadow: var(--shadow-md);
}

/* Etiqueta "Más completo" sobre el borde superior. */
.vv-paquete__tag {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--terra-600);
	color: #fff;
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: var(--text-2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 6px 18px;
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-sm);
	white-space: nowrap;
}

.vv-paquete__head {
	text-align: center;
	padding-bottom: var(--space-5);
	margin-bottom: var(--space-5);
	border-bottom: 1px solid var(--line);
}

.vv-paquete__num {
	display: block;
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--gold-600);
	margin-bottom: var(--space-2);
}

.vv-paquete__name {
	margin: 0 0 var(--space-3);
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	font-size: var(--text-xl);
	line-height: 1.1;
	color: var(--ink-900);
}

.vv-paquete--featured .vv-paquete__name { color: var(--terra-700); }

.vv-paquete__price {
	display: inline-block;
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: var(--text-lg);
	color: var(--ink-900);
}

.vv-paquete__base {
	margin: 0 0 var(--space-4);
	font-family: var(--font-serif-italic);
	font-style: italic;
	font-size: var(--text-sm);
	color: var(--ink-500);
}

/* Listado de lo que incluye, con palomita terracota. */
.vv-paquete__list {
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: 0;
	flex: 1 1 auto;
}

.vv-paquete__list li {
	position: relative;
	padding-left: var(--space-6);
	margin-bottom: var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--ink-700);
}

.vv-paquete__list li::before {
	content: "✦";
	position: absolute;
	left: 0;
	top: 0;
	font-size: var(--text-xs);
	line-height: 1.6;
	color: var(--terra-600);
}

.vv-paquete--featured .vv-paquete__list li::before { color: var(--terra-600); }

/* El CTA queda anclado al fondo de la tarjeta gracias al flex. */
.vv-paquete__cta {
	width: 100%;
	margin-top: auto;
}

/* Nota bajo los paquetes. */
.vv-taller-note {
	max-width: 720px;
	margin: var(--space-12) auto 0;
	text-align: center;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--ink-500);
}

/* --- Personalización ------------------------------------------------------ */
.vv-taller-perso {
	background: var(--sage-100);
	border-block: 1px solid var(--sage-200);
}

.vv-taller-perso__inner {
	text-align: center;
	padding-block: var(--space-16);
}

.vv-taller-perso__sparkle {
	display: block;
	font-size: var(--text-2xl);
	color: var(--sage-600);
	margin-bottom: var(--space-3);
}

.vv-taller-perso__title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	font-size: var(--text-2xl);
	line-height: 1.1;
	color: var(--ink-900);
}

.vv-taller-perso__text {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	color: var(--ink-600);
}

/* --- CTA final ------------------------------------------------------------ */
.vv-taller-cta {
	padding-block: var(--space-20);
	text-align: center;
}

.vv-taller-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
}

.vv-taller-cta__script {
	margin: 0;
	font-family: var(--font-script);
	font-weight: var(--fw-bold);
	font-size: var(--text-2xl);
	line-height: 1.1;
	color: var(--sage-700);
}

.vv-taller-cta__title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	font-size: var(--text-2xl);
	line-height: 1.1;
	color: var(--ink-900);
}

/* --- Responsivo ----------------------------------------------------------- */
@media (max-width: 920px) {
	/* 3 → 2 columnas en tablet. */
	.vv-paquetes-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	/* 2 → 1 columna en móvil. */
	.vv-paquetes-grid {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.vv-taller-hero__inner { padding-block: var(--space-16); }
	.vv-taller-hero__title { font-size: var(--text-3xl); }
	.vv-taller-hero__sub { font-size: var(--text-xl); }
	.vv-taller-hero__script { font-size: var(--text-2xl); }

	.vv-taller-intro { padding-top: var(--space-12); }
	.vv-taller-perso__inner,
	.vv-taller-cta { padding-block: var(--space-12); }
}