/*
 * P68 · bloque del curso «el abanico de tres» (includes/p68-promo.php). Referencia visual: export de Claude Design del 8-oct
 * (`Bloque Curso 1b - Variantes.dc.html`, 2a-2d). Fuentes del TEMA (`tizi-fonts`: Source Serif 4 + IBM Plex Sans, self-hosted),
 * nunca Google Fonts. Móvil primero (tarjeta vertical); a partir de 600 px de ANCHO DEL BLOQUE (container query, no del
 * viewport), imagen a la izquierda y texto a la derecha.
 */
.tdt-p68 {
	--p68-berenjena: #372549;
	--p68-noche: #1f1529;
	--p68-cuerpo: #534763;
	--p68-oro: #d58936;
	--p68-oro-texto: #985b20;
	--p68-crema: #f2efe9;
	--p68-tarjeta: #fffdf9;
	--p68-linea: #e2d9c9;
	--p68-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--p68-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	container-type: inline-size;
	display: block;
	clear: both;
	margin: 2em 0;
	padding: 0;
	box-sizing: border-box;
}
.tdt-p68 *,
.tdt-p68 *::before,
.tdt-p68 *::after { box-sizing: border-box; }

.tdt-p68 .tdt-p68__tarjeta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 26px 20px 24px;
	background: var(--p68-tarjeta);
	border: 1px solid var(--p68-linea);
	border-radius: 6px;
	text-align: center;
}

/* ── el abanico ── */
.tdt-p68 .tdt-p68__abanico {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	height: 150px;
	margin: 0;
}
.tdt-p68 .tdt-p68__carta {
	display: block;
	flex: none;
	width: 72px;
	height: auto;
	max-width: none;
	aspect-ratio: 1000 / 1624;
	margin: 0;
	padding: 0;
	border-radius: 4px;
}
.tdt-p68 .tdt-p68__carta--izq { transform: rotate(-9deg) translate(18px, 6px); }
.tdt-p68 .tdt-p68__carta--der { transform: rotate(9deg) translate(-18px, 6px); }
.tdt-p68 .tdt-p68__carta--centro { position: relative; z-index: 1; width: 88px; }
.tdt-p68 img.tdt-p68__carta {
	object-fit: cover;
	border: 1px solid var(--p68-linea);
	box-shadow: 0 6px 14px rgba(55, 37, 73, .18);
}
.tdt-p68 img.tdt-p68__carta--centro { box-shadow: 0 10px 22px rgba(55, 37, 73, .25); }
.tdt-p68 .tdt-p68__reverso {
	display: grid;
	place-items: center;
	background: var(--p68-berenjena);
	border: 1px solid var(--p68-oro);
	box-shadow: inset 0 0 0 5px var(--p68-berenjena), inset 0 0 0 6px rgba(213, 137, 54, .7), 0 6px 14px rgba(55, 37, 73, .18);
}
.tdt-p68 .tdt-p68__reverso.tdt-p68__carta--centro {
	box-shadow: inset 0 0 0 6px var(--p68-berenjena), inset 0 0 0 7px rgba(213, 137, 54, .7), 0 10px 22px rgba(55, 37, 73, .25);
}
.tdt-p68 .tdt-p68__reverso img {
	display: block;
	width: 30px;
	height: auto;
	max-width: none;
	margin: 0;
	border: 0;
	box-shadow: none;
}
.tdt-p68 .tdt-p68__reverso.tdt-p68__carta--centro img { width: 38px; }

