/* DSuerte593 - Landing "Op4": el maquetado "espejo" de dos columnas (imagen
   del premio a la izquierda, tarjeta de compra con anillo de progreso a la
   derecha) de la version anterior de esta pagina en produccion, con la
   misma paleta onix/violeta/lima de "Premio Total" (op2). La tarjeta de
   compra se materializa con un destello al cargar, el anillo se dibuja
   progresivamente y chispas ascienden detras de la imagen del premio como
   animacion continua. Misma logica de negocio (JS y PHP) que la plantilla
   principal; solo cambia la composicion y la piel visual. */

body.dsuerte-landing-op4 {
	--dl2-onix: #0E0B1A;
	--dl2-onix-2: #15112A;
	--dl2-onix-3: #1C1733;
	--dl2-accent: #C6FF3D;
	--dl2-accent-soft: rgba(198, 255, 61, 0.14);
	--dl2-violet: #7C5CFF;
	--dl2-text: #F5F3FF;
	--dl2-text-muted: #BDB6E8;
	--dl2-text-muted-2: #8F89B8;
	--dl2-border: rgba(245, 243, 255, 0.14);
	--dl2-error: #FF8A80;
	background: var(--dl2-onix);
	margin: 0;
}

.dl2-landing {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: var(--dl2-text);
	background: var(--dl2-onix);
	line-height: 1.5;
}

/* Nota: "overflow-x: hidden" aqui (como en op2/op3) rompe "position: sticky"
   para toda la pagina -- el navegador convierte el overflow-y implicito a
   "auto" y .dl2-landing pasa a ser el contenedor de scroll del sticky en
   vez del viewport, asi que nada se queda fijo. Esta plantilla no tiene
   nada que produzca desborde horizontal (las chispas ya se recortan solo
   con .dl2-sparks), asi que no hace falta. */

.dl2-landing *, .dl2-landing *::before, .dl2-landing *::after {
	box-sizing: border-box;
}

.dl2-container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.dl2-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.4px;
	color: var(--dl2-accent);
	margin-bottom: 14px;
}

.dl2-eyebrow--dark,
.dl2-eyebrow--gold {
	color: var(--dl2-accent);
}

.dl2-heading {
	font-family: 'Syne', sans-serif;
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--dl2-text);
}

/* Header */

.dl2-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(14, 11, 26, 0.8);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid var(--dl2-border);
}

.dl2-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 24px;
}

.dl2-logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

.dl2-logo__img {
	height: 28px;
	width: auto;
	display: block;
}

.dl2-nav {
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
}

.dl2-nav a {
	color: var(--dl2-text-muted);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.3px;
}

.dl2-nav a:hover {
	color: var(--dl2-text);
}

@media (max-width: 960px) {
	.dl2-nav {
		display: none;
	}
}

.dl2-header__right {
	display: flex;
	align-items: center;
	gap: 14px;
}

.dl2-header__pill {
	display: none;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	color: var(--dl2-text);
	background: rgba(245, 243, 255, 0.08);
	border: 1px solid var(--dl2-border);
	padding: 8px 14px;
	border-radius: 999px;
}

.dl2-header__pill-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--dl2-accent);
	box-shadow: 0 0 6px 1px rgba(198, 255, 61, .7);
}

@media (prefers-reduced-motion: no-preference) {
	/* Punto "en vivo": el mismo recurso visual de un indicador de estado
	   activo, pulsando despacio para no competir con el resto de la pagina. */
	.dl2-header__pill-dot { animation: dl2-op4-dot-pulse 1.8s ease-in-out infinite; }
}

@keyframes dl2-op4-dot-pulse {
	0%, 100% { box-shadow: 0 0 6px 1px rgba(198, 255, 61, .7); }
	50% { box-shadow: 0 0 10px 3px rgba(198, 255, 61, .35); }
}

@media (min-width: 640px) {
	.dl2-header__pill {
		display: inline-flex;
	}
}

.dl2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.3px;
	text-decoration: none;
	padding: 11px 22px;
	transition: transform 0.15s ease, background 0.2s ease;
}

