/**
 * Estilos específicos para Arcanos
 * Diseño inspirado en Mystik - Elegante y profesional
 *
 * @package Mi_Arcano
 */

/*--------------------------------------------------------------
# Página de Arcano Individual
--------------------------------------------------------------*/
.arcano-imagen-destacada {
	text-align: center;
	margin: calc(var(--spacing-unit) * 4) 0;
	position: relative;
}

.arcano-imagen-destacada::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 120%;
	height: 120%;
	background: radial-gradient(circle, rgba(201, 169, 97, 0.08) 0%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}

.arcano-imagen-destacada picture,
.arcano-imagen-destacada img {
	max-width: 100%;
	max-height: 600px;
	border-radius: var(--border-radius-lg);
	border: 2px solid var(--color-border);
	box-shadow: var(--shadow-md);
	position: relative;
	z-index: 1;
	transition: var(--transition);
}

.arcano-imagen-destacada picture:hover img,
.arcano-imagen-destacada img:hover {
	border-color: var(--color-border-gold-light);
	box-shadow: var(--shadow-gold-lg);
	transform: scale(1.02);
}

.arcano-informacion {
	margin: calc(var(--spacing-unit) * 4) 0;
}

.arcano-significado {
	background: var(--color-bg-card);
	border-left: 3px solid var(--color-gold);
	padding: calc(var(--spacing-unit) * 2);
	margin-bottom: var(--spacing-unit);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-sm);
	position: relative;
	overflow: hidden;
}

.arcano-significado::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgba(201, 169, 97, 0.03) 0%, transparent 70%);
	pointer-events: none;
}

.arcano-significado h2 {
	margin-top: 0;
	font-size: 2rem;
	color: var(--color-text);
}

.arcano-significado p {
	font-size: 1.1rem;
	line-height: 1.9;
	margin: 0;
	color: var(--color-text-light);
}

.arcano-detalles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--spacing-unit);
	margin: calc(var(--spacing-unit) * 2) 0;
}

.arcano-luz,
.arcano-sombra {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-left: 3px solid;
	border-radius: var(--border-radius-lg);
	padding: calc(var(--spacing-unit) * 1.5);
	box-shadow: var(--shadow-sm);
	transition: var(--transition);
	position: relative;
	overflow: hidden;
}

.arcano-luz {
	border-left-color: var(--color-gold);
}

.arcano-sombra {
	border-left-color: var(--color-text-muted);
}

.arcano-luz:hover,
.arcano-sombra:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
	border-color: var(--color-border-gold-light);
}

.arcano-luz h3,
.arcano-sombra h3 {
	margin-top: 0;
	font-size: 1.5rem;
	color: var(--color-text);
}

.arcano-luz h3 {
	color: var(--color-text);
}

.arcano-sombra h3 {
	color: var(--color-text-light);
}

.arcano-aspectos {
	margin: calc(var(--spacing-unit) * 4) 0;
}

.arcano-aspectos h2 {
	font-size: 2.25rem;
	margin-bottom: calc(var(--spacing-unit) * 1.5);
	text-align: center;
	color: var(--color-text);
}

.aspectos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--spacing-unit);
	margin-top: var(--spacing-unit);
}

.aspecto {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	padding: calc(var(--spacing-unit) * 1.5);
	transition: var(--transition);
	box-shadow: var(--shadow-sm);
	position: relative;
	overflow: hidden;
}

.aspecto::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, transparent 0%, var(--color-gold) 50%, transparent 100%);
	opacity: 0;
	transition: var(--transition);
}

.aspecto:hover {
	border-color: var(--color-border-gold-light);
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}

.aspecto:hover::before {
	opacity: 1;
}

.aspecto h4 {
	color: var(--color-text);
	font-size: 1.3rem;
	margin-top: 0;
	margin-bottom: 0.75rem;
}

.aspecto p {
	margin: 0;
	line-height: 1.8;
	color: var(--color-text-light);
}

.arcano-consejo {
	background: var(--color-bg-card);
	border: 2px solid var(--color-border-gold-light);
	border-radius: var(--border-radius-lg);
	padding: calc(var(--spacing-unit) * 2.5);
	margin: calc(var(--spacing-unit) * 4) 0;
	text-align: center;
	box-shadow: var(--shadow-gold);
	position: relative;
	overflow: hidden;
}

.arcano-consejo::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(201, 169, 97, 0.05) 0%, transparent 70%);
	pointer-events: none;
	animation: rotate 20s linear infinite;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.arcano-consejo h3 {
	font-size: 1.75rem;
	margin-bottom: var(--spacing-unit);
	position: relative;
	z-index: 1;
	color: var(--color-text);
}

