/* =============================================================================
   DKT Store — Valores · "Nosotros / Por qué elegirnos" · lienzo CREMA (DEC-W069)
   30 chips de IGUAL altura en 3 filas por marca (DKT · Andalan · Prudence), marquee
   lento por pasos + clic-burst. Sistema de diseño: variación = ancho (size) + color.
   100% LAYOUT → cero overlap. Consume tokens 1.0. Dep de encolado: dkt-components.
   ============================================================================= */

/* Lienzo CREMA full-width. overflow:hidden = seguridad horizontal de la página. */
.dkt-home__values { background: var(--dkt-cream); width: 100%; overflow: hidden; padding-bottom: var(--space-8); }

/* Encabezado centrado · títulos oscuros sobre crema. */
.dkt-values { max-width: 1240px; margin: 0 auto; padding: var(--space-4) var(--space-5) var(--space-4); text-align: center; }   /* título más pegado al hero (DEC-W069 v0.8.12) */
.dkt-values__head .dkt-eyebrow { color: var(--dkt-magenta); }   /* 6.4:1 sobre crema */
.dkt-values__title { color: var(--dkt-vino); margin: var(--space-2) 0 0; }   /* 10.9:1 */

/* =============================================================================
   FILAS — 3 niveles juntos con aire (el hover eleva sin recortarse)
   ============================================================================= */
.dkt-values__rows { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 14px 0; }
/* overflow-x:clip recorta el marquee horizontal; overflow-y:visible deja crecer el lift
   vertical del hover (clip NO fuerza el otro eje a auto, a diferencia de hidden).
   La máscara edge-fade va en el CONTENEDOR (no en la fila): una máscara es clipper y
   recortaría el chip elevado en hover (DEC-W069 v0.8.11). */
.dkt-values__row { width: 100%; overflow-x: clip; overflow-y: visible; position: relative; }
/* Hover sin overlap: la fila con el chip en hover sube de capa → su lift+sombra caen
   por encima de las filas vecinas (DEC-W069 v0.8.12). */
.dkt-values__rows.is-marquee .dkt-values__row:has(.dkt-values__chip:hover) { z-index: 5; }
.dkt-values__track {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap;          /* DEFAULT estático: envuelve, legible */
	gap: 5px; justify-content: center; align-items: center;
}

/* Pool: reserva de rotación + a11y/SEO. Oculto visual (sr-only). */
.dkt-values__pool { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; list-style: none; }

.dkt-values__chip { display: flex; margin: 0; }

