/* Tirada de Tarot Personal — estilos del frontend.
   Los colores/​tamaños principales se controlan con variables CSS
   generadas desde Tirada de Tarot > Configuración (ver class-tt-shortcode.php). */

.tt-wrap {
	--tt-fondo: #fdf1f0;
	--tt-panel: #ffffff;
	--tt-titulo: #2dd4bf;
	--tt-acento: #8b5cf6;
	--tt-texto: #55506b;
	--tt-seleccion: #2dd4bf;
	--tt-boton-fondo: #8b5cf6;
	--tt-boton-texto: #ffffff;
	--tt-cta-fondo: #2dd4bf;
	--tt-cta-texto: #ffffff;
	--tt-radio: 18px;

	box-sizing: border-box !important;
	background: var(--tt-fondo);
	padding: clamp(20px, 4vw, 40px);
	border-radius: var(--tt-radio);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--tt-texto);
	display: flex !important;
	flex-direction: column !important;
	gap: clamp(16px, 3vw, 24px);
	width: 100%;
	margin: 0 auto;
}

.tt-wrap *,
.tt-wrap *::before,
.tt-wrap *::after {
	box-sizing: border-box !important;
}

/* Reset defensivo: los temas y builders (Elementor, Hello Elementor, etc.)
   suelen traer estilos globales para "button" (alto mínimo, display:flex,
   radio, colores) e "img" que compiten con este widget. Las reglas de más
   abajo para .tt-slot / .tt-button-* / .tt-face img usan !important
   puntualmente para no depender de la especificidad del tema. */
.tt-wrap img {
	max-width: 100%;
	vertical-align: top;
}

.tt-panel {
	background: var(--tt-panel);
	border-radius: calc(var(--tt-radio) * 0.8);
	padding: clamp(20px, 4vw, 36px);
	text-align: center;
}

.tt-title {
	color: var(--tt-titulo) !important;
	font-family: inherit !important;
	font-size: clamp(22px, 3vw, 28px) !important;
	font-weight: 800 !important;
	letter-spacing: 0.03em !important;
	margin: 0 0 14px !important;
	text-transform: uppercase !important;
}

.tt-desc {
	font-size: 15px;
	line-height: 1.65;
	margin: 0 auto 10px;
	max-width: 56ch;
}

.tt-divider {
	width: 100%;
	max-width: 420px;
	border: none;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	margin: 18px auto;
}

.tt-subtitle {
	color: var(--tt-acento) !important;
	font-family: inherit !important;
	font-size: 20px !important;
	font-weight: 800 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	margin: 0 0 14px !important;
}

.tt-steps {
	list-style: none;
	counter-reset: tt-step;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	max-width: 56ch;
}

.tt-steps li {
	counter-increment: tt-step;
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
	font-size: 14.5px;
	line-height: 1.6;
}

.tt-steps li::before {
	content: counter(tt-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--tt-acento);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tt-status {
	font-weight: 700 !important;
	color: var(--tt-acento) !important;
	margin: 0 0 18px !important;
	font-size: 15px !important;
	text-transform: none !important;
}

.tt-grid {
	/* Grilla fija de 7 columnas (7x3 con el mazo de 21 cartas por defecto):
	   se mantiene en 7 columnas sea cual sea el ancho de pantalla, las
	   cartas simplemente se agrandan o achican para ocupar el espacio. */
	display: grid !important;
	grid-template-columns: repeat(7, 1fr) !important;
	gap: 6px !important;
	margin: 0 auto 22px;
	width: 100%;
}

@media (min-width: 480px) {
	.tt-grid {
		gap: 10px !important;
	}
}

@media (min-width: 720px) {
	.tt-grid {
		gap: 14px !important;
	}
}

.tt-grid .tt-slot {
	/* Reset a prueba de temas/builders: muchos definen estilos globales de
	   "button" (alto mínimo, flex, radio, color de fondo) con más
	   especificidad que una sola clase, así que acá forzamos los valores
	   con !important en vez de depender del orden de la hoja de estilos. */
	all: revert;
	box-sizing: border-box !important;
	display: block !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	background-image: none !important;
	color: inherit !important;
	font: inherit !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: normal !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer !important;
	width: 100% !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	aspect-ratio: 0.62 !important;
	perspective: 900px !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease !important;
}

.tt-grid .tt-slot:hover:not(:disabled):not(.is-selected) {
	transform: translateY(-3px) !important;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18) !important;
}

.tt-grid .tt-slot:disabled {
	cursor: default !important;
}

.tt-grid .tt-slot.is-selected {
	box-shadow: 0 0 0 3px var(--tt-seleccion), 0 8px 16px rgba(0, 0, 0, 0.18) !important;
	transform: translateY(-4px) !important;
}

