/* =============================================================================
   DKT Store — Valores del Home: tickers de cápsulas (Home Premium v3.2)
   Handle NUEVO dkt-home-values, prefijo dkt-vt-*, keyframes dktVt*.
   SOLO se encola en is_front_page() — brand-values.css queda congelado para
   los landings (P1 · 2026-07-10). Cápsulas y colores literales del mockup.

   FAIL-VISIBLE: la animación solo corre con .is-run (la añade home-values.js
   tras TRIPLICAR la fila para el loop). Sin JS: 4 filas estáticas completas,
   sin animación → sin huecos. Full-bleed SIN mask/fade (v3.2 #3).
   ============================================================================= */

.dkt-home__values { width: 100%; }

.dkt-home-values {
	background: var(--dkt-cream);
	padding: 54px 0 64px;
}

/* ---------- Cabecera ---------- */
.dkt-vt-head { text-align: center; margin-bottom: 34px; padding-inline: 24px; }
/* Eyebrow del MOCKUP (.78rem / .22em): el .dkt-eyebrow global del theme es
   0.875rem/0.14em — override local sin tocar base.css (lo usan los landings). */
.dkt-vt-head .dkt-eyebrow {
	font: 600 0.78rem/1 var(--dkt-font-titles, 'Poppins', sans-serif);
	letter-spacing: 0.22em;
}
.dkt-vt-title {
	font-family: var(--dkt-font-titles, 'Poppins', sans-serif);
	font-size: clamp(1.7rem, 3.2vw, 2.5rem);
	font-weight: 700;
	color: var(--dkt-vino);
	margin: 0.45rem 0 0;
}
.dkt-vt-arco { width: 88px; height: 14px; margin: 16px auto 0; display: block; max-width: none; }
.dkt-vt-arco path { fill: none; stroke: var(--dkt-magenta); stroke-width: 3; stroke-linecap: round; }

/* ---------- Tickers full-bleed (hijos directos de la sección, sin wrap) ---------- */
.dkt-vt-tickers {
	display: grid;
	gap: 18px;
	overflow: hidden;   /* fallback */
	overflow: clip;     /* regla del proyecto: clip, no hidden, para contener horizontal */
}
.dkt-vt-ticker {
	display: flex;
	gap: 14px;
	align-items: center;
	width: max-content;
	padding-inline: 30px;
}
/* Velocidades/direcciones del mockup (A 46s ←, B 40s →, C 54s ←, D 47s →).
   .is-run la pone el JS tras triplicar: sin JS no hay animación (ni huecos). */
.dkt-vt-ticker--a.is-run { animation: dktVtA 46s linear infinite; }
.dkt-vt-ticker--b.is-run { animation: dktVtB 40s linear infinite; }
.dkt-vt-ticker--c.is-run { animation: dktVtA 54s linear infinite; }
.dkt-vt-ticker--d.is-run { animation: dktVtB 47s linear infinite; }
@keyframes dktVtA { to { transform: translateX(-33.333%); } }
@keyframes dktVtB { from { transform: translateX(-33.333%); } to { transform: translateX(0); } }
/* Pausa on-hover: las 4 filas a la vez (mockup L116). */
.dkt-vt-tickers:hover .dkt-vt-ticker { animation-play-state: paused; }

/* ---------- Cápsulas ---------- */
.dkt-vt-cap {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	height: 54px;
	padding: 0 1.5em;
	border-radius: 999px;
	font: 600 0.9rem/1.2 var(--dkt-font-titles, 'Poppins', sans-serif);
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.dkt-vt-cap:hover { transform: translateY(-3px); box-shadow: 0 8px 24px -8px rgba(95,14,57,0.18); }
.dkt-vt-cap.is-flip { animation: dktVtFlip 0.52s var(--ease); }
@keyframes dktVtFlip { 0% { transform: rotateY(0); } 50% { transform: rotateY(92deg); } 100% { transform: rotateY(0); } }

.dkt-vt-ico { width: 17px; height: 17px; max-width: none; flex: 0 0 auto; }

/* Variantes de color (mockup L123-130) */
.dkt-vt-cap--vino { background: var(--dkt-vino); color: var(--dkt-white); }
.dkt-vt-cap--vino-b { background: var(--dkt-white); color: var(--dkt-vino); box-shadow: inset 0 0 0 1.5px var(--dkt-vino); }
.dkt-vt-cap--mag { background: var(--dkt-magenta); color: var(--dkt-white); }
.dkt-vt-cap--fuc { background: #E60073; color: var(--dkt-white); }         /* rosado nudgeado AA (DEC-W069) */
.dkt-vt-cap--fuc-b { background: var(--dkt-white); color: #C20063; box-shadow: inset 0 0 0 1.5px #E60073; }
.dkt-vt-cap--neg { background: #1F140F; color: var(--dkt-white); }         /* --pru-core */
.dkt-vt-cap--neg-b { background: var(--dkt-white); color: #1F140F; box-shadow: inset 0 0 0 1.5px #1F140F; }
.dkt-vt-cap--neon { background: #1F140F; color: #8FC400; box-shadow: inset 0 0 0 1.5px #8FC400; }

/* Cápsulas-logo */
.dkt-vt-cap--logo { padding: 0 1.3em; }
.dkt-vt-logo { width: auto; max-width: none; display: block; }
.dkt-vt-logo--dkt { height: 26px; }
.dkt-vt-logo--and { height: 20px; }
.dkt-vt-logo--pru { height: 22px; }

/* ---------- Reduced motion: todo quieto (tickers + flip + hover) ---------- */
@media (prefers-reduced-motion: reduce) {
	.dkt-vt-ticker { animation: none !important; }
	.dkt-vt-cap,
	.dkt-vt-cap.is-flip { animation: none !important; transition: none !important; }
	.dkt-vt-cap:hover { transform: none; }
}