.dl2-btn--primary {
	background: var(--dl2-accent);
	color: #140E2E;
}

.dl2-btn--primary:hover {
	transform: translateY(-1px);
	background: #D7FF66;
	color: #140E2E;
}

@media (prefers-reduced-motion: no-preference) {
	/* Brillo suave y continuo en el boton "Comprar" del menu -- discreto,
	   para que no distraiga del resto de la navegacion. */
	.dl2-header__right .dl2-btn--primary { animation: dl2-op4-nav-glow 3.4s ease-in-out infinite; }
}

@keyframes dl2-op4-nav-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(198, 255, 61, 0); }
	50% { box-shadow: 0 0 14px 1px rgba(198, 255, 61, .45); }
}

.dl2-btn--lg {
	padding: 15px 30px;
	font-size: 15px;
}

.dl2-btn--block {
	width: 100%;
}

.dl2-btn--ghost {
	background: transparent;
	color: var(--dl2-text);
	border: 1px solid rgba(245, 243, 255, 0.3);
	padding: 9px 16px;
	font-size: 13px;
}

.dl2-btn--ghost:hover {
	border-color: var(--dl2-accent);
	color: var(--dl2-accent);
}

/* Hero: imagen del producto a la izquierda, tarjeta de compra a la derecha */

.dl2-hero {
	position: relative;
	padding: 56px 0 32px;
}

/* Explosion de confeti (misma pieza que "Explosiva"): el JS
   (landing-explosiva.js, reutilizado tal cual) agrega un <span> por pieza
   dentro de [data-confetti] y le pone --ex-dx/--ex-dy/--ex-rot mas la
   clase "is-popping" que dispara la animacion. Se repite 4 veces (cada 5s)
   y despues se detiene -- no sigue estallando mientras el cliente llena el
   formulario. */
.dl2-confetti {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 3;
}

.dl2-confetti span {
	position: absolute;
	top: 30%;
	left: 46%;
	width: 9px;
	height: 14px;
	opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.dl2-confetti span.is-popping {
		animation: dl2-op4-confetti-pop .9s cubic-bezier(.15, .7, .3, 1) forwards;
	}
}

@keyframes dl2-op4-confetti-pop {
	0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(.6); }
	100% { opacity: 0; transform: translate(var(--ex-dx), var(--ex-dy)) rotate(var(--ex-rot)) scale(1); }
}

.dl2-divider {
	border: none;
	border-top: 1px solid var(--dl2-border);
	margin: 0;
}

.dl2-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 15% 0%, rgba(124, 92, 255, 0.18), transparent 45%), var(--dl2-onix);
	z-index: -1;
}

.dl2-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: start;
}

@media (min-width: 960px) {
	.dl2-hero__grid {
		grid-template-columns: 1.05fr minmax(360px, 440px);
		gap: 52px;
	}
}

.dl2-hero__media {
	position: relative;
}

/* En escritorio, las dos columnas del hero quedan fijas mientras se hace
   scroll por el resto del formulario -- ni la imagen ni la tarjeta de
   compra se "pierden" de vista, igual que en la pagina principal. */
@media (min-width: 960px) {
	.dl2-hero__media,
	.dl2-hero__content {
		position: sticky;
		top: 96px;
		align-self: start;
	}

	/* Si la tarjeta de compra es mas alta que la pantalla, se desplaza por
	   dentro en vez de recortar el boton "Confirmar reserva y pagar". */
	.dl2-hero__content {
		max-height: calc(100vh - 96px - 24px);
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: var(--dl2-border) transparent;
	}

	.dl2-hero__content::-webkit-scrollbar {
		width: 6px;
	}

	.dl2-hero__content::-webkit-scrollbar-thumb {
		background: var(--dl2-border);
		border-radius: 999px;
	}
}

.dl2-hero__media-glow {
	position: absolute;
	inset: 6%;
	background: radial-gradient(circle at 30% 30%, rgba(124, 92, 255, 0.4), transparent 60%),
		radial-gradient(circle at 80% 80%, rgba(198, 255, 61, 0.22), transparent 55%);
	filter: blur(24px);
	z-index: -1;
}

