/**
 * Drokpa Travel - look of the [dtf_servicios] shortcode.
 *
 * Taken from the "viaje-spiti" mock-up (the .spiti-services rules of
 * viaje-spiti.css and the base rules of styles.css), with every class renamed to
 * dtf-sv* and the colour variables scoped to the shortcode.
 */
.dtf-sv {
	--dtf-ink: #102f32;
	--dtf-green: #102b2e;
	--dtf-cream: #fffcf5;
	--dtf-gold: #b89a61;
	--dtf-serif: Spectral, Georgia, serif;
	--dtf-sans: "DM Sans", system-ui, sans-serif;

	box-sizing: border-box;
	width: 100%;
	padding: 24px clamp(14px, 3vw, 36px) 40px;
	background: var(--dtf-green);
	color: var(--dtf-cream);
	font: 15px/1.55 var(--dtf-sans);
}

.dtf-sv--plain {
	padding: 0;
	background: transparent;
}

.dtf-sv *,
.dtf-sv *::before,
.dtf-sv *::after {
	box-sizing: border-box;
}

.dtf-sv h3,
.dtf-sv p {
	margin: 0;
}

.dtf-sv ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dtf-sv__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(12px, 2vw, 22px);
	max-width: 1160px;
	margin-inline: auto;
}

.dtf-sv__card {
	padding: clamp(16px, 3vw, 34px);
	background: #143235;
	border: 1px solid #b89a617a;
	border-radius: 5px;
}

.dtf-sv__card--included {
	background: #193b3d;
	border-color: #b89a61bd;
}

.dtf-sv__card h3 {
	display: flex;
	gap: 11px;
	align-items: center;
	padding-bottom: 14px;
	border-bottom: 1px solid #b89a6180;
	color: inherit;
	font-family: var(--dtf-serif);
	font-size: clamp(28px, 3.5vw, 41px);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1.12;
}

.dtf-sv__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 33px;
	height: 33px;
	border: 1px solid var(--dtf-gold);
	border-radius: 50%;
	color: #e9cb91;
	font: 600 20px/1 var(--dtf-sans);
}

.dtf-sv__card--included .dtf-sv__icon {
	background: #e8c683;
	color: var(--dtf-green);
}

.dtf-sv__card li {
	display: grid;
	gap: 2px;
	padding-block: 10px;
	margin: 0;
}

.dtf-sv__card li + li {
	border-top: 1px solid #b89a613e;
}

.dtf-sv__card li strong {
	font-size: 14px;
}

.dtf-sv__card li span {
	color: #eee3cf;
	font-size: 13px;
}

.dtf-sv__card li .dtf-sv__text {
	font-size: 14px;
}

.dtf-sv-notice {
	padding: 12px 16px;
	border: 1px dashed #c00;
	color: #c00;
	font-size: 14px;
}

@media (max-width: 620px) {
	.dtf-sv__grid {
		grid-template-columns: 1fr;
	}
}