/* Katco — case (/case/{slug}): blocos com simulação de browser e iPhone */
.kt-case .kt-page-head { padding-bottom: 3rem; }
.kt-page-block .kt-label { margin-bottom: 1rem; }
.kt-page-block-title { margin-bottom: 2rem; max-width: 40rem; }
.kt-page-block-text { max-width: 46.81rem; }
@media (min-width: 62rem) {
	.kt-case .kt-page-head { padding-bottom: 4.5rem; }
}

/* Grid do bloco: browser | texto (| iPhone quando houver imagem mobile) */
.kt-case-media { align-items: start; }
.kt-case-media .kt-grid-image { min-width: 0; }
.kt-grid-phone { display: flex; justify-content: center; }
@media (min-width: 62rem) {
	.kt-case-media { grid-template-columns: minmax(0, 706fr) minmax(0, 606fr); gap: 0 2rem; }
	.kt-case-media.kt-case-duo { grid-template-columns: minmax(0, 640fr) minmax(0, 320fr) auto; }
	.kt-grid-phone { justify-content: flex-end; }

	/* Alternância a partir da 2ª linha com imagem: texto (e iPhone) à esquerda, browser à direita */
	.kt-case-media.kt-case-flip { grid-template-columns: minmax(0, 606fr) minmax(0, 706fr); }
	.kt-case-media.kt-case-flip.kt-case-duo { grid-template-columns: auto minmax(0, 320fr) minmax(0, 640fr); }
	.kt-case-flip .kt-grid-phone { order: 1; justify-content: flex-start; }
	.kt-case-flip .kt-grid-content { order: 2; }
	.kt-case-flip .kt-grid-image { order: 3; }
}

/* ---- Dispositivos simulados -------------------------------------------------------------- */
.kt-device {
	background-color: var(--kt-white);
	box-shadow: 0 1.25rem 2.5rem rgba(10, 10, 10, 0.12);
}
.kt-device-screen {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	scrollbar-width: none;
	background-color: var(--kt-surface-2);
}
.kt-device-screen::-webkit-scrollbar { display: none; }
.kt-device-screen.is-dragging { cursor: grabbing; }
.kt-device-screen img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	-webkit-user-drag: none;
	pointer-events: none;
	transition: opacity 0.25s ease;
}
/* Oculta até o JS aplicar a posição inicial da apresentação (evita "pulo" perceptível) */
.kt-device-screen.is-pending img { opacity: 0; }

/* Browser simplificado (proporção 5:3.5, largura da coluna) */
.kt-device-browser {
	display: flex;
	flex-direction: column;
	width: 100%;
	aspect-ratio: 5 / 3.5;
	border: 0.06rem solid var(--kt-border);
	border-radius: 0.75rem;
	overflow: hidden;
}
.kt-device-browser-bar {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 0 0 auto;
	padding: 0.63rem 1rem;
	background-color: var(--kt-surface-3);
	border-bottom: 0.06rem solid var(--kt-border);
}
.kt-device-dots { display: inline-flex; gap: 0.38rem; }
.kt-device-dots i {
	width: 0.63rem;
	height: 0.63rem;
	border-radius: 50%;
	background-color: #f0605c;
}
.kt-device-dots i:nth-child(2) { background-color: #f6bd3b; }
.kt-device-dots i:nth-child(3) { background-color: #43c645; }
.kt-device-url {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--kt-text-muted);
	background-color: var(--kt-white);
	border-radius: 0.38rem;
	padding: 0.19rem 1rem;
}

/* iPhone simulado */
.kt-device-phone {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 13rem;
	max-width: 100%;
	aspect-ratio: 9 / 19;
	border: 0.5rem solid #1a1a1c;
	border-radius: 2.25rem;
	overflow: hidden;
	background-color: #1a1a1c;
}
.kt-device-phone-bar {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.44rem;
	padding: 0.5rem 0.75rem 0.56rem;
	background-color: var(--kt-surface-3);
	border-bottom: 0.06rem solid var(--kt-border);
	border-radius: 1.75rem 1.75rem 0 0;
}
.kt-device-island {
	width: 4.5rem;
	height: 1rem;
	border-radius: 0.75rem;
	background-color: #1a1a1c;
	pointer-events: none;
}
.kt-device-phone .kt-device-url { align-self: stretch; }
.kt-device-phone .kt-device-screen { border-radius: 0 0 1.75rem 1.75rem; }

@media (min-width: 62rem) {
	.kt-device-phone { width: 13.75rem; }
}

.kt-text p{
	font-size: 1rem;
	line-height: 1.8rem;
}
.kt-text em{
	font-style: normal;
	font-weight: 600;
	font-size: 1.75rem;
	line-height: 1.8rem;
	color: var(--kt-accent);
	letter-spacing: -0.02em;
	padding:0 0.2rem;
}

.kt-text .kt-label-case{
	font-size: 0.75rem;
	line-height: 1;
	padding:0 0 1rem 0;
	margin:0 0 3rem 0;
	font-weight: 400;
	border-bottom: 0.06rem solid var(--kt-border);
	width: auto;
	display: table;
}