/* Chispas ascendiendo detras de la imagen del premio: decoracion continua y
   sutil, seis elementos con duraciones/retrasos distintos para que no se
   vean sincronizados. Usan "bottom" en % para recorrer siempre la altura
   real de .dl2-hero__media, de abajo arriba, en cualquier pantalla. */
.dl2-sparks {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
	border-radius: 24px;
}

.dl2-sparks span {
	position: absolute;
	bottom: -2%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--dl2-accent);
	box-shadow: 0 0 8px 2px rgba(198, 255, 61, .8);
	opacity: 0;
}

.dl2-sparks span:nth-child(1) { left: 8%; }
.dl2-sparks span:nth-child(2) { left: 22%; background: var(--dl2-violet); box-shadow: 0 0 8px 2px rgba(124, 92, 255, .8); }
.dl2-sparks span:nth-child(3) { left: 40%; }
.dl2-sparks span:nth-child(4) { left: 62%; background: var(--dl2-violet); box-shadow: 0 0 8px 2px rgba(124, 92, 255, .8); }
.dl2-sparks span:nth-child(5) { left: 80%; }
.dl2-sparks span:nth-child(6) { left: 92%; background: var(--dl2-violet); box-shadow: 0 0 8px 2px rgba(124, 92, 255, .8); }

@media (prefers-reduced-motion: no-preference) {
	.dl2-sparks span:nth-child(1) { animation: dl2-op4-spark 6s ease-in infinite; animation-delay: 0s; }
	.dl2-sparks span:nth-child(2) { animation: dl2-op4-spark 7.5s ease-in infinite; animation-delay: 1.1s; }
	.dl2-sparks span:nth-child(3) { animation: dl2-op4-spark 5.4s ease-in infinite; animation-delay: 2.3s; }
	.dl2-sparks span:nth-child(4) { animation: dl2-op4-spark 8.2s ease-in infinite; animation-delay: .6s; }
	.dl2-sparks span:nth-child(5) { animation: dl2-op4-spark 6.8s ease-in infinite; animation-delay: 3s; }
	.dl2-sparks span:nth-child(6) { animation: dl2-op4-spark 7s ease-in infinite; animation-delay: 1.8s; }
}

@keyframes dl2-op4-spark {
	0% { opacity: 0; bottom: -2%; transform: translateX(0); }
	8% { opacity: 1; }
	92% { opacity: 1; }
	100% { opacity: 0; bottom: 104%; transform: translateX(12px); }
}

.dl2-hero__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 24px;
	border: 1px solid var(--dl2-border);
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
	position: relative;
}

@media (prefers-reduced-motion: no-preference) {
	.dl2-hero__img { animation: dl2-op4-fade .6s ease-out both; }
}

.dl-carousel {
	position: relative;
	overflow: hidden;
}

.dl-carousel__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.dl-carousel__slide--active {
	opacity: 1;
	pointer-events: auto;
}

.dl-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--dl2-border);
	background: rgba(14, 11, 26, 0.7);
	color: var(--dl2-text);
	font-size: 16px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
}

.dl-carousel__arrow:hover {
	background: var(--dl2-accent);
	border-color: var(--dl2-accent);
	color: #140E2E;
}

.dl-carousel__arrow:focus {
	outline: none;
	background: rgba(14, 11, 26, 0.7);
	border-color: var(--dl2-border);
	color: var(--dl2-text);
}

.dl-carousel__arrow:focus-visible {
	box-shadow: 0 0 0 2px var(--dl2-accent);
}

.dl-carousel__arrow::before {
	content: '';
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
}

.dl-carousel__arrow--prev {
	left: 12px;
}

.dl-carousel__arrow--prev::before {
	transform: rotate(-135deg);
	margin-left: 2px;
}

.dl-carousel__arrow--next {
	right: 12px;
}

.dl-carousel__arrow--next::before {
	transform: rotate(45deg);
	margin-left: -2px;
}

.dl-carousel__dots {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	z-index: 2;
}

.dl-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(245, 243, 255, 0.3);
	cursor: pointer;
}

