/* =============================================================================
   DKT Store — Hero premium (Home Premium v3.2 · mockup home-premium-v3.html)
   4 slides apilados en grid (crossfade), textos abajo en 1 línea (desktop),
   corners 98px (DKT/B2B) / 60px (marcas), dots + flechas, ola crema al pie.

   ALTO: calc(100svh - chrome real). El chrome (announcement bar del plugin +
   header sticky) lo mide hero.js y lo publica en --dkt-hero-chrome; el
   fallback 140px cubre no-JS (el 170px del mockup no era una medida real).

   FAIL-VISIBLE (DEC-W065): sin JS, el primer slide queda visible SIEMPRE
   (.is-active viene en el markup + salvavidas :first-of-type sin .is-ready).

   ⚠️ Lecciones vigentes: el legacy dkt-style.css estiliza todo <button> con
   !important y components trae button:hover{translateY(-1px)} → flechas y dots
   van blindados con !important y re-afirman su transform en cada estado.
   ============================================================================= */

/* Full-bleed: la portada va en layout "page-builder" de Astra (hero.php:
   astra_get_content_layout → 'page-builder'), que quita el max-width del
   .ast-container. Por eso el hero solo necesita width:100% (SIN breakout 100vw,
   que se rompía cuando el contenedor intermedio computaba width:0). */
.dkt-home { width: 100%; }
.dkt-home__hero { width: 100%; }

/* Curva de easing del MOCKUP para todo el Home (fidelidad v3.2): la custom
   property hereda a todas las secciones dentro de <main class="dkt-home"> sin
   tocar el token global --ease (0.2,0.8,0.2,1) que usan header/legacy/landings. */
.dkt-home { --ease: cubic-bezier(0.22, 0.61, 0.36, 1); }

/* v3.3 (auditoría Cowork): navegación por anclas bajo el header sticky —
   scroll-margin-top = altura real del header (hero.js publica
   --dkt-sticky-offset; fallback estático sin JS). */
.dkt-home > section { scroll-margin-top: var(--dkt-sticky-offset, 108px); }

.dkt-hero {
	position: relative;
	width: 100%;
	height: calc(100vh - var(--dkt-hero-chrome, 140px));   /* fallback sin svh */
	height: calc(100svh - var(--dkt-hero-chrome, 140px));
	min-height: 500px;
	max-height: 820px;
	background: var(--dkt-vino);
	overflow: clip;
	display: grid;
	outline: none;
}
.dkt-hero:focus-visible { outline: 3px solid var(--dkt-magenta); outline-offset: -3px; }

/* ---------- Slides (apilados, crossfade) ---------- */
.dkt-hero__slide {
	grid-area: 1 / 1;
	position: relative;
	display: grid;
	align-content: end;
	justify-items: center;
	text-align: center;
	padding: 2vh 24px 11vh;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.55s var(--ease), visibility 0s 0.55s;
	pointer-events: none;
}
/* Salvavidas no-JS: sin .is-ready (hero.js no corrió) el primer slide se ve. */
.dkt-hero:not(.is-ready) .dkt-hero__slide:first-of-type,
.dkt-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.55s var(--ease);
}

