/* Cantik Promos — modal de promoción (frontend)
   Diseño acorde a cantikderma.com: burgundy #6d2247, fucsia #e31c79,
   crema #fbf7f3, tipografía Montserrat. */

.cspromos-root {
	--csp-burgundy: #6d2247;
	--csp-fuchsia: #e31c79;
	--csp-cream: #fbf7f3;
	--csp-ink: #2a1620;
	--csp-ink-soft: #6b5560;
	--csp-line: #ecdde3;
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Oculto SOLO cuando tiene el atributo hidden. Si no lo tiene, se ve. */
.cspromos-root[hidden] { display: none !important; }

.cspromos-root {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	box-sizing: border-box;
}
.cspromos-root *, .cspromos-root *::before, .cspromos-root *::after { box-sizing: border-box; }

/* Overlay con desenfoque suave. Se atenúa con la animación pero NO decide
   la visibilidad del modal (el modal se ve aunque la clase open falle). */
.cspromos-overlay {
	position: absolute;
	inset: 0;
	background: var(--csp-overlay, rgba(42, 22, 32, .55));
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 1;
	transition: opacity .25s ease;
}

/* Caja del modal */
.cspromos-box {
	position: relative;
	background: var(--csp-bg, #fff);
	color: var(--csp-text, var(--csp-ink));
	border-radius: 20px;
	box-shadow: 0 24px 70px rgba(42, 22, 32, .32);
	max-width: 460px;
	width: calc(100% - 32px);
	margin: auto;
	overflow: hidden;
	/* VISIBLE por defecto. La visibilidad NO depende de ninguna clase JS,
	   así el modal se ve siempre que el contenedor no tenga [hidden]. */
	opacity: 1;
	transform: translateY(0) scale(1);
	transition: transform .28s cubic-bezier(.16, 1, .3, 1), opacity .28s ease;
}

/* Animación de entrada (opcional, solo mejora): si el JS marca el contenedor
   con .cspromos-animate ANTES de abrir, parte de un estado desplazado y luego
   .cspromos-open lo lleva al estado final. Si el JS no hace nada de esto, la
   caja ya está visible por las reglas de arriba. */
.cspromos-root.cspromos-animate:not(.cspromos-open) .cspromos-box {
	opacity: 0;
	transform: translateY(14px) scale(.97);
}
.cspromos-root.cspromos-open .cspromos-box {
	opacity: 1;
	transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
	.cspromos-box { transition: none; }
	.cspromos-root .cspromos-box { opacity: 1 !important; transform: none !important; }
}

/* Botón cerrar */
.cspromos-close {
	position: absolute;
	top: 12px; right: 14px;
	background: rgba(42, 22, 32, .55);
	color: #fff;
	border: 0;
	width: 38px; height: 38px;
	border-radius: 50%;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(42, 22, 32, .35);
	transition: background .15s, transform .15s;
	z-index: 10;
}
.cspromos-close:hover { background: rgba(42, 22, 32, .8); transform: scale(1.08); }

/* En layouts con imagen lateral/diagonal el box es flex; fijamos el tamaño de la
   X para que no la deforme el flex y siga siendo un círculo perfecto. */
.cspromos-layout-split-left .cspromos-close,
.cspromos-layout-split-right .cspromos-close,
.cspromos-layout-diagonal-left .cspromos-close,
.cspromos-layout-diagonal-right .cspromos-close {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
}

/* En pantalla completa, fijar la X arriba a la derecha de la ventana y
   garantizar que quede por encima del contenido centrado. */
.cspromos-layout-fullscreen .cspromos-close {
	position: fixed;
	top: 18px;
	right: 18px;
	width: 44px;
	height: 44px;
	font-size: 26px;
	z-index: 20;
}

/* Imagen */
.cspromos-image { line-height: 0; }
.cspromos-image img { display: block; width: 100%; height: auto; }

/* Contenido */
.cspromos-content { padding: 28px 28px 30px; }

.cspromos-title {
	margin: 0 0 12px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--csp-burgundy);
}

.cspromos-body { font-size: 15px; line-height: 1.6; color: var(--csp-text, var(--csp-ink-soft)); }
.cspromos-body p { margin: 0 0 10px; }
.cspromos-body p:last-child { margin-bottom: 0; }

/* Acciones */
.cspromos-actions {
	margin-top: 22px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.cspromos-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .01em;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s, box-shadow .15s, background .15s;
}
.cspromos-cta-primary {
	background: var(--csp-cta-bg, var(--csp-fuchsia));
	color: var(--csp-cta-text, #fff);
	box-shadow: 0 6px 18px rgba(227, 28, 121, .28);
}
.cspromos-cta-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 9px 24px rgba(227, 28, 121, .36);
}
.cspromos-cta-secondary {
	background: transparent;
	color: var(--csp-burgundy);
	border: 1.5px solid var(--csp-line);
}
.cspromos-cta-secondary:hover {
	border-color: var(--csp-burgundy);
	background: var(--csp-cream);
}

/* ===== Layouts ===== */

/* Centro (por defecto): ya cubierto arriba. */

/* Barra inferior */
.cspromos-layout-bottom-bar { align-items: flex-end; }
.cspromos-layout-bottom-bar .cspromos-box {
	max-width: 100%;
	width: 100%;
	margin: 0;
	border-radius: 0;
	display: flex;
	align-items: center;
	gap: 20px;
}
.cspromos-layout-bottom-bar .cspromos-overlay { background: transparent; pointer-events: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cspromos-layout-bottom-bar .cspromos-image { max-width: 120px; }
.cspromos-layout-bottom-bar .cspromos-content { flex: 1; padding: 18px 26px; }
.cspromos-layout-bottom-bar .cspromos-actions { margin-top: 10px; }

/* Esquina (corner) */
.cspromos-layout-corner { align-items: flex-end; justify-content: flex-end; }
.cspromos-layout-corner .cspromos-overlay { background: transparent; pointer-events: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cspromos-layout-corner .cspromos-box {
	max-width: 360px;
	margin: 0 24px 24px 0;
}

/* Lateral (side) */
.cspromos-layout-side { align-items: stretch; justify-content: flex-end; }
.cspromos-layout-side .cspromos-box {
	max-width: 380px;
	width: 380px;
	margin: 0;
	border-radius: 0;
	height: 100%;
}
.cspromos-root.cspromos-animate.cspromos-layout-side:not(.cspromos-open) .cspromos-box {
	opacity: 0;
	transform: translateX(24px);
}
.cspromos-open.cspromos-layout-side .cspromos-box { transform: translateX(0); }

/* Pantalla completa */
.cspromos-layout-fullscreen .cspromos-box {
	max-width: 100%;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.cspromos-layout-fullscreen .cspromos-content { max-width: 560px; }

@media (max-width: 600px) {
	.cspromos-layout-side .cspromos-box,
	.cspromos-layout-corner .cspromos-box {
		max-width: 100%;
		width: calc(100% - 32px);
		margin: auto;
	}
	.cspromos-layout-bottom-bar .cspromos-box { flex-direction: column; align-items: stretch; }
	.cspromos-content { padding: 24px 22px 26px; }
	.cspromos-title { font-size: 21px; }
}

/* ===== Badge / etiqueta flotante ===== */
.cspromos-badge {
	position: absolute;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 15px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(42, 22, 32, .22);
	white-space: nowrap;
	pointer-events: none;
}
/* Estilo sólido */
.cspromos-badge-solid {
	background: var(--csp-badge-bg, #e31c79);
	color: var(--csp-badge-text, #fff);
}
/* Estilo blanco con borde */
.cspromos-badge-outline {
	background: #fff;
	color: var(--csp-badge-bg, #e31c79);
	border: 1.5px solid var(--csp-badge-bg, #e31c79);
}
/* Estilo transparente: solo borde y texto de color, sin relleno.
   Usa el "color de fondo" elegido como color de borde/texto. */
.cspromos-badge-ghost {
	background: transparent;
	color: var(--csp-badge-bg, #e31c79);
	border: 1.5px solid var(--csp-badge-bg, #e31c79);
	box-shadow: none;
}

/* Posiciones */
.cspromos-badge-top-center { top: 14px; left: 50%; transform: translateX(-50%); }
.cspromos-badge-top-left   { top: 14px; left: 14px; }
.cspromos-badge-top-right  { top: 14px; right: 14px; }

/* Cinta diagonal en la esquina superior derecha */
.cspromos-badge-ribbon {
	top: 18px;
	right: -34px;
	transform: rotate(45deg);
	border-radius: 0;
	padding: 6px 44px;
	box-shadow: 0 3px 10px rgba(42, 22, 32, .28);
}
.cspromos-badge-ribbon.cspromos-badge-outline { border-radius: 0; }

/* Punto pulsante */
.cspromos-badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	position: relative;
	flex-shrink: 0;
}
.cspromos-badge-dot::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: currentColor;
	animation: cspromos-pulse 1.6s ease-out infinite;
}
@keyframes cspromos-pulse {
	0%   { transform: scale(1);   opacity: .7; }
	70%  { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.cspromos-badge-dot::after { animation: none; }
}

/* ===== Composiciones con imagen lateral ===== */

/* Imagen a un lado: el box se vuelve fila, imagen 45% + contenido 55%. */
.cspromos-layout-split-left .cspromos-box,
.cspromos-layout-split-right .cspromos-box {
	max-width: 720px;
	display: flex;
	flex-direction: row;
	align-items: stretch;
}
.cspromos-layout-split-left .cspromos-image,
.cspromos-layout-split-right .cspromos-image {
	flex: 0 0 45%;
	min-height: 100%;
}
.cspromos-layout-split-left .cspromos-image img,
.cspromos-layout-split-right .cspromos-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cspromos-layout-split-left .cspromos-content,
.cspromos-layout-split-right .cspromos-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 30px 30px 32px;
	min-width: 0;
}
/* Imagen a la derecha: invertir el orden visual. */
.cspromos-layout-split-right .cspromos-image { order: 2; }
.cspromos-layout-split-right .cspromos-content { order: 1; }

/* ===== Composiciones con imagen cortada en diagonal ===== */

.cspromos-layout-diagonal-left .cspromos-box,
.cspromos-layout-diagonal-right .cspromos-box {
	max-width: 720px;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	position: relative;
}
.cspromos-layout-diagonal-left .cspromos-image,
.cspromos-layout-diagonal-right .cspromos-image {
	flex: 0 0 50%;
	min-height: 100%;
}
.cspromos-layout-diagonal-left .cspromos-image img,
.cspromos-layout-diagonal-right .cspromos-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cspromos-layout-diagonal-left .cspromos-content,
.cspromos-layout-diagonal-right .cspromos-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 30px 30px 32px;
	min-width: 0;
}
/* Corte diagonal: la imagen se recorta con un ángulo usando clip-path.
   El contenido recibe padding extra en el lado del corte para que el texto
   nunca quede debajo de la diagonal de la imagen. */
.cspromos-layout-diagonal-left .cspromos-image {
	clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
}
.cspromos-layout-diagonal-left .cspromos-content {
	padding-left: 40px;
}
.cspromos-layout-diagonal-right .cspromos-image {
	order: 2;
	clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}
.cspromos-layout-diagonal-right .cspromos-content {
	order: 1;
	padding-right: 40px;
}

/* Responsive: en móvil, las composiciones laterales/diagonales se apilan. */
@media (max-width: 640px) {
	.cspromos-layout-split-left .cspromos-box,
	.cspromos-layout-split-right .cspromos-box,
	.cspromos-layout-diagonal-left .cspromos-box,
	.cspromos-layout-diagonal-right .cspromos-box {
		flex-direction: column;
		max-width: 460px;
	}
	.cspromos-layout-split-left .cspromos-image,
	.cspromos-layout-split-right .cspromos-image,
	.cspromos-layout-diagonal-left .cspromos-image,
	.cspromos-layout-diagonal-right .cspromos-image {
		flex: none;
		width: 100%;
		max-height: 220px;
		order: 0 !important;
		clip-path: none !important;
		margin: 0 !important;
	}
	.cspromos-layout-split-left .cspromos-content,
	.cspromos-layout-split-right .cspromos-content,
	.cspromos-layout-diagonal-left .cspromos-content,
	.cspromos-layout-diagonal-right .cspromos-content {
		order: 0 !important;
	}
}

/* ===== Efectos de imagen ===== */
.cspromos-image { position: relative; overflow: hidden; }

/* Reflejo / shine: un brillo diagonal que cruza la imagen periódicamente. */
.cspromos-fx-shine::after {
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
	width: 50%;
	height: 100%;
	background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
	transform: skewX(-18deg);
	animation: cspromos-shine 4.5s ease-in-out infinite;
	pointer-events: none;
}
@keyframes cspromos-shine {
	0%   { left: -75%; }
	35%  { left: 130%; }
	100% { left: 130%; }
}

/* Zoom lento tipo Ken Burns. */
.cspromos-fx-zoom img {
	animation: cspromos-kenburns 12s ease-in-out infinite alternate;
	transform-origin: center;
}
@keyframes cspromos-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.12); }
}

/* Entrada con fundido + leve subida. */
.cspromos-fx-fade img {
	animation: cspromos-fade-in 1s ease-out both;
}
@keyframes cspromos-fade-in {
	from { opacity: 0; transform: scale(1.04); }
	to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.cspromos-fx-shine::after,
	.cspromos-fx-zoom img,
	.cspromos-fx-fade img { animation: none; }
}