/* ── el texto ── */
.tdt-p68 .tdt-p68__texto {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
	gap: 16px;
	margin: 0;
}
.tdt-p68 .tdt-p68__antetitulo,
.tdt-p68 .tdt-p68__titulo,
.tdt-p68 .tdt-p68__cuerpo,
.tdt-p68 .tdt-p68__nota { margin: 0; padding: 0; }
.tdt-p68 .tdt-p68__antetitulo {
	font: 600 11px/1.3 var(--p68-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--p68-oro-texto);
}
.tdt-p68 .tdt-p68__titulo {
	font: 500 22px/1.25 var(--p68-serif);
	color: var(--p68-berenjena);
	text-wrap: balance;
}
.tdt-p68 .tdt-p68__titulo em { font-style: italic; font-weight: inherit; }
.tdt-p68 .tdt-p68__cuerpo {
	font: 400 15.5px/1.6 var(--p68-sans);
	color: var(--p68-cuerpo);
	text-wrap: pretty;
}
.tdt-p68 a.tdt-p68__boton,
.tdt-p68 a.tdt-p68__boton:visited {
	display: flex;
	justify-content: center;
	align-items: center;
	align-self: stretch;
	min-height: 48px;
	margin: 0;
	padding: 0 26px;
	background: var(--p68-berenjena);
	color: #fffdf9;
	font: 500 16px/1 var(--p68-sans);
	text-decoration: none;
	border: 0;
	border-radius: 6px;
	box-shadow: none;
}
.tdt-p68 a.tdt-p68__boton:hover,
.tdt-p68 a.tdt-p68__boton:focus { color: #fffdf9; text-decoration: none; background: #2a1c38; }
.tdt-p68 a.tdt-p68__boton:focus-visible { outline: 2px solid var(--p68-oro); outline-offset: 2px; }
.tdt-p68 .tdt-p68__nota {
	font: 400 13.5px/1.45 var(--p68-sans);
	color: var(--p68-cuerpo);
}

/* ── oscuro (2b ficha oscura · 2d Tarot Gratis) ── */
.tdt-p68--oscuro .tdt-p68__tarjeta { background: var(--p68-berenjena); border-color: rgba(213, 137, 54, .45); }
.tdt-p68--oscuro .tdt-p68__antetitulo { color: #e3a564; }
.tdt-p68--oscuro .tdt-p68__titulo { color: #fffdf9; }
.tdt-p68--oscuro .tdt-p68__cuerpo,
.tdt-p68--oscuro .tdt-p68__nota { color: var(--p68-linea); }
.tdt-p68--oscuro a.tdt-p68__boton,
.tdt-p68--oscuro a.tdt-p68__boton:visited { background: var(--p68-crema); color: var(--p68-berenjena); font-weight: 600; }
.tdt-p68--oscuro a.tdt-p68__boton:hover,
.tdt-p68--oscuro a.tdt-p68__boton:focus { background: #fffdf9; color: var(--p68-berenjena); }
.tdt-p68--oscuro img.tdt-p68__carta { border-color: var(--p68-oro); box-shadow: 0 6px 14px rgba(0, 0, 0, .4); }
.tdt-p68--oscuro img.tdt-p68__carta--centro { box-shadow: 0 10px 22px rgba(0, 0, 0, .5); }
.tdt-p68--oscuro .tdt-p68__reverso {
	background: var(--p68-noche);
	box-shadow: inset 0 0 0 5px var(--p68-noche), inset 0 0 0 6px rgba(213, 137, 54, .7), 0 6px 14px rgba(0, 0, 0, .4);
}
.tdt-p68--oscuro .tdt-p68__reverso.tdt-p68__carta--centro {
	box-shadow: inset 0 0 0 6px var(--p68-noche), inset 0 0 0 7px rgba(213, 137, 54, .7), 0 10px 22px rgba(0, 0, 0, .5);
}

/* ── índice: envoltura entre dos secciones de Elementor (página a todo el ancho) ── */
.tdt-p68-envoltura { max-width: 760px; margin: 0 auto; padding: 0 16px; }

/* ── escritorio: imagen a la izquierda, texto a la derecha ── */
@container (min-width: 600px) {
	.tdt-p68 .tdt-p68__tarjeta {
		display: grid;
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 26px;
		align-items: center;
		padding: 30px 34px;
		text-align: left;
	}
	.tdt-p68 .tdt-p68__abanico { height: 190px; }
	.tdt-p68 .tdt-p68__carta { width: 86px; }
	.tdt-p68 .tdt-p68__carta--centro { width: 108px; }
	.tdt-p68 .tdt-p68__carta--izq { transform: rotate(-9deg) translate(24px, 8px); }
	.tdt-p68 .tdt-p68__carta--der { transform: rotate(9deg) translate(-24px, 8px); }
	.tdt-p68 .tdt-p68__reverso { box-shadow: inset 0 0 0 6px var(--p68-berenjena), inset 0 0 0 7px rgba(213, 137, 54, .7), 0 8px 16px rgba(55, 37, 73, .18); }
	.tdt-p68 .tdt-p68__reverso.tdt-p68__carta--centro { box-shadow: inset 0 0 0 7px var(--p68-berenjena), inset 0 0 0 8px rgba(213, 137, 54, .7), 0 12px 26px rgba(55, 37, 73, .25); }
	.tdt-p68--oscuro .tdt-p68__reverso { box-shadow: inset 0 0 0 6px var(--p68-noche), inset 0 0 0 7px rgba(213, 137, 54, .7), 0 8px 16px rgba(0, 0, 0, .4); }
	.tdt-p68--oscuro .tdt-p68__reverso.tdt-p68__carta--centro { box-shadow: inset 0 0 0 7px var(--p68-noche), inset 0 0 0 8px rgba(213, 137, 54, .7), 0 12px 26px rgba(0, 0, 0, .5); }
	.tdt-p68 .tdt-p68__reverso img { width: 36px; }
	.tdt-p68 .tdt-p68__reverso.tdt-p68__carta--centro img { width: 46px; }
	.tdt-p68 .tdt-p68__texto { align-items: flex-start; gap: 12px; }
	.tdt-p68 .tdt-p68__antetitulo { font-size: 12px; }
	.tdt-p68 .tdt-p68__titulo { font-size: 25px; text-wrap: pretty; }
	.tdt-p68 .tdt-p68__cuerpo { font-size: 16px; }
	.tdt-p68 a.tdt-p68__boton,
	.tdt-p68 a.tdt-p68__boton:visited { display: inline-flex; align-self: flex-start; min-height: 46px; margin-top: 4px; }
}