/* ============================================================
   1) GRID MOVIL — 4 cartas por fila hasta 768px
   ============================================================ */
@media screen and (max-width: 768px) {

	.co-tirada-28 .card-oracle-cards {
		/* minmax(0, 1fr) en vez de 1fr: sin el minimo en 0 las pistas no pueden
		   encogerse por debajo del ancho intrinseco de la imagen (260px) y la
		   cuadricula se desborda horizontalmente. */
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: auto;
		grid-gap: 6px;
		padding: 8px 6px;
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	/* Los items de grid llevan min-width:auto por defecto y tampoco encogen.
	   Hay que anularlo en cada nivel de la carta. */
	.co-tirada-28 .card-oracle-card,
	.co-tirada-28 .card-oracle-card-body,
	.co-tirada-28 .card-oracle-cards .btn-default,
	.co-tirada-28 .card-oracle-cards img {
		min-width: 0;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Altura proporcional en vez de los 200px fijos del plugin:
	   asi la carta escala con el ancho de columna y no deja huecos. */
	.co-tirada-28 .card-oracle-card {
		height: auto;
		aspect-ratio: 260 / 443;   /* proporcion real de las imagenes */
		perspective: 400px;
	}

	/* Safari en iOS no resuelve height:100% contra una altura derivada de
	   aspect-ratio, asi que la cara frontal se quedaba a tamano natural y
	   desbordaba sobre las vecinas al voltear. Se elimina la cadena de
	   porcentajes: el cuerpo lleva su propio aspect-ratio y las caras, que
	   el plugin ya declara position:absolute, se anclan con inset.
	   NO se toca su position ni el preserve-3d: eso rompe el volteo. */
	.co-tirada-28 .card-oracle-card-body {
		width: 100%;
		height: auto;
		aspect-ratio: 260 / 443;
	}

	.co-tirada-28 .card-oracle-back,
	.co-tirada-28 .card-oracle-front,
	.co-tirada-28 .card-oracle-front-reverse {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		height: auto;
		margin: 0;
	}

	/* Tap target: el boton ocupa la carta entera, sin margenes que
	   recorten la zona pulsable. */
	.co-tirada-28 .card-oracle-cards .btn-default {
		height: 100%;
		width: 100%;
		margin: 0;
		padding: 0;
		display: block;
	}

	.co-tirada-28 .card-oracle-cards img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		display: block;
	}

	/* En tactil el :hover se queda "pegado" tras el toque y descoloca
	   la carta; touch-action elimina ademas el retardo de 300ms. */
	.co-tirada-28 .card-oracle-back:hover {
		transform: none;
		background: none;
	}
	.co-tirada-28 .card-oracle-cards button {
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}
}

/* Pantallas muy estrechas: 4 columnas siguen siendo comodas,
   pero se aprieta el hueco para ganar ancho de carta. */
@media screen and (max-width: 380px) {
	.co-tirada-28 .card-oracle-cards {
		grid-gap: 4px;
		padding: 6px 4px;
	}
	.co-tirada-28 .card-oracle-card { min-width: 0; }
}

/* ============================================================
   2) TIPOGRAFIA DE LIBRO ANTIGUO — solo en la zona de resultados
   Selectores acotados a .cotd-wrapper y a elementos concretos:
   no se usa ningun selector global, para no tocar los anuncios.
   ============================================================ */

/* Titulo de la posicion ("Posicion 1") */
.cotd-wrapper cotd-header {
	display: block;
	font-family: 'Cinzel', 'Playfair Display', Georgia, 'Times New Roman', serif;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 1.25rem;
	line-height: 1.35;
	/* Sin color fijo: se hereda el del tema. El fondo del sitio es morado
	   oscuro y cualquier color claro/oscuro fijado aqui rompe el contraste. */
	color: inherit;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid rgba(128, 128, 128, 0.35);
	border-bottom-color: color-mix(in srgb, currentColor 30%, transparent);
}

/* Nombre de la carta ("EL LOCO") */
.cotd-wrapper cotd-main h3 {
	font-family: 'Cinzel', 'Playfair Display', Georgia, 'Times New Roman', serif;
	font-weight: 600;
	letter-spacing: 0.08em;
	font-size: 1.45rem;
	line-height: 1.3;
	margin: 0 0 0.75rem;
	color: inherit;
}

/* Cuerpo de la interpretacion */
.cotd-wrapper cotd-main {
	display: block;
	font-family: 'Lora', 'Merriweather', Georgia, 'Times New Roman', serif;
	font-size: 1.06rem;
	line-height: 1.75;
	color: inherit;
	/* OJO: aqui NO se pone max-width. Quick Adsense inyecta el bloque
	   <ins class="adsbygoogle"> dentro de <cotd-main>, y limitar este
	   contenedor estrecharia el anuncio responsive. La medida de lectura
	   se aplica solo a los parrafos. */
}

.cotd-wrapper cotd-main p {
	font-family: inherit;
	font-size: inherit;
	line-height: 1.75;
	margin: 0 0 1.05rem;
	max-width: 68ch;   /* medida de lectura comoda, sin tocar el ancho del anuncio */
}

.cotd-wrapper cotd-main p:last-child {
	margin-bottom: 0;
}

/* Los cierres en cursiva de cada interpretacion */
.cotd-wrapper cotd-main em {
	font-family: inherit;
	font-style: italic;
	color: inherit;
	opacity: 0.85;
}

.cotd-wrapper cotd-footer {
	font-family: 'Lora', 'Merriweather', Georgia, serif;
	line-height: 1.7;
}

/* Separacion entre cartas de la lectura */
.cotd-wrapper {
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

@media screen and (max-width: 768px) {
	.cotd-wrapper cotd-header { font-size: 1.1rem; }
	.cotd-wrapper cotd-main h3 { font-size: 1.3rem; }
	.cotd-wrapper cotd-main { font-size: 1.02rem; line-height: 1.7; }
}

/* ============================================================
   3) SIN DESBORDE HORIZONTAL
   El contenedor exterior de la tirada no debe superar el ancho
   disponible en ningun tamano de pantalla.
   ============================================================ */
.card-oracle-container {
	box-sizing: border-box;
	max-width: 100%;
	overflow-x: hidden;
}

/* ============================================================
   HOVER PEGAJOSO EN TACTIL
   El plugin escala la carta 1.1 y le pone fondo blanco al hacer
   :hover. En un movil no hay hover real, pero el navegador lo deja
   fijado tras el toque: la carta se queda mas grande y encimada
   sobre las vecinas. Se neutraliza solo donde no hay hover real.
   ============================================================ */
@media (hover: none) {
	.card-oracle-cards .card-oracle-back:hover,
	.card-oracle-cards .btn-default:hover {
		transform: none;
		background: none;
		background-color: transparent;
		border-color: transparent;
	}
}

/* ============================================================
   4) CONTADOR DE PROGRESO
   tarot-ui.js anade un <span class="tarot-pick"> a cada carta elegida:
   la ultima muestra "9 de 28" y las anteriores solo su numero.
   Va sobre la propia carta, donde el usuario esta mirando, y asi no
   compite con el menu fijo ni con el anuncio ancla.
   Se ancla a .card-oracle-card (no al cuerpo que gira) y se centra sin
   transform, para no entrar en el volteo 3D de la carta.
   ============================================================ */
.tarot-contador .card-oracle-card {
	position: relative;
}

.tarot-pick {
	position: absolute;
	top: 4px;
	left: 0;
	right: 0;
	z-index: 3;
	text-align: center;
	line-height: 1;
	pointer-events: none;
}

.tarot-pick > span {
	display: inline-block;
	padding: 3px 7px;
	border-radius: 999px;
	background: rgba(32, 12, 40, 0.82);
	color: #fff;
	font: 700 11px/1.2 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.tarot-pick--actual > span {
	background: #ffeb3b;
	color: #2a1233;
	font-size: 12px;
}

/* ============================================================
   5) OTRAS TIRADAS — bajo el resultado de la lectura
   El margen superior es deliberado: encima queda el anuncio nativo
   y los enlaces no deben estar pegados a el.
   No se fija color de enlace: se hereda el del tema, que ya contrasta
   con el fondo de la tirada.
   ============================================================ */
.tarot-siguiente {
	clear: both;
	margin: 48px 0 12px;
	text-align: center;
}

.tarot-siguiente__titulo {
	font-family: 'Cinzel', 'Playfair Display', Georgia, 'Times New Roman', serif;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 1.15rem;
	line-height: 1.35;
	margin: 0 0 1rem;
}

.tarot-siguiente ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.tarot-siguiente li {
	margin: 0;
}

.tarot-siguiente a {
	display: block;
	padding: 14px 12px;
	border: 1px solid rgba(128, 128, 128, 0.45);
	border-color: color-mix(in srgb, currentColor 40%, transparent);
	border-radius: 10px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.tarot-siguiente a span {
	display: block;
	margin-top: 2px;
	font-size: 0.88em;
	font-weight: 400;
	opacity: 0.8;
}

.tarot-siguiente a:hover,
.tarot-siguiente a:focus-visible {
	border-color: currentColor;
}

/* ============================================================
   CARRIL 1: bloque de oferta de afiliacion
   ============================================================
   Hereda la tipografia del bloque "Continua tu consulta" para que no parezca
   un anuncio pegado: un anuncio se ignora, una recomendacion del sitio no.
   El margen inferior lo separa del anuncio nativo que queda debajo, para que
   un toque en el boton no caiga en el anuncio. */

.tarot-oferta {
	clear: both;
	margin: 40px 0 28px;
	padding: 20px 18px;
	text-align: center;
	border: 1px solid rgba(128, 128, 128, 0.45);
	border-color: color-mix(in srgb, currentColor 32%, transparent);
	border-radius: 6px;
}

/* La imagen va a sangre dentro del recuadro, con el mismo radio. */
.tarot-oferta__imglink {
	display: block;
	margin: -4px 0 16px;
	text-decoration: none;
}

.tarot-oferta__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.tarot-oferta__titulo {
	font-family: 'Cinzel', 'Playfair Display', Georgia, 'Times New Roman', serif;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 1.12em;
	margin: 0 0 8px;
}

.tarot-oferta__texto {
	margin: 0 0 16px;
	font-size: 0.95em;
	opacity: 0.9;
}

/* Boton SOLIDO, no contorno. Debajo de este bloque va un anuncio nativo con
   fondo oscuro y tipografia enorme: con el boton en contorno, el anuncio ganaba
   la mirada. El amarillo y el morado son los que ya usa el contador del sitio. */
.tarot-oferta__cta {
	display: block;
	padding: 15px 12px;
	background: #ffeb3b;
	color: #2a1233;
	border: 1px solid #ffeb3b;
	border-radius: 4px;
	font-weight: 700;
	text-decoration: none;
}

.tarot-oferta__cta span {
	display: block;
	margin-top: 2px;
	font-size: 0.88em;
	font-weight: 400;
	color: #2a1233;
	opacity: 0.75;
}

.tarot-oferta__cta:hover,
.tarot-oferta__cta:focus-visible {
	background: #fff176;
	border-color: #fff176;
}

.tarot-oferta__aviso {
	margin: 12px 0 0;
	font-size: 0.78em;
	opacity: 0.65;
}