/**
 * Consejos de viajero por destino — ficha de producto.
 *
 * Standalone (NO gulp), igual que express-checkout.css: se encola desde
 * functions/destination-tips.php con cache-busting por filemtime. Así el bloque
 * es reversible sin tocar el bundle products.min.css.
 *
 * El tema NO hereda tipografía en body → cada elemento declara su Arboria.
 * Paleta del tema: amarillo #f9ca24, tinta #1e1e1e, grises #6a6862 / #9c9a95 /
 * #c9c6bf / #d8d8d8.
 */

.product-tips {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0 0 60px;
}

/* ---------- cabecera ---------- */

.product-tips__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/*
 * Eyebrow en el AMARILLO DE MARCA (#f9ca24), no en un dorado apagado: el dorado
 * se leía turbio junto a la cabecera amarilla del sitio. Va más grande y con un
 * contorno de 1px para que el amarillo no se desvanezca sobre fondo claro.
 */
.product-tips__eyebrow {
	font-family: "Arboria-Black", sans-serif;
	font-size: 15px;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: #f9ca24;
	text-shadow: 0 0 1px rgba(30, 30, 30, 0.35);
}

.product-tips__head h2 {
	margin: 0;
	font-family: "Arboria-Black", sans-serif;
	font-size: 32px;
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: #1e1e1e;
	text-wrap: balance;
}

.product-tips__sub {
	margin: 0;
	max-width: 62ch;
	font-family: "Arboria-Book", sans-serif;
	font-size: 16px;
	line-height: 1.55;
	color: #6a6862;
}

/* ---------- rejilla ---------- */

.product-tips__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

/* ---------- tarjeta ---------- */

/*
 * Fondo GRIS PLATA con icono amarillo (decisión de Kevin 2026-07-22): el gris
 * deja respirar el contenido —que era el problema del crema y del amarillo— y
 * concentra el amarillo de marca en la cabecera, las pastillas del icono y el
 * CTA, para que la marca se sienta intencional y no dispersa.
 */
.product-tips__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 20px 18px;
	background: #edeef0;
	border: 1px solid #d9dce0;
	border-radius: 10px;
}

.product-tips__cat {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: "Arboria-Bold", sans-serif;
	font-size: 11px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	color: #6a6862;
}

/* Pastilla del icono: amarillo sólido con el trazo oscuro. Una pastilla
   translúcida desaparecía sobre el fondo amarillo suave de la tarjeta. */
.product-tips__ico {
	flex: none;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: #f9ca24;
	color: #1e1e1e;
}

.product-tips__ico svg {
	display: block;
	width: 16px;
	height: 16px;
}

.product-tips__title {
	margin: 0;
	font-family: "Arboria-Bold", sans-serif;
	font-size: 18px;
	line-height: 1.32;
	letter-spacing: -0.01em;
	color: #1e1e1e;
	text-wrap: balance;
}

.product-tips__body {
	margin: 0;
	font-family: "Arboria-Book", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #6a6862;
}

/* ---------- tarifas (p. ej. Boleto Turístico) ---------- */

.product-tips__fares {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.product-tips__fares li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 12px;
	background: #f8f9fa;
	border: 1px solid #d9dce0;
	border-radius: 6px;
}

.product-tips__price {
	flex: none;
	font-family: "Arboria-Bold", sans-serif;
	font-size: 15px;
	line-height: 1.3;
	color: #1e1e1e;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.product-tips__what {
	font-family: "Arboria-Book", sans-serif;
	font-size: 13px;
	line-height: 1.35;
	color: #6a6862;
	text-align: right;
}

/* ---------- sello de verificación ---------- */

.product-tips__stamp {
	font-family: "Arboria-Book", sans-serif;
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: 0.03em;
	color: #9c9a95;
}

/* ---------- enlace al post ---------- */

.product-tips__link {
	align-self: flex-start;
	padding-bottom: 1px;
	font-family: "Arboria-Bold", sans-serif;
	font-size: 15px;
	line-height: 1.4;
	color: #1e1e1e;
	text-decoration: none;
	border-bottom: 2px solid #f9ca24;
	transition: border-color 0.15s ease;
}

.product-tips__link:hover,
.product-tips__link:focus {
	border-bottom-color: #1e1e1e;
}

.product-tips__link:focus-visible {
	outline: 2px solid #f9ca24;
	outline-offset: 3px;
}

/* ---------- cierre ---------- */

.product-tips__foot {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 16px 18px;
	background: #1e1e1e;
	border-radius: 10px;
	font-family: "Arboria-Book", sans-serif;
	font-size: 15px;
	line-height: 1.55;
	color: #ffffff;
}

.product-tips__foot b {
	font-family: "Arboria-Bold", sans-serif;
	color: #f9ca24;
}

.product-tips__mark {
	flex: none;
	font-size: 18px;
	line-height: 1.3;
}

/* ---------- móvil ---------- */
/*
 * Lista apilada, todo visible (decisión de Kevin 2026-07-22): el botón de pagar
 * vive en la barra fija de compra, así que el scroll extra no aleja de la
 * conversión y el visitante ve los consejos completos.
 */

@media (max-width: 767px) {

	.product-tips {
		gap: 20px;
		margin-bottom: 44px;
	}

	.product-tips__grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.product-tips__head h2 {
		font-size: 24px;
	}

	.product-tips__sub {
		font-size: 15px;
	}

	.product-tips__card {
		padding: 17px 17px 15px;
	}

	.product-tips__title {
		font-size: 17px;
	}

	.product-tips__fares li {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.product-tips__what {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {

	.product-tips__link {
		transition: none;
	}
}