.dl-carousel__dot--active {
	width: 20px;
	border-radius: 4px;
	background: var(--dl2-accent);
}

.dl-carousel__dot:hover,
.dl-carousel__dot:focus,
.dl-carousel__dot:active {
	background: rgba(245, 243, 255, 0.3);
	outline: none;
}

.dl-carousel__dot--active:hover,
.dl-carousel__dot--active:focus,
.dl-carousel__dot--active:active {
	background: var(--dl2-accent);
}

.dl2-hero__media-badge {
	position: absolute;
	left: 20px;
	bottom: 20px;
	background: rgba(14, 11, 26, 0.85);
	backdrop-filter: blur(6px);
	border: 1px solid var(--dl2-border);
	color: var(--dl2-text);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.3px;
	padding: 8px 16px;
	border-radius: 999px;
}

@media (prefers-reduced-motion: no-preference) {
	.dl2-hero__media-badge { animation: dl2-op4-fade .6s ease-out .3s both; }
}

.dl2-hero__content {
	display: flex;
	flex-direction: column;
}

@media (prefers-reduced-motion: no-preference) {
	.dl2-hero__content > .dl2-eyebrow,
	.dl2-hero__title,
	.dl2-hero__lead {
		animation: dl2-op4-fade .6s ease-out both;
	}

	.dl2-hero__content > .dl2-eyebrow { animation-delay: .05s; }
	.dl2-hero__title { animation-delay: .12s; }
	.dl2-hero__lead { animation-delay: .2s; }
}

@keyframes dl2-op4-fade {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

.dl2-hero__title {
	font-family: 'Syne', sans-serif;
	font-weight: 700;
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.12;
	margin: 0 0 14px;
	color: var(--dl2-text);
}

.dl2-hero__lead {
	color: var(--dl2-text-muted);
	font-size: 15.5px;
	margin: 0 0 24px;
}

/* Tarjeta de compra (dentro del hero, columna derecha) */

.dl2-buy-card {
	background: var(--dl2-onix-2);
	border: 1px solid var(--dl2-border);
	border-radius: 18px;
	padding: 26px;
	box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: no-preference) {
	.dl2-buy-card { animation: dl2-op4-materialize .65s cubic-bezier(.2, .9, .25, 1) .18s both; }
}

@keyframes dl2-op4-materialize {
	0% { opacity: 0; transform: scale(.95); box-shadow: 0 0 0 0 rgba(198, 255, 61, 0); }
	60% { opacity: 1; transform: scale(1.012); box-shadow: 0 0 46px 6px rgba(198, 255, 61, .28); }
	100% { opacity: 1; transform: scale(1); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.5); }
}

.dl2-buy-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}

.dl2-buy-card__head h3 {
	margin: 0 0 4px;
	font-size: 19px;
	font-family: 'Syne', sans-serif;
	color: var(--dl2-text);
}

.dl2-buy-card__head p {
	margin: 0;
	color: var(--dl2-text-muted);
	font-size: 13px;
}

.dl2-ring {
	position: relative;
	width: 76px;
	height: 76px;
	flex: 0 0 auto;
}

.dl2-ring svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.dl2-ring__track {
	fill: none;
	stroke: rgba(245, 243, 255, 0.1);
	stroke-width: 10;
}

.dl2-ring__fill {
	fill: none;
	stroke: var(--dl2-accent);
	stroke-width: 10;
	stroke-linecap: round;
	stroke-dashoffset: var(--dl2-ring-offset);
}

@media (prefers-reduced-motion: no-preference) {
	.dl2-ring__fill {
		animation: dl2-op4-ring-draw 1.4s cubic-bezier(.2, .8, .2, 1) .4s backwards;
	}
}

@keyframes dl2-op4-ring-draw {
	from { stroke-dashoffset: var(--dl2-ring-circumf); }
	to { stroke-dashoffset: var(--dl2-ring-offset); }
}

.dl2-ring__label {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.1;
}

.dl2-ring__label strong {
	font-family: 'Syne', sans-serif;
	font-size: 16px;
	color: var(--dl2-text);
}

