/* ==========================================================================
   DataClever · Flip Cards (tarjetas que giran: frente / reverso)
   ========================================================================== */

.dc-flip {
	/* Colores de la marca */
	--dc-primary: #675df6;
	--dc-primary-soft: #8f8ff2;
	--dc-tint2: #b7b7ed;
	--dc-accent: #00dcb1;
	--dc-accent2: #01f96d;
	--dc-ink: #090d19;
	--dc-white: #ffffff;
	--dc-alto: 420px; /* altura de cada tarjeta */
	--dc-separacion: 36px; /* espacio entre tarjetas */
	--dc-fondo: #090d19; /* fondo del bloque */
	--dc-card: #111a30; /* color base de las tarjetas */
	--dc-card2: #0c1222; /* tono inferior del degradado */

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--dc-separacion);
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 24px 0;
	background: var(--dc-fondo);
	font-family: Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}

.dc-flip *,
.dc-flip *::before,
.dc-flip *::after {
	box-sizing: border-box;
}

.dc-flip__card {
	perspective: 1200px;
	height: var(--dc-alto);
	cursor: pointer;
	outline: none;
}

.dc-flip__inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.75s cubic-bezier(0.4, 0.2, 0.2, 1);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

@media (hover: hover) {
	.dc-flip__card:hover .dc-flip__inner {
		transform: rotateY(180deg);
	}
}

.dc-flip__card.is-flipped .dc-flip__inner,
.dc-flip__card:focus-visible .dc-flip__inner {
	transform: rotateY(180deg);
}

/* Arreglo Safari / Mac: se oculta la cara que no corresponde a mitad del giro */
.dc-flip__face {
	transition: visibility 0s linear 0.37s;
}

.dc-flip__back {
	visibility: hidden;
}

@media (hover: hover) {
	.dc-flip__card:hover .dc-flip__front {
		visibility: hidden;
	}

	.dc-flip__card:hover .dc-flip__back {
		visibility: visible;
	}
}

.dc-flip__card.is-flipped .dc-flip__front,
.dc-flip__card:focus-visible .dc-flip__front {
	visibility: hidden;
}

.dc-flip__card.is-flipped .dc-flip__back,
.dc-flip__card:focus-visible .dc-flip__back {
	visibility: visible;
}

