/* =============================================================================
   DKT Store — Secciones restantes de la Home (Home Premium v3.4)
   CTA WhatsApp (grad-firma + ola desde VINO) · Cierre "Planificación familiar"
   CREMA con ola invertida + pareja saliendo de la ola oscura · Banda de pagos.
   ============================================================================= */

/* =============================================================================
   6 · CTA WHATSAPP
   ============================================================================= */
.dkt-home__cta { width: 100%; }

.dkt-cta2 {
	position: relative;
	background: linear-gradient(120deg, #A50050, #7A1450 55%, #5F0E39);   /* grad-firma */
	color: var(--dkt-white);
}
/* Ola sube fill VINO #5F0E39: empalma con Destacados (vino desde v3.3) encima */
.dkt-cta2__ola { display: block; width: 100%; height: 64px; margin-bottom: -1px; max-width: none; }

.dkt-cta2__in {
	max-width: 1180px;
	margin-inline: auto;
	text-align: center;
	padding: 70px 24px 170px;   /* v3.4: aire entre el botón WhatsApp y la ola del cierre */
	position: relative;
}
.dkt-cta2__in::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(40% 50% at 78% 20%, rgba(255,255,255,0.08), transparent 70%);
	pointer-events: none;
}
.dkt-cta2__title {
	position: relative;
	font-family: var(--dkt-font-titles, 'Poppins', sans-serif);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	color: var(--dkt-white);
	margin: 0;
}
.dkt-cta2__lead {
	position: relative;
	color: rgba(255,255,255,0.92);
	font-size: 1.1rem;
	max-width: 52ch;
	margin: 1em auto 2em;
}
.dkt-cta2__btn {
	position: relative;
	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-white);
	color: var(--dkt-magenta);
	text-decoration: none;
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.dkt-cta2__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(95,14,57,0.18); color: var(--dkt-magenta); }   /* --sh-2 del mockup */
.dkt-cta2__btn svg { max-width: none; flex: 0 0 auto; }

/* =============================================================================
   7 · CIERRE "PLANIFICACIÓN FAMILIAR" + NEWSLETTER integrado
   ============================================================================= */
.dkt-home__closing { width: 100%; }

/* v3.4 (APROBADO en prototipo vivo): la sección SUBE -150px sobre el CTA y su
   franja superior es TRANSPARENTE → sobre la línea de la ola se ve el magenta
   REAL del CTA (gradiente incluido — irreplicable con un fill plano). El
   mockup transcribió esto con bug (sección 100% crema = ola invisible);
   mecánica verificada en navegador contra el prototipo aprobado.
   Z: olatop(1) < grid(2) < pareja(6) < olabaja(9). */
.dkt-cierre2 {
	background: linear-gradient(to bottom, transparent 150px, #F5EBE0 150px);
	margin-top: -150px;   /* solapa la franja vacía del CTA (padding-bottom 170px > 150px) */
	padding: 0;
	position: relative;
	overflow: clip;
}
/* Ola divisoria: crema ALTA a la izquierda (~y22) → BAJA a la derecha (~y140).
   ⚠️ z-index:1 BAJO el grid(2): si pinta encima "corta" las cabezas de la foto
   (bug real del prototipo). */
.dkt-cierre2__olatop {
	display: block;
	width: 100%;
	height: 150px;
	max-width: none;
	position: relative;
	z-index: 1;
	margin-bottom: -150px;
	pointer-events: none;
}
/* Ola OSCURA inferior: MISMO vino que la banda de confianza (una sola pieza).
   z-index:9 SOBRE la foto → tapa su corte inferior. */
.dkt-cierre2__olabaja {
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	height: 130px;
	z-index: 9;
	pointer-events: none;
}
.dkt-cierre2__olabaja svg { width: 100%; height: 100%; display: block; max-width: none; }

.dkt-cierre2__grid {
	max-width: 1180px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 48px;
	align-items: end;
	position: relative;
	z-index: 2;
	padding: 110px 24px 0;
}
/* v3.4: sección CREMA → textos en paleta oscura */
.dkt-cierre2__news { padding-bottom: 120px; }
.dkt-cierre2__eyebrow {
	margin: 0;
	font: 600 0.78rem/1 var(--dkt-font-titles, 'Poppins', sans-serif);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--dkt-magenta);
}
.dkt-cierre2__h {
	font-family: var(--dkt-font-titles, 'Poppins', sans-serif);
	font-size: clamp(1.7rem, 2.8vw, 2.4rem);
	font-weight: 700;
	color: var(--dkt-vino);
	margin: 0.35em 0 0.4em;
	line-height: 1.15;
}
.dkt-cierre2__h em {
	font-style: normal;
	background: linear-gradient(transparent 60%, rgba(237,0,118,0.35) 60%);
}
.dkt-cierre2__msg { color: var(--dkt-muted); line-height: 1.65; max-width: 54ch; margin: 0 0 1.6em; }