.dl2-ring__label span {
	font-size: 9px;
	color: var(--dl2-text-muted-2);
	text-transform: uppercase;
}

.dl2-buy-card__urgency {
	font-size: 12.5px;
	color: var(--dl2-text-muted);
	margin: 0;
}

.dl2-buy-card__date {
	font-size: 12.5px;
	color: var(--dl2-text-muted);
	margin: 4px 0 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--dl2-border);
}

.dl2-packages {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 16px;
}

.dl2-package {
	background: rgba(245, 243, 255, 0.05);
	border: 1px solid var(--dl2-border);
	border-radius: 10px;
	padding: 10px 6px;
	color: var(--dl2-text);
	cursor: pointer;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-family: inherit;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.dl2-package:hover {
	border-color: var(--dl2-accent);
	transform: translateY(-2px);
}

.dl2-package.dl-package--selected {
	background: var(--dl2-accent-soft);
	border-color: var(--dl2-accent);
	transform: translateY(-2px);
	box-shadow: 0 8px 16px -10px rgba(198, 255, 61, .5);
}

.dl2-package__qty {
	font-size: 16px;
	font-weight: 700;
	font-family: 'Syne', sans-serif;
}

.dl2-package__unit {
	font-size: 10.5px;
	color: var(--dl2-text-muted);
	text-transform: uppercase;
}

.dl2-custom-qty {
	margin-bottom: 14px;
}

.dl2-custom-qty__label {
	display: block;
	font-size: 11.5px;
	color: var(--dl2-text-muted);
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.dl2-stepper {
	display: flex;
	align-items: center;
	gap: 10px;
}

.dl2-stepper .dl-stepper__btn {
	width: 36px;
	height: 36px;
	padding: 0;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	border: 1px solid var(--dl2-border);
	background: rgba(245, 243, 255, 0.05);
	color: var(--dl2-text);
	font-size: 18px;
	cursor: pointer;
	flex: 0 0 auto;
	transition: border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.dl2-stepper .dl-stepper__btn:hover {
	border-color: var(--dl2-accent);
	color: var(--dl2-accent);
}

.dl2-stepper .dl-stepper__btn:active {
	transform: scale(.9);
}

.dl2-stepper__input {
	flex: 1 1 auto;
	text-align: center;
	background: rgba(245, 243, 255, 0.05);
	border: 1px solid var(--dl2-border);
	border-radius: 8px;
	color: var(--dl2-text);
	font-family: 'Syne', sans-serif;
	font-size: 16px;
	font-weight: 700;
	padding: 8px;
}

.dl2-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(245, 243, 255, 0.05);
	border: 1px solid var(--dl2-border);
	border-radius: 10px;
	padding: 12px 16px;
	margin-bottom: 20px;
}

.dl2-total span {
	font-size: 11.5px;
	letter-spacing: 0.6px;
	color: var(--dl2-text-muted);
}

.dl2-total strong {
	font-family: 'Syne', sans-serif;
	font-size: 20px;
	color: var(--dl2-accent);
}

.dl2-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dl2-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 12.5px;
	color: var(--dl2-text-muted);
	flex: 1 1 auto;
}

.dl2-field input,
.dl2-field select {
	background: rgba(245, 243, 255, 0.05);
	border: 1px solid var(--dl2-border);
	border-radius: 8px;
	padding: 10px 12px;
	color: var(--dl2-text);
	font-size: 14px;
}

.dl2-field input:focus,
.dl2-field select:focus {
	outline: none;
	border-color: var(--dl2-accent);
}

.dl2-field input.dl-field--invalid {
	border-color: var(--dl2-error);
}

.dl2-field-row {
	display: flex;
	gap: 10px;
}

.dl2-field-error {
	margin: -6px 0 0;
	color: var(--dl2-error);
	font-size: 12px;
}

.dl2-summary-line {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--dl2-text-muted);
}

.dl2-summary-line strong {
	color: var(--dl2-accent);
}

.dl2-checkbox-field {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--dl2-text-muted);
}

.dl2-checkbox-field input {
	margin-top: 3px;
	flex-shrink: 0;
	accent-color: var(--dl2-accent);
}