.dc-flip__face {
	position: absolute;
	inset: 0;
	border-radius: 24px;
	padding: 40px 36px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* ---------- FRENTE ---------- */
.dc-flip__front {
	background: linear-gradient(165deg, var(--dc-card) 0%, var(--dc-card2) 100%);
	color: var(--dc-white);
	border: 1px solid rgba(143, 143, 242, 0.14);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 24px 50px -24px rgba(0, 0, 0, 0.8);
	transition:
		border-color 0.3s,
		box-shadow 0.3s,
		visibility 0s linear 0.37s;
	-webkit-transform: rotateY(0deg) translateZ(1px);
	transform: rotateY(0deg) translateZ(1px);
}

.dc-flip__card:hover .dc-flip__front {
	border-color: rgba(0, 220, 177, 0.45);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 24px 60px -18px rgba(0, 220, 177, 0.3);
}

.dc-flip__front::before {
	content: "";
	position: absolute;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	right: -90px;
	top: -110px;
	pointer-events: none;
	z-index: 0;
	background: radial-gradient(circle, rgba(0, 220, 177, 0.28) 0%, rgba(103, 93, 246, 0.18) 45%, transparent 70%);
	filter: blur(28px);
}

.dc-flip__front::after {
	content: "";
	position: absolute;
	width: 340px;
	height: 275px;
	right: -40px;
	top: -30px;
	pointer-events: none;
	z-index: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 205'%3E%3Cpath fill='none' stroke='%2300DCB1' stroke-opacity='.55' stroke-width='1' d='M30 40L100 20M30 40L100 75M30 40L100 130M30 40L100 185M30 100L100 20M30 100L100 75M30 100L100 130M30 100L100 185M30 160L100 20M30 160L100 75M30 160L100 130M30 160L100 185M100 20L170 50M100 20L170 110M100 20L170 170M100 75L170 50M100 75L170 110M100 75L170 170M100 130L170 50M100 130L170 110M100 130L170 170M100 185L170 50M100 185L170 110M100 185L170 170M170 50L230 80M170 50L230 140M170 110L230 80M170 110L230 140M170 170L230 80M170 170L230 140'/%3E%3Cg fill='%2300DCB1'%3E%3Ccircle cx='30' cy='40' r='4'/%3E%3Ccircle cx='30' cy='100' r='4'/%3E%3Ccircle cx='30' cy='160' r='4'/%3E%3Ccircle cx='100' cy='75' r='4.5'/%3E%3Ccircle cx='100' cy='185' r='4'/%3E%3Ccircle cx='170' cy='110' r='4.5'/%3E%3Ccircle cx='230' cy='140' r='4'/%3E%3C/g%3E%3Cg fill='%238F8FF2'%3E%3Ccircle cx='100' cy='20' r='4'/%3E%3Ccircle cx='100' cy='130' r='4.5'/%3E%3Ccircle cx='170' cy='50' r='4'/%3E%3Ccircle cx='170' cy='170' r='4'/%3E%3C/g%3E%3Ccircle cx='230' cy='80' r='5' fill='%2301F96D'/%3E%3C/svg%3E") no-repeat center / contain;
	opacity: 0.45;
	filter: blur(0.7px);
	-webkit-mask-image: radial-gradient(ellipse at 75% 25%, #000 25%, transparent 72%);
	mask-image: radial-gradient(ellipse at 75% 25%, #000 25%, transparent 72%);
	animation: dcFlipNetFloat 9s ease-in-out infinite alternate;
}

@keyframes dcFlipNetFloat {
	from {
		transform: translate(0, 0) rotate(0deg);
		opacity: 0.38;
	}
	to {
		transform: translate(-8px, 6px) rotate(-2deg);
		opacity: 0.55;
	}
}

.dc-flip__front .dc-flip__icon,
.dc-flip__front .dc-flip__title,
.dc-flip__front .dc-flip__desc,
.dc-flip__front .dc-flip__list {
	position: relative;
	z-index: 1;
}

.dc-flip__icon {
	width: 84px;
	height: 84px;
	border-radius: 22px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 220, 177, 0.1);
	border: 1px solid rgba(0, 220, 177, 0.35);
	box-shadow: 0 0 28px -6px rgba(0, 220, 177, 0.35);
}

.dc-flip__icon svg {
	width: 46px;
	height: 46px;
}

.dc-flip__icon img {
	width: 46px;
	height: 46px;
	object-fit: contain;
}

/* !important: los temas suelen imponer estilos propios a h1-h6, p y ul */
.dc-flip .dc-flip__title {
	font-family: Quicksand, sans-serif !important;
	font-weight: 700 !important;
	font-size: 30px !important;
	line-height: 1.2 !important;
	color: var(--dc-white) !important;
	margin: 0 0 12px !important;
	text-transform: none;
}

.dc-flip .dc-flip__desc {
	font-size: 17px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 16px !important;
	max-width: 420px;
}

.dc-flip .dc-flip__list {
	list-style: none !important;
	display: inline-block;
	text-align: left;
	margin: 0 !important;
	padding: 0 !important;
}

.dc-flip .dc-flip__list li {
	position: relative;
	padding-left: 22px;
	margin: 6px 0;
	font-size: 17px;
	color: var(--dc-white);
	list-style: none !important;
}

.dc-flip .dc-flip__list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.45em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--dc-accent);
	box-shadow: 0 0 8px rgba(0, 220, 177, 0.7);
}

.dc-flip__hint {
	position: absolute;
	bottom: 22px;
	left: 0;
	right: 0;
	z-index: 1;
	font-family: Quicksand, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dc-tint2);
}

/* ---------- REVERSO ---------- */
.dc-flip__back {
	-webkit-transform: rotateY(180deg) translateZ(1px);
	transform: rotateY(180deg) translateZ(1px);
	background:
		radial-gradient(circle at 20% 0%, rgba(0, 220, 177, 0.2), transparent 60%),
		radial-gradient(circle at 90% 100%, rgba(103, 93, 246, 0.22), transparent 55%),
		linear-gradient(165deg, var(--dc-card) 0%, var(--dc-card2) 100%);
	border: 1px solid rgba(0, 220, 177, 0.45);
	color: var(--dc-white);
	box-shadow: 0 24px 60px -18px rgba(0, 220, 177, 0.3);
}

.dc-flip__eyebrow {
	font-family: Quicksand, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dc-accent);
	margin-bottom: 8px;
}

.dc-flip .dc-flip__back .dc-flip__title {
	margin-bottom: 26px !important;
}

.dc-flip__pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	max-width: 440px;
}

.dc-flip__pill {
	font-family: Quicksand, sans-serif;
	font-weight: 600;
	font-size: 17px;
	padding: 10px 20px;
	border-radius: 999px;
	color: var(--dc-white);
	background: rgba(0, 220, 177, 0.1);
	border: 1px solid var(--dc-accent);
}

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
	.dc-flip {
		grid-template-columns: 1fr;
		--dc-alto: 380px;
		--dc-separacion: 24px;
	}

	.dc-flip__face {
		padding: 32px 24px;
	}

	.dc-flip .dc-flip__title {
		font-size: 26px !important;
	}

	.dc-flip .dc-flip__desc,
	.dc-flip .dc-flip__list li {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dc-flip__inner {
		transition: none;
	}

	.dc-flip__front::after {
		animation: none;
	}
}