/* Cápsula pill · UNA sola altura + UN solo font. Variación = ancho (padding) + color. */
.dkt-values__card {
	height: 60px; display: inline-flex; align-items: center; gap: 9px;
	padding: 0 22px; border: 2px solid transparent; border-radius: 18px;
	white-space: nowrap; font-family: var(--dkt-font-titles);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 3px 10px rgba(95,14,57,0.12);
	transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.dkt-values__text  { font-size: 14px; font-weight: 600; line-height: 1; }
.dkt-values__icon  { line-height: 0; }
.dkt-values__icon svg { width: 18px; height: 18px; max-width: none; fill: currentColor; display: block; }
.dkt-values__emoji { font-size: 16px; line-height: 1; }
.dkt-values__logo  { height: 26px; width: auto; max-width: 130px; display: block; }
.is-wordmark .dkt-values__text { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; }

/* Ancho por size (NUNCA altura ni font; la altura es fija 60px). */
.is-size-g  .dkt-values__card { padding: 0 26px; }
.is-size-m  .dkt-values__card { padding: 0 22px; }
.is-size-ch .dkt-values__card { padding: 0 17px; }

/* Logo DKT (lockup "Mejorando vidas", PNG) más alto que los wordmarks SVG. */
.is-dkt .dkt-values__logo { height: 42px; max-width: 160px; }

/* Layouts internos del chip (altura uniforme 60px). default = inline (ícono izq + texto). */
.is-layout-stack .dkt-values__card { flex-direction: column; justify-content: center; gap: 3px; }
.is-layout-two .dkt-values__text { white-space: normal; line-height: 1.12; max-width: 17ch; text-align: left; }

/* =============================================================================
   TRATAMIENTOS DE COLOR (AA: rosados nudgeados solo aquí; blanco ≥4.5 a 14px)
   ============================================================================= */
/* DKT — vino #5F0E39 + blanco / blanco + vino */
.is-dkt.is-fill  .dkt-values__card { background: var(--dkt-vino); color: var(--dkt-white); border-color: var(--dkt-vino); }
.is-dkt.is-tonal .dkt-values__card { background: var(--dkt-white); color: var(--dkt-vino); border-color: var(--dkt-vino); }

/* Andalan — rosa #E60073 + blanco / blanco + texto vino + borde/ícono rosa */
.is-andalan.is-fill  .dkt-values__card { background: #E60073; color: var(--dkt-white); border-color: #E60073; }
.is-andalan.is-tonal .dkt-values__card { background: var(--dkt-white); color: var(--dkt-vino); border-color: #E60073; }
.is-andalan.is-tonal .dkt-values__icon { color: #E60073; }

/* Prudence — negro #1F140F + blanco / blanco + negro */
.is-prudence.is-fill  .dkt-values__card { background: #1F140F; color: var(--dkt-white); border-color: #1F140F; }
.is-prudence.is-tonal .dkt-values__card { background: var(--dkt-white); color: #1F140F; border-color: #1F140F; }

/* Femenino — Rhodamine #DD0090 + blanco (uso ÚNICO) */
.is-fem .dkt-values__card { background: #DD0090; color: var(--dkt-white); border-color: #DD0090; }

/* Pops Prudence (Diversión) — personalizados + emoji */
.is-pop-neon      .dkt-values__card { background: #1F140F; color: #8FC400; border-color: #8FC400; }
.is-pop-neon      .dkt-values__text { text-shadow: 0 0 8px rgba(143,196,0,0.7); }
.is-pop-frutilla  .dkt-values__card { background: #D6294A; color: var(--dkt-white); border-color: var(--dkt-white); }
.is-pop-menta     .dkt-values__card { background: #1A8049; color: var(--dkt-white); border-color: var(--dkt-white); }
.is-pop-chicle    .dkt-values__card { background: #D42A82; color: var(--dkt-white); border-color: var(--dkt-white); }
.is-pop-caipirina .dkt-values__card { background: #C2E06A; color: #14501C; border-color: #14501C; }   /* verde caipiriña + verde oscuro */
.is-pop-mix       .dkt-values__card { background: #FF8A1E; color: #1F140F; border-color: #1F140F; }
.is-pop-chocolate .dkt-values__card { background: #5A3620; color: var(--dkt-white); border-color: #FFD9B3; }
.is-pop-fresafire .dkt-values__card { background: #D63A12; color: var(--dkt-white); border-color: var(--dkt-white); }

/* =============================================================================
   MARQUEE LENTO POR PASOS (.is-marquee, lo añade el JS) + edge-fade
   ============================================================================= */
.dkt-values__rows.is-marquee .dkt-values__track {
	flex-wrap: nowrap; justify-content: flex-start; width: max-content;
	animation: dktStep var(--marq-dur, 36s) ease-in-out infinite;
}
.dkt-values__rows.is-marquee .dkt-values__row:nth-child(even) .dkt-values__track { animation-direction: reverse; }
.dkt-values__rows.is-marquee:not(.is-paused) .dkt-values__track { will-change: transform; }
.dkt-values__rows.is-marquee .dkt-values__chip { cursor: pointer; }
/* Edge-fade en el CONTENEDOR (NO en la fila): así el chip elevado en hover no se recorta
   (una máscara es clipper, aparte del overflow). El contenedor cubre las 3 filas y su
   padding vertical, y el gradiente es horizontal → no clipa el lift vertical. */
.dkt-values__rows.is-marquee {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* PASOS con reposos anchos (más quieto que en movimiento). --marq / --marq-half = JS. */
@keyframes dktStep {
	0%, 26%   { transform: translateX(0); }
	37%, 63%  { transform: translateX(calc(-1 * var(--marq-half, 16.666%))); }
	74%, 100% { transform: translateX(calc(-1 * var(--marq, 33.333%))); }
}
.dkt-values__rows.is-marquee .dkt-values__row:hover .dkt-values__track,
.dkt-values__rows.is-marquee.is-paused .dkt-values__track { animation-play-state: paused; }

/* =============================================================================
   HOVER (lift) + BURST/POP (clic)
   ============================================================================= */
.dkt-values__chip:hover { position: relative; z-index: 3; }
.dkt-values__rows.is-marquee .dkt-values__chip:hover .dkt-values__card {
	transform: translateY(-3px) scale(1.05);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 9px 20px rgba(95,14,57,0.28);
}
.is-pop-neon:hover .dkt-values__text,
.is-pop-neon:hover .dkt-values__emoji { text-shadow: 0 0 14px rgba(143,196,0,0.95); }

@keyframes dktBurst { from { transform: scale(1); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }
@keyframes dktPop   { 0% { transform: scale(0.3); opacity: 0; } 70% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.dkt-values__chip.is-bursting .dkt-values__card { animation: dktBurst 0.34s ease-in forwards; }
.dkt-values__chip.is-popping  .dkt-values__card { animation: dktPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* =============================================================================
   ACCESIBILIDAD / RESPONSIVE — estático (sin marquee ni pop)
   ============================================================================= */
@media (max-width: 768px) {
	.dkt-values { padding: var(--space-8) var(--space-4) var(--space-4); }
	.dkt-values__rows.is-marquee { -webkit-mask-image: none; mask-image: none; }
	.dkt-values__rows.is-marquee .dkt-values__row { overflow: visible; }
	.dkt-values__rows.is-marquee .dkt-values__track { flex-wrap: wrap; width: auto; justify-content: center; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
	.dkt-values__rows.is-marquee { -webkit-mask-image: none; mask-image: none; }
	.dkt-values__rows.is-marquee .dkt-values__row { overflow: visible; }
	.dkt-values__rows.is-marquee .dkt-values__track { flex-wrap: wrap; width: auto; justify-content: center; animation: none !important; }
	.dkt-values__chip .dkt-values__card { animation: none !important; }
}