.dl2-checkbox-field a {
	color: var(--dl2-text);
	text-decoration: underline;
}

.dl2-form .dl2-btn--primary.dl2-btn--lg.dl2-btn--block {
	position: relative;
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	.dl2-form .dl2-btn--primary.dl2-btn--lg.dl2-btn--block {
		animation: dl2-op4-cta-glow 2.8s ease-in-out infinite;
	}
}

@keyframes dl2-op4-cta-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(198, 255, 61, .4); }
	50% { box-shadow: 0 0 18px 2px rgba(124, 92, 255, .4); }
}

.dl2-legal-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
	margin: 16px 0 0;
	padding: 10px;
	background: rgba(198, 255, 61, 0.08);
	border: 1px solid rgba(198, 255, 61, .4);
	border-radius: 10px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--dl2-text);
}

/* Como funciona */

.dl2-section {
	padding: 64px 0 0;
}

.dl2-section__intro {
	max-width: 720px;
	margin: 0 auto 0;
	padding-bottom: 56px;
}

/* Timeline */

.dl2-timeline {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
	position: relative;
}

.dl2-timeline__step {
	display: flex;
	gap: 18px;
	padding-bottom: 28px;
	position: relative;
}

.dl2-timeline__step:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 19px;
	top: 40px;
	bottom: 0;
	width: 1px;
	background: var(--dl2-border);
}

.dl2-timeline__num {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--dl2-accent);
	color: var(--dl2-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	font-family: 'Syne', sans-serif;
	background: rgba(198, 255, 61, 0.06);
}

.dl2-timeline__step h3 {
	margin: 4px 0 4px;
	font-size: 17px;
	font-family: 'Syne', sans-serif;
	color: var(--dl2-text);
}

.dl2-timeline__step p {
	margin: 0;
	color: var(--dl2-text-muted);
	font-size: 14.5px;
}

/* Franja de confianza */

.dl2-trust-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	background: rgba(245, 243, 255, 0.035);
	border: 1px solid var(--dl2-border);
	border-radius: 14px;
	padding: 20px;
}

.dl2-trust-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--dl2-text);
	flex: 1 1 200px;
}

.dl2-trust-item__icon {
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(198, 255, 61, .16), rgba(124, 92, 255, .16));
	color: var(--dl2-accent);
}

.dl2-trust-item__icon svg {
	width: 18px;
	height: 18px;
}

/* Marquee de ganadores */

.dl2-marquee {
	border-top: 1px solid var(--dl2-border);
	border-bottom: 1px solid var(--dl2-border);
	overflow: hidden;
	padding: 18px 0;
	margin-top: 48px;
}

.dl2-marquee__track {
	display: flex;
	gap: 18px;
	width: max-content;
}

@media (prefers-reduced-motion: no-preference) {
	.dl2-marquee__track { animation: dl2-op4-scrollX 28s linear infinite; }
	.dl2-marquee:hover .dl2-marquee__track { animation-play-state: paused; }
}

@keyframes dl2-op4-scrollX {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.dl2-marquee__card {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(245, 243, 255, 0.05);
	border: 1px solid var(--dl2-border);
	border-radius: 12px;
	padding: 9px 16px;
}

.dl2-marquee__card i {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--dl2-violet), var(--dl2-accent));
	display: block;
	flex-shrink: 0;
}

.dl2-marquee__card b { display: block; font-size: 12.5px; color: var(--dl2-text); }
.dl2-marquee__card span { display: block; font-size: 11px; color: var(--dl2-text-muted); }

/* Prueba / foto de ganador */

.dl2-proof-photo {
	padding: clamp(40px, 6vw, 64px) 0 clamp(50px, 6vw, 72px);
}

.dl2-proof-photo__inner {
	border-radius: 22px;
	overflow: hidden;
	aspect-ratio: 21 / 9;
	position: relative;
}

.dl2-proof-photo__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 20%;
}