.tt-grid .tt-slot.is-dimmed {
	opacity: 0.35 !important;
	box-shadow: none !important;
	transform: none !important;
}

.tt-slot-inner {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	transform-style: preserve-3d;
	transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.tt-face {
	position: absolute !important;
	inset: 0 !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	backface-visibility: hidden;
	background: #fff !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tt-face img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	display: block !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
}

.tt-face-back {
	transform: rotateY(0deg);
}

.tt-face-front {
	transform: rotateY(180deg);
}

.tt-wrap[data-animacion="flip"] .tt-slot.is-revealed .tt-slot-inner {
	transform: rotateY(180deg);
}

.tt-wrap[data-animacion="fade"] .tt-face {
	transition: opacity 0.5s ease;
	backface-visibility: visible;
}
.tt-wrap[data-animacion="fade"] .tt-face-back {
	transform: none;
	opacity: 1;
}
.tt-wrap[data-animacion="fade"] .tt-face-front {
	transform: none;
	opacity: 0;
}
.tt-wrap[data-animacion="fade"] .tt-slot.is-revealed .tt-face-back {
	opacity: 0;
}
.tt-wrap[data-animacion="fade"] .tt-slot.is-revealed .tt-face-front {
	opacity: 1;
}

.tt-wrap .tt-button-lectura,
.tt-wrap .tt-button-reiniciar,
.tt-wrap .tt-button-cta {
	/* Mismo criterio que en .tt-grid .tt-slot: forzamos el look del botón
	   con !important para que no dependa de los estilos globales de
	   "button"/"a" que traiga el tema o Elementor. */
	all: revert;
	box-sizing: border-box !important;
	display: inline-block !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	border: none !important;
	outline: none !important;
	background: var(--tt-boton-fondo) !important;
	background-image: none !important;
	color: var(--tt-boton-texto) !important;
	font-size: 15px !important;
	font-family: inherit !important;
	font-weight: 700 !important;
	line-height: normal !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
	margin: 0 !important;
	padding: 14px 28px !important;
	min-height: 0 !important;
	width: auto !important;
	border-radius: 999px !important;
	cursor: pointer !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease !important;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12) !important;
}

.tt-wrap .tt-button-cta {
	background: var(--tt-cta-fondo) !important;
	color: var(--tt-cta-texto) !important;
}

.tt-acciones {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
}

.tt-wrap .tt-button-lectura[hidden],
.tt-wrap .tt-button-reiniciar[hidden] {
	display: none !important;
}

.tt-wrap .tt-button-lectura:hover,
.tt-wrap .tt-button-reiniciar:hover,
.tt-wrap .tt-button-cta:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 12px 22px rgba(0, 0, 0, 0.16) !important;
}

.tt-loading {
	font-size: 13px;
	color: var(--tt-texto);
	opacity: 0.75;
	margin: 10px 0 0;
}

.tt-loading[hidden] {
	display: none;
}

.tt-panel-resultados[hidden] {
	display: none;
}

.tt-results-title {
	color: var(--tt-titulo) !important;
	font-family: inherit !important;
	font-size: 22px !important;
	font-weight: 800 !important;
	margin: 0 0 20px !important;
	text-transform: uppercase !important;
}

.tt-results-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 20px;
	margin-bottom: 24px;
	text-align: left;
}

.tt-result-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	animation: tt-fade-up 0.5s ease both;
}

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

.tt-result-card img {
	width: 100px !important;
	height: auto !important;
	max-width: 100px !important;
	border-radius: 8px !important;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15) !important;
	margin: 0 0 12px !important;
	display: block !important;
}

.tt-result-numero {
	color: var(--tt-seleccion) !important;
	font-family: inherit !important;
	font-size: 12px !important;
	letter-spacing: 0.1em !important;
	font-weight: 700 !important;
	text-transform: none !important;
	margin: 0 0 4px !important;
}

.tt-result-title {
	color: var(--tt-acento) !important;
	font-family: inherit !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	text-transform: none !important;
	margin: 0 0 8px !important;
}

.tt-result-meaning {
	color: var(--tt-texto) !important;
	font-size: 13.5px !important;
	line-height: 1.55 !important;
	margin: 0;
}

.tt-empty {
	font-size: 14px;
	opacity: 0.8;
}

.tt-wrap-restricted .tt-panel-restricted {
	max-width: 520px;
	margin: 0 auto;
}

.tt-lock {
	font-size: 34px;
	display: block;
	margin-bottom: 14px;
}

.tt-restricted-message {
	font-size: 15px;
	line-height: 1.6;
}