/* Fondos por slide (mockup L82-88) */
.dkt-hero__bg { position: absolute; inset: 0; z-index: 0; }
.dkt-hero__slide > *:not(.dkt-hero__bg):not(.dkt-hero__corner):not(.dkt-hero__ph) { position: relative; z-index: 2; }
.dkt-hero__slide--dkt .dkt-hero__bg { background: linear-gradient(120deg, #A50050, #7A1450 55%, #5F0E39); }
.dkt-hero__slide--dkt .dkt-hero__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(46% 40% at 72% 30%, rgba(255,255,255,0.10), transparent 70%); }
.dkt-hero__slide--pru .dkt-hero__bg { background: radial-gradient(58% 68% at 50% 42%, #3A2418 0%, #1F140F 68%); }
.dkt-hero__slide--pru .dkt-hero__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(34% 30% at 50% 58%, rgba(229,6,149,0.30), transparent 70%); }
.dkt-hero__slide--and .dkt-hero__bg { background: linear-gradient(150deg, #ED0076 0%, #C20063 42%, #5F0E39 100%); }
.dkt-hero__slide--b2b .dkt-hero__bg { background: linear-gradient(140deg, #5F0E39 0%, #7A1450 55%, #87114A 100%); }
.dkt-hero__slide--b2b .dkt-hero__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 44% at 26% 28%, rgba(109,172,164,0.16), transparent 70%); }

/* Logo corner: 60px base (Prudence/Andalan) · 98px DKT y B2B (v3.2 #2).
   SIN filtros CSS. max-width:none = blindaje contra img{max-width:100%} Astra. */
.dkt-hero__corner {
	position: absolute;
	top: 26px;
	right: 34px;
	z-index: 3;
	height: 60px;
	width: auto;
	max-width: none;
	opacity: 0.96;
}
.dkt-hero__slide--dkt .dkt-hero__corner,
.dkt-hero__slide--b2b .dkt-hero__corner { height: 98px; top: 20px; right: 30px; }

/* Placeholder de arte (pendiente DKT) */
.dkt-hero__ph {
	position: absolute;
	top: 24%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	border: 1.5px dashed rgba(255,255,255,0.45);
	border-radius: 999px;
	padding: 0.7em 1.5em;
	margin: 0;
	font: 600 0.74rem/1 var(--dkt-font-titles, 'Poppins', sans-serif);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.75);
	white-space: nowrap;
}
.dkt-hero__ph svg { width: 16px; height: 16px; max-width: none; flex: 0 0 auto; }

/* Textos */
.dkt-hero__eyebrow {
	margin: 0;
	font: 600 0.78rem/1 var(--dkt-font-titles, 'Poppins', sans-serif);
	letter-spacing: 0.3em;
	color: rgba(255,255,255,0.75);
	text-transform: uppercase;
}
.dkt-hero__title {
	font-family: var(--dkt-font-titles, 'Poppins', sans-serif);
	font-size: clamp(1.9rem, 3.3vw, 3.3rem);
	font-weight: 700;
	color: var(--dkt-white);
	line-height: 1.08;
	margin: 0.3em 0 0.28em;
	white-space: nowrap;
}
.dkt-hero__lead {
	margin: 0 0 2.6vh;
	font: 400 clamp(0.92rem, 1.45vw, 1.15rem)/1.5 var(--dkt-font-body, 'Inter', sans-serif);
	color: rgba(255,255,255,0.88);
	white-space: nowrap;
}

/* CTAs (son <a>, no les pega el clobber legacy de <button>) */
.dkt-hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.dkt-hero__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;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.dkt-hero__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(95,14,57,0.18); }
.dkt-hero__btn--white { background: var(--dkt-white); color: var(--dkt-magenta); }
.dkt-hero__btn--white:hover { color: var(--dkt-magenta); }
.dkt-hero__btn--ghost { background: transparent; color: var(--dkt-white); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55); }
/* Ghost hover del mockup: SOLO se intensifica el anillo (sin sombra externa). */
.dkt-hero__btn--ghost:hover { color: var(--dkt-white); box-shadow: inset 0 0 0 2px #fff; }

/* ---------- Dots (blindados: son <button>) ----------
   ⚠️ Especificidad: el clobber legacy es `button:not(.toggle-on):not(.toggle-off)`
   = (0,2,1) con !important. Entre dos !important de autor gana la MÁS ESPECÍFICA,
   no la que carga después → estas reglas usan (0,3,0)/(0,4,0) para ganar SIEMPRE. */
.dkt-hero .dkt-hero__dots {
	position: absolute;
	bottom: 4.6vh;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 5;
}
.dkt-hero .dkt-hero__dots .dkt-hero__dot {
	width: 34px !important;
	height: 5px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: rgba(255,255,255,0.32) !important;
	box-shadow: none !important;
	font-size: 0 !important;
	line-height: 0 !important;
	cursor: pointer;
	transition: background 0.3s var(--ease) !important;
}
.dkt-hero .dkt-hero__dots .dkt-hero__dot:hover { background: rgba(255,255,255,0.55) !important; transform: none; }
.dkt-hero .dkt-hero__dots .dkt-hero__dot.is-active { background: #fff !important; }

/* ---------- Flechas (blindadas + transform re-afirmado en cada estado) ---------- */
.dkt-hero .dkt-hero__arrow.dkt-hero__arrow--prev,
.dkt-hero .dkt-hero__arrow.dkt-hero__arrow--next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 50px !important;
	height: 50px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255,255,255,0.14) !important;
	color: var(--dkt-white) !important;
	box-shadow: none !important;
	font-size: 1.4rem !important;   /* el legacy trae font-size !important */
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur(4px);
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	transition: background 0.25s var(--ease) !important;
}
.dkt-hero .dkt-hero__arrow.dkt-hero__arrow--prev:hover,
.dkt-hero .dkt-hero__arrow.dkt-hero__arrow--prev:focus,
.dkt-hero .dkt-hero__arrow.dkt-hero__arrow--prev:active,
.dkt-hero .dkt-hero__arrow.dkt-hero__arrow--next:hover,
.dkt-hero .dkt-hero__arrow.dkt-hero__arrow--next:focus,
.dkt-hero .dkt-hero__arrow.dkt-hero__arrow--next:active { background: rgba(255,255,255,0.28) !important; transform: translateY(-50%); }
.dkt-hero__arrow--prev { left: 26px; }
.dkt-hero__arrow--next { right: 26px; }

/* Sin JS operativo (sin .is-ready) los controles serían botones MUERTOS →
   ocultos hasta que hero.js confirme. El !important es obligatorio: la regla
   base declara display:inline-flex !important (blindaje anti-legacy). */
.dkt-hero:not(.is-ready) .dkt-hero__arrow.dkt-hero__arrow--prev,
.dkt-hero:not(.is-ready) .dkt-hero__arrow.dkt-hero__arrow--next,
.dkt-hero:not(.is-ready) .dkt-hero__dots { display: none !important; }

/* ---------- Ola crema al pie (empalme hero→valores) ---------- */
.dkt-hero__ola {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 4;
	display: block;
	height: 26px;
	width: 100%;
	max-width: none;
}

/* =============================================================================
   Responsive (breakpoints canónicos DEC-W067: 1024/768/480)
   ============================================================================= */
@media (max-width: 1024px) {
	.dkt-hero__title,
	.dkt-hero__lead { white-space: normal; }
	.dkt-hero__corner { height: 44px; top: 18px; right: 20px; }
	.dkt-hero__slide--dkt .dkt-hero__corner,
	.dkt-hero__slide--b2b .dkt-hero__corner { height: 68px; top: 16px; right: 18px; }
	.dkt-hero__arrow--prev { left: 10px; }
	.dkt-hero__arrow--next { right: 10px; }
}
@media (max-width: 480px) {
	/* Táctil: dots + autoplay. Especificidad ≥ base (0,3,0) o perdería. */
	.dkt-hero .dkt-hero__arrow.dkt-hero__arrow--prev,
	.dkt-hero .dkt-hero__arrow.dkt-hero__arrow--next { display: none !important; }
	.dkt-hero__ph { white-space: normal; text-align: center; max-width: 86vw; }
}

/* Reduced motion: sin crossfade animado ni transiciones (autoplay lo apaga JS).
   Selectores a la especificidad de las reglas base (que llevan !important). */
@media (prefers-reduced-motion: reduce) {
	.dkt-hero__slide,
	.dkt-hero__slide.is-active,
	.dkt-hero__btn,
	.dkt-hero .dkt-hero__dots .dkt-hero__dot,
	.dkt-hero .dkt-hero__arrow.dkt-hero__arrow--prev,
	.dkt-hero .dkt-hero__arrow.dkt-hero__arrow--next { transition: none !important; }
	.dkt-hero__btn:hover { transform: none; }
}