@media (prefers-reduced-motion: no-preference) {
	/* Zoom lento y continuo ("ken burns"): le da vida a la foto estatica sin
	   llamar demasiado la atencion sobre el resto de la seccion. */
	.dl2-proof-photo__bg { animation: dl2-op4-kenburns 18s ease-in-out infinite alternate; }
}

@keyframes dl2-op4-kenburns {
	from { transform: scale(1); }
	to { transform: scale(1.08); }
}

.dl2-proof-photo__inner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(8, 6, 16, 1) 0%, rgba(8, 6, 16, 1) 58%, transparent 92%);
}

.dl2-proof-photo__text {
	position: relative;
	z-index: 1;
	padding: clamp(20px, 4vw, 40px);
	max-width: 40ch;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.dl2-proof-photo__text span {
	color: var(--dl2-accent);
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 8px;
	display: block;
}

.dl2-proof-photo__text h3 {
	font-family: 'Syne', sans-serif;
	margin: 0 0 8px;
	font-size: clamp(20px, 3vw, 26px);
	color: var(--dl2-text);
}

.dl2-proof-photo__text p {
	margin: 0 0 16px;
	color: #D8D4F0;
	font-size: 14.5px;
}

@media (max-width: 760px) {
	.dl2-proof-photo__inner { aspect-ratio: 4 / 5; }
	.dl2-proof-photo__inner::after {
		background: linear-gradient(0deg, rgba(8, 6, 16, 1) 0%, rgba(8, 6, 16, 1) 60%, transparent 92%);
	}
	.dl2-proof-photo__text { justify-content: flex-end; max-width: none; }
}

/* Footer */

.dl2-footer {
	border-top: 1px solid var(--dl2-border);
	padding: 40px 0 0;
	background: #0A0816;
}

.dl2-footer__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: space-between;
	align-items: flex-start;
	padding-bottom: 32px;
}

.dl2-footer__brand p {
	color: var(--dl2-text-muted);
	font-size: 13.5px;
	max-width: 320px;
	margin-top: 10px;
}

.dl2-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 64px;
}

.dl2-footer__col h5 {
	font-family: 'Syne', sans-serif;
	font-size: 11.5px;
	letter-spacing: 0.8px;
	color: var(--dl2-text-muted-2);
	margin: 0 0 10px;
}

.dl2-footer__col p {
	color: var(--dl2-text-muted);
	font-size: 13.5px;
	margin: 4px 0;
}

.dl2-social a {
	color: var(--dl2-text-muted);
	text-decoration: none;
	font-size: 13.5px;
}

.dl2-social a:hover {
	color: var(--dl2-accent);
}

.dl2-footer__legal {
	border-top: 1px solid var(--dl2-border);
	padding: 20px 24px 32px;
	text-align: center;
}

.dl2-footer__legal p {
	color: var(--dl2-text-muted);
	font-size: 12px;
	margin: 0 0 10px;
}

.dl2-footer__links a {
	color: var(--dl2-text-muted);
	text-decoration: underline;
}

.dl2-footer__links a:hover {
	color: var(--dl2-accent);
}

@media (max-width: 640px) {
	.dl2-footer__nav {
		gap: 32px;
	}

	.dl2-packages {
		grid-template-columns: repeat(2, 1fr);
	}

	.dl2-field-row {
		flex-direction: column;
	}

	.dl-carousel__arrow {
		width: 36px;
		height: 36px;
		font-size: 15px;
	}

	.dl-carousel__arrow::before {
		width: 6px;
		height: 6px;
		border-width: 1.5px;
	}

	.dl-carousel__arrow--prev {
		left: 6px;
	}

	.dl-carousel__arrow--next {
		right: 6px;
	}

	.dl-carousel__dots {
		bottom: 8px;
	}

	.dl-carousel__dot {
		width: 6px;
		height: 6px;
	}

	.dl-carousel__dot--active {
		width: 14px;
	}
}

/* Boton "subir" (scroll to top) del tema */
body.dsuerte-landing-op4 #ast-scroll-top {
	border-radius: 50% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

body.dsuerte-landing-op4 #ast-scroll-top .ast-icon.icon-arrow svg {
	transform: rotate(180deg) !important;
	margin: 0 !important;
}