/* =============================================================================
   DKT Store — Puertas de marca con mundos rotativos (Home Premium v3.2)
   Sección vino con ola crema de entrada. 2 puertas <a> blancas:
   Prudence (5 mundos, SOLO Neón interactivo; Chicle tag fijo desde v3.3) ·
   Andalan (5 DIU con sellos).
   Crossfade de mundos por .is-act (rotor en home-brands.js, 3.4s/3s).
   Anti-solape del crossfade: tag/sello salen rápido y entran con retraso.
   ⚠️ SIN selectores .dkt-brand-prudence/.dkt-brand-andalan a secas (son body
   class de los landings). Alturas del mundo en PX fijos (lección: % no
   resuelve dentro de grid place-items:center).
   ============================================================================= */

.dkt-home__brands { background: var(--dkt-vino); width: 100%; }

.dkt-brands { background: var(--dkt-vino); padding-bottom: 84px; }

/* Ola sube (fill crema = empalme con Valores encima) */
.dkt-brands__ola { display: block; width: 100%; height: 64px; margin-bottom: -1px; max-width: none; }

.dkt-brands__wrap { max-width: 1180px; margin-inline: auto; padding-inline: 24px; }

/* ---------- Cabecera clara sobre vino (AA) ---------- */
.dkt-brands__head { text-align: center; padding-top: 56px; margin-bottom: 44px; }
.dkt-brands__eyebrow {
	font: 600 0.78rem/1 var(--dkt-font-titles, 'Poppins', sans-serif);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #FFB8D6;
}
.dkt-brands__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-white);
	margin: 0.45rem 0 0;
}
.dkt-brands__arco { width: 88px; height: 14px; margin: 16px auto 0; display: block; max-width: none; }
.dkt-brands__arco path { fill: none; stroke: #FFB8D6; stroke-width: 3; stroke-linecap: round; }

/* ---------- Grid de puertas ---------- */
.dkt-brands__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

.dkt-puerta {
	border-radius: 22px;
	overflow: hidden;
	background: var(--dkt-white);
	box-shadow: 0 8px 24px -8px rgba(95,14,57,0.18);
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}
.dkt-puerta:hover { transform: translateY(-8px); box-shadow: 0 26px 60px -16px rgba(95,14,57,0.26); }

/* Visual = escenario de los mundos (340px, fondo negro Prudence) */
.dkt-puerta__visual { position: relative; height: 340px; overflow: hidden; background: #1F140F; }

/* Logo de la puerta: absoluto arriba-izquierda (sin esto el SVG se pinta gigante) */
.dkt-puerta__logo {
	position: absolute;
	top: 22px;
	left: 26px;
	height: 34px;
	width: auto;
	max-width: none;
	z-index: 5;
	filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
}

/* Dots de mundo (arriba-derecha) */
.dkt-puerta__mdots { position: absolute; top: 26px; right: 26px; display: flex; gap: 6px; z-index: 5; }
.dkt-puerta__mdot { width: 20px; height: 4px; border-radius: 99px; background: rgba(255,255,255,0.35); transition: background 0.3s var(--ease); }
.dkt-puerta__mdot.is-act { background: #fff; }

/* ---------- Mundo (capa del rotor, crossfade) ---------- */
.dkt-mundo {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.8s var(--ease);
	display: grid;
	place-items: center;
	pointer-events: none;
}
.dkt-mundo.is-act { opacity: 1; pointer-events: auto; }
.dkt-mundo__bg { position: absolute; inset: 0; }
.dkt-mundo__wm {
	position: absolute;
	width: 330px;
	height: 330px;
	max-width: none;
	opacity: 0.07;
	left: -46px;
	bottom: -70px;
	transform: rotate(-12deg);
	z-index: 1;
}
.dkt-mundo__pack {
	position: relative;
	height: 215px;   /* px fijos: % no resuelve en grid place-items:center */
	width: auto;
	max-width: none;
	filter: drop-shadow(0 20px 30px rgba(0,0,0,0.45));
	z-index: 2;
	transition: transform 0.4s var(--ease), filter 0.45s var(--ease);
}
.dkt-puerta:hover .dkt-mundo.is-act .dkt-mundo__pack { transform: scale(1.06); }
.dkt-mundo__sello {
	position: absolute;
	right: 24px;
	bottom: 52px;
	height: 72px;
	width: auto;
	max-width: none;
	z-index: 3;
	filter: drop-shadow(0 6px 12px rgba(0,0,0,0.35));
}
.dkt-mundo__tag {
	position: absolute;
	bottom: 15px;
	left: 0;
	right: 0;
	margin: 0;
	text-align: center;
	z-index: 3;
	font: 600 0.72rem/1 var(--dkt-font-titles, 'Poppins', sans-serif);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.85);
}
/* Anti-solape en el crossfade: texto/sello salen rápido y entran con retraso */
.dkt-mundo__tag,
.dkt-mundo__sello { opacity: 0; transition: opacity 0.25s var(--ease); }
.dkt-mundo.is-act .dkt-mundo__tag,
.dkt-mundo.is-act .dkt-mundo__sello { opacity: 1; transition: opacity 0.35s var(--ease) 0.4s; }

/* ---------- Fondos por mundo (Prudence) ---------- */
.dkt-mundo--sens .dkt-mundo__bg { background: radial-gradient(62% 72% at 50% 38%, #23394A, #0F171D 78%); }
.dkt-mundo--sab .dkt-mundo__bg { background: radial-gradient(62% 72% at 50% 38%, #4A3413, #1D130B 78%); }
.dkt-mundo--gel .dkt-mundo__bg { background: radial-gradient(62% 72% at 50% 38%, #54141A, #1D0B0D 78%); }
.dkt-mundo--neon .dkt-mundo__bg { background: radial-gradient(62% 72% at 50% 38%, #22300A, #0D1202 78%); }
.dkt-mundo--neon .dkt-mundo__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(46% 42% at 50% 58%, rgba(87,166,0,0.3), transparent 72%);
	transition: background 0.45s var(--ease);
}
.dkt-mundo--neon .dkt-mundo__tag { color: #8FC400; }
.dkt-mundo--chi .dkt-mundo__bg { background: radial-gradient(62% 72% at 50% 38%, #471030, #190612 78%); }
.dkt-mundo--chi .dkt-mundo__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(46% 42% at 50% 58%, rgba(255,79,195,0.26), transparent 72%);
}
.dkt-mundo--chi .dkt-mundo__tag { color: #FF7ED2; }

/* Pack interactivo: SOLO Neón (v3.3 — Chicle sin glow, decisión Ricardo) */
.dkt-pack-neon { cursor: pointer; }

/* Glow NEÓN encendido: verde profundo fosforescente (v3.2 #4 — NO el lima) */
.dkt-puerta--pru.is-neon .dkt-mundo--neon .dkt-mundo__bg::after { background: radial-gradient(60% 55% at 50% 55%, rgba(87,166,0,0.66), rgba(63,122,0,0.18) 62%, transparent 80%); }
.dkt-puerta--pru.is-neon .dkt-mundo--neon .dkt-mundo__pack { filter: drop-shadow(0 0 24px rgba(87,166,0,1)) drop-shadow(0 0 64px rgba(63,122,0,0.85)) drop-shadow(0 20px 30px rgba(0,0,0,0.45)); }
.dkt-puerta--pru.is-neon .dkt-puerta__visual { box-shadow: inset 0 0 130px rgba(63,122,0,0.4); }

/* ---------- Fondos por mundo (Andalan: fucsia + tinte por material) ---------- */
.dkt-mundo--cla .dkt-mundo__bg,
.dkt-mundo--sil .dkt-mundo__bg,
.dkt-mundo--smin .dkt-mundo__bg,
.dkt-mundo--com .dkt-mundo__bg,
.dkt-mundo--cob .dkt-mundo__bg { background: linear-gradient(150deg, #ED0076, #C20063 55%, #8B0043); }
.dkt-mundo--sil .dkt-mundo__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(52% 56% at 50% 44%, rgba(206,212,224,0.42), transparent 74%); }
.dkt-mundo--smin .dkt-mundo__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(52% 56% at 50% 44%, rgba(255,255,255,0.25), transparent 74%); }
.dkt-mundo--com .dkt-mundo__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(52% 56% at 50% 44%, rgba(109,172,164,0.35), transparent 74%); }
.dkt-mundo--cob .dkt-mundo__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(52% 56% at 50% 44%, rgba(197,120,58,0.48), transparent 74%); }

/* ---------- Cuerpo de la puerta ---------- */
.dkt-puerta__body { padding: 28px 32px 34px; }
.dkt-puerta__cat {
	font: 600 0.74rem/1 var(--dkt-font-titles, 'Poppins', sans-serif);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0 0 0.7em;
}
.dkt-puerta__cat--pru { color: #E50695; }   /* Rhodamine Prudence */
.dkt-puerta__cat--and { color: var(--dkt-teal); }
.dkt-puerta__h {
	font-family: var(--dkt-font-titles, 'Poppins', sans-serif);
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--dkt-vino);
	letter-spacing: 0.06em;
	margin: 0 0 0.35em;
}
.dkt-puerta__lead { color: var(--dkt-muted); line-height: 1.55; margin: 0 0 1.4em; }
.dkt-puerta__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font: 600 1rem/1 var(--dkt-font-titles, 'Poppins', sans-serif);
	padding: 1.02em 1.9em;
	border-radius: 999px;
	background: var(--dkt-magenta);
	color: var(--dkt-white);
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.dkt-puerta:hover .dkt-puerta__btn { transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(95,14,57,0.18); }

/* ---------- Responsive (breakpoints canónicos DEC-W067) ---------- */
@media (max-width: 1024px) {
	.dkt-brands__grid { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion: crossfades y hovers quietos (rotor lo apaga JS) ---------- */
@media (prefers-reduced-motion: reduce) {
	.dkt-puerta,
	.dkt-puerta__btn,
	.dkt-mundo,
	.dkt-mundo__tag,
	.dkt-mundo__sello,
	.dkt-mundo__pack,
	.dkt-puerta__mdot { transition: none !important; }
	.dkt-puerta:hover { transform: none; }
	.dkt-puerta:hover .dkt-puerta__btn,
	.dkt-puerta:hover .dkt-mundo.is-act .dkt-mundo__pack { transform: none; }
}