/* ═══════════════════════════════════════════════════════════════════
 * Wapu Perfumery v1.6.0 — Render frontend de "Características olfativas"
 *
 * Rediseño visual estilo Glossier / Drunk Elephant — cápsula pastel,
 * tipografía Manrope, paleta de variables CSS, barras con gradiente.
 *
 * Scope: TODO el CSS está bajo `.wapu-perf-meta` (sin selectores globales).
 * Las variables de paleta también se exponen como custom properties
 * scoped al bloque, así NO se filtran al resto del theme.
 * ═══════════════════════════════════════════════════════════════════ */

.wapu-perf-meta {
	/* paleta glossier — scoped al bloque */
	--peach:#ffdcc7;
	--peach-strong:#ff9b6e;
	--rose:#ffd4dd;
	--rose-strong:#ff8da3;
	--mint:#d4f5e9;
	--mint-strong:#5dc9a3;
	--lavender:#e8defc;
	--lavender-strong:#a78bf0;
	--butter:#fff3c7;
	--butter-strong:#f0c14b;
	--sky:#d4e8ff;
	--sky-strong:#6ba7e8;

	--wapu-perf-ink:#1a1a1a;
	--wapu-perf-ink-2:rgba(26,26,26,.72);
	--wapu-perf-ink-3:rgba(26,26,26,.5);
	--wapu-perf-ink-4:rgba(26,26,26,.12);

	margin: 32px 0;
	padding: 28px;
	background: #fafaf7;
	border-radius: 20px;
	font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
	color: var(--wapu-perf-ink);
	font-size: 14px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
.wapu-perf-meta,
.wapu-perf-meta *,
.wapu-perf-meta *::before,
.wapu-perf-meta *::after { box-sizing: border-box; }

/* ─── Title ─────────────────────────────────────────────────────── */
.wapu-perf-meta__title {
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--wapu-perf-ink-3);
	font-weight: 700;
	margin: 0 0 20px;
}

/* ─── Línea de datos discretos (Año · Concentración · Perfumista) ─ */
.wapu-perf-meta__line {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin-bottom: 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--wapu-perf-ink-4);
}
.wapu-perf-meta__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 80px;
}
.wapu-perf-meta__label {
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wapu-perf-ink-3);
	font-weight: 700;
}
.wapu-perf-meta__value {
	font-size: 18px;
	font-weight: 800;
	color: var(--wapu-perf-ink);
	letter-spacing: -.01em;
	line-height: 1.2;
}

/* ─── Barras (Longevidad · Estela · Intensidad) ─────────────────── */
.wapu-perf-meta__bars {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.wapu-perf-meta__bar {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wapu-perf-meta__bar-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.wapu-perf-meta__bar-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 800;
	color: var(--wapu-perf-ink);
	letter-spacing: -.01em;
}
.wapu-perf-meta__bar-emoji {
	font-size: 18px;
	line-height: 1;
}
.wapu-perf-meta__bar-score {
	font-size: 13px;
	font-weight: 700;
	color: var(--wapu-perf-ink-2);
}

.wapu-perf-meta__bar-track {
	position: relative;
	height: 10px;
	background: #fff;
	border-radius: 999px;
	overflow: hidden;
}
.wapu-perf-meta__bar-fill {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: 999px;
	transition: width .6s ease;
	background: var(--wapu-perf-ink);
}
.wapu-perf-meta__bar--long .wapu-perf-meta__bar-fill {
	background: linear-gradient(90deg, var(--mint) 0%, var(--sky-strong) 100%);
}
.wapu-perf-meta__bar--est .wapu-perf-meta__bar-fill {
	background: linear-gradient(90deg, var(--lavender) 0%, var(--rose-strong) 100%);
}
.wapu-perf-meta__bar--int .wapu-perf-meta__bar-fill {
	background: linear-gradient(90deg, var(--butter) 0%, var(--peach-strong) 100%);
}

.wapu-perf-meta__bar-hint {
	font-size: 12px;
	color: var(--wapu-perf-ink-3);
	font-weight: 600;
	margin-top: 2px;
}

/* ─── Responsive ────────────────────────────────────────────────── */
@media (max-width: 560px) {
	.wapu-perf-meta {
		padding: 20px;
		border-radius: 16px;
	}
	.wapu-perf-meta__line {
		gap: 20px;
	}
}