.consejo-texto {
	font-size: 1.2rem;
	font-style: italic;
	color: var(--color-gold-light);
	line-height: 1.9;
	margin: 0;
	position: relative;
	z-index: 1;
}

.arcano-compatibilidades {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	padding: calc(var(--spacing-unit) * 1.5);
	margin: var(--spacing-unit) 0;
	box-shadow: var(--shadow-sm);
}

.arcano-compatibilidades h3 {
	margin-top: 0;
	font-size: 1.5rem;
	color: var(--color-text);
}

/*--------------------------------------------------------------
# Sección de Predicciones por Arcano
--------------------------------------------------------------*/
.predicciones-arcano {
	margin: calc(var(--spacing-unit) * 4) 0;
	padding-top: calc(var(--spacing-unit) * 2);
	border-top: 1px solid var(--color-border);
	position: relative;
}

.predicciones-arcano::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	width: 100px;
	height: 1px;
	background: linear-gradient(90deg, var(--color-gold) 0%, transparent 100%);
}

.predicciones-arcano h2 {
	font-size: 2.25rem;
	margin-bottom: calc(var(--spacing-unit) * 1.5);
	color: var(--color-text);
}

/*--------------------------------------------------------------
# Página de Signos del Zodiaco
--------------------------------------------------------------*/
.signo-informacion {
	margin: calc(var(--spacing-unit) * 4) 0;
}

.signo-descripcion {
	background: var(--color-bg-card);
	border-left: 3px solid var(--color-gold);
	padding: calc(var(--spacing-unit) * 2);
	margin-bottom: var(--spacing-unit);
	line-height: 1.9;
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-sm);
	font-size: 1.05rem;
	color: var(--color-text-light);
}

.signo-info {
	color: var(--color-text-light);
	font-size: 1.1rem;
	margin-top: 0.5rem;
	font-style: italic;
}

.signo-compatibilidades {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	padding: calc(var(--spacing-unit) * 1.5);
	margin: var(--spacing-unit) 0;
	box-shadow: var(--shadow-sm);
}

.signo-compatibilidades h3 {
	margin-top: 0;
	font-size: 1.5rem;
	color: var(--color-text);
}

.predicciones-signo {
	margin: calc(var(--spacing-unit) * 4) 0;
	padding-top: calc(var(--spacing-unit) * 2);
	border-top: 1px solid var(--color-border);
	position: relative;
}

.predicciones-signo::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	width: 100px;
	height: 1px;
	background: linear-gradient(90deg, var(--color-gold) 0%, transparent 100%);
}

.predicciones-signo h2 {
	font-size: 2.25rem;
	margin-bottom: calc(var(--spacing-unit) * 1.5);
	color: var(--color-text);
}

/*--------------------------------------------------------------
# Predicción de Hoy
--------------------------------------------------------------*/
.prediccion-hoy {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	padding: calc(var(--spacing-unit) * 1.5);
	margin: var(--spacing-unit) 0;
	box-shadow: var(--shadow-sm);
	position: relative;
	overflow: hidden;
}

.prediccion-hoy::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at 50% 0%, rgba(201, 169, 97, 0.05) 0%, transparent 70%);
	pointer-events: none;
}

.prediccion-hoy.no-disponible {
	border-color: var(--color-border);
	text-align: center;
	color: var(--color-text-light);
	box-shadow: var(--shadow-sm);
}

.prediccion-titulo {
	color: var(--color-text);
	font-size: 1.75rem;
	margin-top: 0;
	margin-bottom: var(--spacing-unit);
	position: relative;
	z-index: 1;
}

.prediccion-contenido {
	line-height: 1.9;
	margin-bottom: var(--spacing-unit);
	font-size: 1.05rem;
	position: relative;
	z-index: 1;
	color: var(--color-text-light);
}

.prediccion-fecha {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	font-style: italic;
	position: relative;
	z-index: 1;
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media (max-width: 768px) {
	.arcano-detalles,
	.aspectos-grid {
		grid-template-columns: 1fr;
	}

	.arcano-imagen-destacada picture,
	.arcano-imagen-destacada img {
		max-height: 400px;
	}

	.arcano-consejo {
		padding: calc(var(--spacing-unit) * 1.5);
	}

	.arcano-significado h2 {
		font-size: 1.75rem;
	}

	.arcano-aspectos h2,
	.predicciones-arcano h2,
	.predicciones-signo h2 {
		font-size: 1.75rem;
	}
}

@media (max-width: 480px) {
	.arcano-imagen-destacada picture,
	.arcano-imagen-destacada img {
		max-height: 300px;
	}

	.consejo-texto {
		font-size: 1.1rem;
	}
}