/* Newsletter (UI-only · M7) */
.dkt-cierre2__form { display: flex; gap: 12px; max-width: 470px; }
.dkt-cierre2__form input[type="email"] {
	flex: 1;
	font: 400 0.98rem/1 var(--dkt-font-body, 'Inter', sans-serif);
	padding: 1em 1.3em;
	border: 1.5px solid rgba(95,14,57,0.35);
	background: var(--dkt-white);
	color: var(--dkt-ink);
	border-radius: 999px;
	outline: none;
	transition: border-color 0.2s var(--ease);
}
.dkt-cierre2__form input[type="email"]::placeholder { color: #9a8792; }
.dkt-cierre2__form input[type="email"]:focus { border-color: var(--dkt-magenta); }
/* Botón Suscribirme MAGENTA (v3.4; blindado: es <button> y el legacy
   `button:not(...):not(...)` = (0,2,1) con !important le impondría su
   padding/radio — entre !important gana la MÁS ESPECÍFICA, por eso este
   selector usa (0,3,0)). */
.dkt-cierre2 .dkt-cierre2__form .dkt-cierre2__btn {
	display: inline-flex !important;
	align-items: center;
	font: 600 1rem/1 var(--dkt-font-titles, 'Poppins', sans-serif) !important;
	padding: 1.02em 1.9em !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--dkt-magenta) !important;   /* v3.4: magenta sobre crema */
	color: var(--dkt-white) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease) !important;
}
.dkt-cierre2 .dkt-cierre2__form .dkt-cierre2__btn:hover { transform: translateY(-2px); background: var(--dkt-magenta-mid, #87114A) !important; box-shadow: 0 8px 24px -8px rgba(95,14,57,0.18) !important; }   /* --sh-2 del mockup */

.dkt-cierre2__lopdp {
	display: block;
	font: 400 0.72rem/1.5 var(--dkt-font-body, 'Inter', sans-serif);
	color: var(--dkt-muted);
	margin-top: 14px;
	max-width: 460px;
}
.dkt-cierre2__lopdp input[type="checkbox"] { accent-color: var(--dkt-magenta); margin-right: 0.5em; }
.dkt-cierre2__lopdp a { color: var(--dkt-vino); text-decoration: underline; }
.dkt-cierre2__lopdp a:hover { color: var(--dkt-magenta); }

/* v3.3: sin botón "Quiero más información" (reglas __mas/__ghost retiradas). */

/* v3.4: la pareja SUBE -150px — las cabezas quedan SOBRE la ola, contra el
   magenta real del CTA, con su contorno natural (sin máscaras ni sombras).
   Alturas en PX/min-height — nunca % dentro del grid place-items. */
.dkt-cierre2__pareja {
	position: relative;
	min-height: 460px;
	display: grid;
	place-items: end center;
	z-index: 6;
	margin-top: -150px;
}
.dkt-cierre2__img {
	position: relative;
	width: min(430px, 92%);
	max-width: none;
	height: auto;
	margin-bottom: 0;
	z-index: 2;
}
/* Fallback si la foto no está (fail-safe · brief fila 7) */
.dkt-cierre2__img-fallback {
	position: relative;
	width: min(430px, 92%);
	height: 420px;
	border-radius: 22px;
	background: linear-gradient(160deg, #7A1450, var(--dkt-vino) 60%, #4A0B2C);
}

/* =============================================================================
   9 · BANDA DE PAGOS (copia exacta Andalan)
   ============================================================================= */
.dkt-home__pay { width: 100%; }

.dkt-pay { background: var(--dkt-white); border-top: 1px solid #f0e2ea; }
.dkt-pay__wrap {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px 22px;
	padding: clamp(15px, 2vh, 22px) clamp(18px, 3vw, 44px);
}
.dkt-pay__group { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.dkt-pay__div { width: 1px; align-self: stretch; min-height: 32px; background: #e6d8ca; }
.dkt-pay__slot { display: flex; align-items: center; justify-content: center; gap: 7px; }
.dkt-pay__slot img { height: auto; display: block; max-width: none; }
.dkt-pay__slot svg { width: 22px; height: 18px; max-width: none; flex: 0 0 auto; }
.dkt-pay__nm {
	font-family: var(--dkt-font-titles, 'Poppins', sans-serif);
	font-weight: 700;
	font-size: 0.78rem;
	color: #5a4a52;
	white-space: nowrap;
}

/* =============================================================================
   Responsive (breakpoints canónicos DEC-W067)
   ============================================================================= */
@media (max-width: 1024px) {
	/* v3.4 en 1 columna (propuesta, validar en navegador): la foto va DEBAJO
	   del texto, así que el -150px la montaría sobre el LOPDP → sin solape;
	   el texto arranca bajo la ola (170px > franja de 150px); la ola oscura
	   full-width sigue tapando el corte de la foto. Las cabezas quedan sobre
	   crema en móvil (el efecto "sobre el magenta" es solo desktop). */
	.dkt-cierre2__grid { grid-template-columns: 1fr; padding-top: 170px; }
	.dkt-cierre2__news { padding-bottom: 60px; }
	.dkt-cierre2__pareja { min-height: 320px; margin-top: 0; }
}
@media (max-width: 480px) {
	.dkt-cierre2__form { flex-direction: column; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.dkt-cta2__btn,
	.dkt-cierre2 .dkt-cierre2__form .dkt-cierre2__btn { transition: none !important; }
	.dkt-cta2__btn:hover,
	.dkt-cierre2 .dkt-cierre2__form .dkt-cierre2__btn:hover { transform: none; }
}