/**
 * Diagnóstico Synergy 2026 — frontend
 *
 * Identidade visual Aliança de Resultado: fundo preto, dourado #F0B15C,
 * botões pílula. Mobile first: a entrada principal é por QR Code em evento.
 *
 * IMPORTANTE — especificidade:
 * Todo seletor de componente é ancorado em `.dgs-app`, resultando em no
 * mínimo (0,2,0). Isso é necessário porque o tema Hello Elementor e o
 * Elementor usam seletores como `button:hover` e `.elementor img`, de
 * especificidade (0,1,1), que venceriam classes soltas como `.dgs-btn`.
 * Sem esse cuidado o tema repinta os botões de rosa e estica o logo.
 *
 * Tipografia: pilha nativa do sistema, sem download de fontes. Carrega
 * instantaneamente, sem flash de texto sem estilo.
 */

.dgs-app {
	--dgs-bg: #000000;
	--dgs-surface: #141110;
	--dgs-surface-2: #1d1917;
	--dgs-gold: #f0b15c;
	--dgs-gold-soft: #ffcd84;
	--dgs-gold-deep: #c98f3f;
	--dgs-text: #fefcff;
	--dgs-muted: rgba(254, 252, 255, 0.64);
	--dgs-faint: rgba(254, 252, 255, 0.42);
	--dgs-line: rgba(240, 177, 92, 0.22);
	--dgs-line-soft: rgba(254, 252, 255, 0.12);
	--dgs-danger: #e2725b;
	--dgs-radius: 16px;
	--dgs-radius-pill: 999px;
	--dgs-gutter: 16px;
	--dgs-max: 720px;

	--dgs-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--dgs-font-serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;

	box-sizing: border-box;
	width: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
	padding: 0;
	background: var(--dgs-bg);
	color: var(--dgs-text);
	font-family: var(--dgs-font-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
	/* Trava de segurança: nada do questionário pode empurrar a página para
	   os lados. `clip` (e não `hidden`) mantém a barra superior fixa. */
	max-width: 100%;
	overflow-x: clip;
}

.dgs-app *,
.dgs-app *::before,
.dgs-app *::after {
	box-sizing: border-box;
}

/* Reset base. Mantido em (0,1,1) de propósito: os componentes abaixo estão
   em (0,2,0) ou mais e sempre o superam. */
.dgs-app p,
.dgs-app h1,
.dgs-app h2,
.dgs-app h3,
.dgs-app h4,
.dgs-app ul,
.dgs-app ol,
.dgs-app li,
.dgs-app figure {
	margin: 0;
	padding: 0;
}

.dgs-app ul,
.dgs-app ol {
	list-style: none;
}

/* O reset do tema Hello Elementor aplica `white-space: nowrap` em todo
   <button>. Cada opção do questionário é um botão: sem desfazer isso, o
   texto não quebra linha, sai do cartão e faz a página rolar de lado no
   celular (texto branco sobre o fundo branco fora do app). */
.dgs-app button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
	white-space: normal;
	-webkit-user-select: auto;
	user-select: auto;
	transition: none;
	width: auto;
	max-width: 100%;
}

/* Neutraliza o rosa que o tema aplica em button:hover e button:focus. */
.dgs-app button:hover,
.dgs-app button:focus,
.dgs-app button:active {
	background: none;
	color: inherit;
}

.dgs-app input {
	font: inherit;
}

.dgs-app img {
	max-width: 100%;
}

.dgs-app h1,
.dgs-app h2,
.dgs-app h3 {
	font-family: var(--dgs-font-serif);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: var(--dgs-text);
}

/* ---------------------------------------------------------------- Boot -- */

.dgs-app .dgs-boot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 60vh;
	color: var(--dgs-faint);
	font-size: 14px;
}

.dgs-app .dgs-boot__spinner {
	width: 28px;
	height: 28px;
	border: 2px solid var(--dgs-line);
	border-top-color: var(--dgs-gold);
	border-radius: 50%;
	animation: dgs-spin 0.8s linear infinite;
}

@keyframes dgs-spin {
	to {
		transform: rotate(360deg);
	}
}

.dgs-app .dgs-noscript {
	padding: 40px var(--dgs-gutter);
	text-align: center;
	color: var(--dgs-muted);
}

/* -------------------------------------------------------------- Shell --- */

.dgs-app .dgs-shell {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.dgs-app .dgs-stage {
	width: 100%;
	max-width: var(--dgs-max);
	margin: 0 auto;
	padding: 0 var(--dgs-gutter);
}

/* Perguntas ancoradas no topo: mantém o enunciado sempre na mesma altura,
   independente do número de opções, evitando salto entre telas. */
.dgs-app .dgs-main {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 20px 0 40px;
}

/* Telas curtas (abertura, transição, carregamento) ficam melhor centradas. */
.dgs-app .dgs-main--center {
	justify-content: center;
	padding: 24px 0 32px;
}

/* ------------------------------------------------------------ Topbar ---- */

.dgs-app .dgs-topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	padding: 12px 0 10px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.96) 70%, rgba(0, 0, 0, 0));
	backdrop-filter: blur(6px);
}

.dgs-app .dgs-topbar__inner {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* O Elementor aplica `height: auto` em toda img; por isso a altura fixa
   precisa estar em (0,2,1) para prevalecer. */
.dgs-app img.dgs-logo {
	height: 26px;
	width: auto;
	max-width: 150px;
	flex: 0 0 auto;
	object-fit: contain;
}

.dgs-app .dgs-topbar__meta {
	flex: 1 1 auto;
	min-width: 0;
	text-align: right;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dgs-faint);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dgs-app .dgs-topbar__meta strong {
	color: var(--dgs-gold);
	font-weight: 600;
}

/* Trilha de pilares */

.dgs-app .dgs-track {
	display: flex;
	gap: 5px;
	margin-top: 10px;
}

.dgs-app .dgs-track__seg {
	position: relative;
	flex: 1 1 0;
	height: 4px;
	border-radius: var(--dgs-radius-pill);
	background: rgba(254, 252, 255, 0.14);
	overflow: hidden;
}

.dgs-app .dgs-track__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: var(--dgs-gold);
	border-radius: inherit;
	transition: width 0.35s ease;
}

.dgs-app .dgs-track__seg.is-done .dgs-track__fill {
	width: 100%;
}

/* ------------------------------------------------------------- Screens -- */

.dgs-app .dgs-screen {
	animation: dgs-in 0.28s ease both;
}

@keyframes dgs-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dgs-app .dgs-screen,
	.dgs-app .dgs-boot__spinner {
		animation: none;
	}
	.dgs-app .dgs-track__fill {
		transition: none;
	}
}

/* -------------------------------------------------------------- Intro --- */

.dgs-app .dgs-intro {
	text-align: center;
	padding: 24px 0 8px;
}

.dgs-app img.dgs-intro__logo {
	display: block;
	height: clamp(34px, 8vw, 50px);
	width: auto;
	max-width: 260px;
	margin: 0 auto 26px;
	object-fit: contain;
}

.dgs-app .dgs-eyebrow {
	display: inline-block;
	margin: 0 0 16px;
	padding: 6px 14px;
	border: 1px solid var(--dgs-line);
	border-radius: var(--dgs-radius-pill);
	font-family: var(--dgs-font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dgs-gold);
}

.dgs-app .dgs-intro h1 {
	font-size: clamp(27px, 6.4vw, 40px);
	margin: 0 auto 16px;
	max-width: 16em;
}

.dgs-app .dgs-intro__text {
	color: var(--dgs-muted);
	font-size: 15px;
	max-width: 32em;
	margin: 0 auto 28px;
}

.dgs-app .dgs-facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 30px;
}

.dgs-app .dgs-fact {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: 1px solid var(--dgs-line-soft);
	border-radius: var(--dgs-radius-pill);
	font-size: 12.5px;
	color: var(--dgs-muted);
}

.dgs-app .dgs-fact svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	color: var(--dgs-gold);
}

/* ------------------------------------------------------------ Buttons --- */

.dgs-app .dgs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	max-width: 100%;
	white-space: normal;
	min-height: 52px;
	padding: 13px 28px;
	border: 0;
	border-radius: var(--dgs-radius-pill);
	font-family: var(--dgs-font-sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

/* Os quatro estados são declarados juntos para que o tema não consiga
   injetar a própria cor em nenhum deles. */
.dgs-app .dgs-btn--primary,
.dgs-app .dgs-btn--primary:link,
.dgs-app .dgs-btn--primary:visited {
	background: var(--dgs-gold);
	color: #17120b;
	box-shadow: 0 8px 28px rgba(240, 177, 92, 0.22);
}

.dgs-app .dgs-btn--primary:hover:not(:disabled),
.dgs-app .dgs-btn--primary:focus:not(:disabled) {
	background: var(--dgs-gold-soft);
	color: #17120b;
	transform: translateY(-1px);
}

.dgs-app .dgs-btn--primary:active:not(:disabled) {
	background: var(--dgs-gold-deep);
	color: #17120b;
	transform: translateY(0);
}

.dgs-app .dgs-btn--primary:disabled {
	background: var(--dgs-gold);
	color: #17120b;
	opacity: 0.32;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

.dgs-app .dgs-btn--ghost,
.dgs-app .dgs-btn--ghost:active {
	background: transparent;
	color: var(--dgs-muted);
	border: 1px solid var(--dgs-line-soft);
	min-height: 46px;
	padding: 11px 22px;
	font-size: 14px;
	font-weight: 600;
}

.dgs-app .dgs-btn--ghost:hover,
.dgs-app .dgs-btn--ghost:focus {
	color: var(--dgs-text);
	border-color: var(--dgs-line);
}

.dgs-app .dgs-btn--block {
	display: flex;
	width: 100%;
}

.dgs-app .dgs-btn svg {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
}

/* Estado de carregamento: o clique precisa dar retorno imediato, mesmo que
   a resposta do servidor demore. */
.dgs-app .dgs-btn.is-loading,
.dgs-app .dgs-btn.is-loading:disabled {
	cursor: wait;
	opacity: 0.9;
}

.dgs-app .dgs-btn__spinner {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	border: 2px solid rgba(23, 18, 11, 0.3);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: dgs-spin 0.7s linear infinite;
}

.dgs-app .dgs-btn--ghost .dgs-btn__spinner {
	border-color: rgba(254, 252, 255, 0.25);
	border-top-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.dgs-app .dgs-btn__spinner {
		animation-duration: 1.6s;
	}
}

.dgs-app :focus-visible {
	outline: 2px solid var(--dgs-gold);
	outline-offset: 3px;
}

/* ----------------------------------------------------------- Question --- */

.dgs-app .dgs-q__pillar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dgs-gold);
}

.dgs-app .dgs-q__pillar span {
	color: var(--dgs-faint);
	letter-spacing: 0.06em;
	text-transform: none;
	font-weight: 400;
}

.dgs-app .dgs-q__title {
	font-size: clamp(21px, 5.2vw, 28px);
	margin: 0 0 10px;
}

.dgs-app .dgs-q__help {
	color: var(--dgs-muted);
	font-size: 14px;
	margin: 0 0 22px;
}

.dgs-app .dgs-q__title + .dgs-options,
.dgs-app .dgs-q__title + .dgs-field {
	margin-top: 22px;
}

/* Opções */

.dgs-app .dgs-options {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

/* A regra base em (0,2,0) já supera o `button` do tema; os estados abaixo,
   em (0,3,0), superam o `button:hover`/`button:focus` dele. Agrupar tudo
   numa regra só anularia o realce ao passar o mouse. */
.dgs-app .dgs-option {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 13px;
	max-width: 100%;
	white-space: normal;
	width: 100%;
	padding: 15px 17px;
	text-align: left;
	background: var(--dgs-surface);
	border: 1px solid var(--dgs-line-soft);
	border-radius: var(--dgs-radius);
	color: var(--dgs-text);
	font-family: var(--dgs-font-sans);
	/* Alinhado à escala do restante do corpo: abaixo dos parágrafos (15px)
	   e no mesmo nível do texto de apoio. O alvo de toque é garantido pelo
	   padding, não pelo tamanho da letra. */
	font-size: 14px;
	line-height: 1.5;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

.dgs-app .dgs-option:hover,
.dgs-app .dgs-option:focus {
	border-color: var(--dgs-line);
	background: var(--dgs-surface-2);
}

.dgs-app .dgs-option:active {
	transform: scale(0.995);
}

.dgs-app .dgs-option.is-selected,
.dgs-app .dgs-option.is-selected:hover,
.dgs-app .dgs-option.is-selected:focus {
	border-color: var(--dgs-gold);
	background: rgba(240, 177, 92, 0.12);
	color: var(--dgs-text);
}

.dgs-app .dgs-option__mark {
	flex: 0 0 auto;
	width: 21px;
	height: 21px;
	margin-top: 2px;
	border: 1.5px solid rgba(254, 252, 255, 0.28);
	border-radius: 50%;
	display: grid;
	place-items: center;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dgs-app .dgs-option--multi .dgs-option__mark {
	border-radius: 6px;
}

.dgs-app .dgs-option.is-selected .dgs-option__mark {
	border-color: var(--dgs-gold);
	background: var(--dgs-gold);
}

.dgs-app .dgs-option__mark svg {
	width: 12px;
	height: 12px;
	color: #17120b;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.dgs-app .dgs-option.is-selected .dgs-option__mark svg {
	opacity: 1;
}

.dgs-app .dgs-option__label {
	flex: 1 1 auto;
	min-width: 0;
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Gravando: a resposta só vale depois da confirmação do servidor
   (auditoria, seção 2). A opção tocada mostra um spinner no marcador e as
   demais ficam travadas até a resposta chegar. */
.dgs-app .dgs-option__spinner {
	display: none;
	width: 13px;
	height: 13px;
	border: 2px solid rgba(240, 177, 92, 0.3);
	border-top-color: var(--dgs-gold);
	border-radius: 50%;
	animation: dgs-spin 0.7s linear infinite;
}

.dgs-app .dgs-option.is-saving,
.dgs-app .dgs-option.is-saving:hover,
.dgs-app .dgs-option.is-saving:focus {
	border-color: var(--dgs-gold);
	background: rgba(240, 177, 92, 0.06);
}

.dgs-app .dgs-option.is-saving .dgs-option__mark {
	border-color: var(--dgs-gold);
	background: transparent;
}

.dgs-app .dgs-option.is-saving .dgs-option__mark svg {
	display: none;
}

.dgs-app .dgs-option.is-saving .dgs-option__spinner {
	display: block;
}

.dgs-app .dgs-options.is-locked .dgs-option {
	pointer-events: none;
}

.dgs-app .dgs-options.is-locked .dgs-option:not(.is-saving) {
	opacity: 0.5;
}

/* Campos de texto */

.dgs-app .dgs-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dgs-app .dgs-input {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	min-height: 56px;
	padding: 15px 18px;
	background: var(--dgs-surface);
	border: 1px solid var(--dgs-line-soft);
	border-radius: var(--dgs-radius);
	color: var(--dgs-text);
	font-family: var(--dgs-font-sans);
	font-size: 16px; /* evita zoom automático no iOS */
	transition: border-color 0.15s ease;
}

.dgs-app .dgs-input::placeholder {
	color: rgba(254, 252, 255, 0.3);
}

.dgs-app .dgs-input:focus {
	border-color: var(--dgs-gold);
	outline: none;
	box-shadow: 0 0 0 3px rgba(240, 177, 92, 0.16);
}

.dgs-app .dgs-input.is-invalid {
	border-color: var(--dgs-danger);
}

.dgs-app .dgs-error {
	color: #f0917f;
	font-size: 13px;
	min-height: 19px;
}

/* Navegação */

.dgs-app .dgs-nav {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
}

.dgs-app .dgs-nav__back,
.dgs-app .dgs-nav__back:active {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 4px;
	background: none;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--dgs-faint);
	transition: color 0.15s ease;
}

.dgs-app .dgs-nav__back:hover,
.dgs-app .dgs-nav__back:focus {
	color: var(--dgs-text);
}

.dgs-app .dgs-nav__back svg {
	width: 15px;
	height: 15px;
}

.dgs-app .dgs-nav__next {
	margin-left: auto;
}

.dgs-app .dgs-nav--center {
	justify-content: center;
	margin-top: 14px;
}

.dgs-app .dgs-link,
.dgs-app .dgs-link:hover,
.dgs-app .dgs-link:focus {
	padding: 4px;
	background: none;
	color: var(--dgs-muted);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dgs-app .dgs-link:hover,
.dgs-app .dgs-link:focus {
	color: var(--dgs-text);
}

.dgs-app .dgs-hint {
	margin: 14px 0 0;
	font-size: 12.5px;
	color: var(--dgs-faint);
}

/* ---------------------------------------------------------- Transição --- */

.dgs-app .dgs-transition {
	text-align: center;
	padding: 20px 0;
}

.dgs-app .dgs-transition__done {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 22px;
	padding: 7px 16px;
	border-radius: var(--dgs-radius-pill);
	background: rgba(240, 177, 92, 0.12);
	border: 1px solid var(--dgs-line);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--dgs-gold);
}

.dgs-app .dgs-transition__done svg {
	width: 15px;
	height: 15px;
}

.dgs-app .dgs-transition h2 {
	font-size: clamp(25px, 6vw, 34px);
	margin: 0 0 12px;
}

.dgs-app .dgs-transition p {
	color: var(--dgs-muted);
	font-size: 15px;
	max-width: 30em;
	margin: 0 auto 28px;
}

/* ------------------------------------------------------------ Loading --- */

.dgs-app .dgs-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	min-height: 50vh;
	text-align: center;
}

.dgs-app .dgs-loading__ring {
	width: 46px;
	height: 46px;
	border: 3px solid var(--dgs-line);
	border-top-color: var(--dgs-gold);
	border-radius: 50%;
	animation: dgs-spin 0.9s linear infinite;
}

.dgs-app .dgs-loading p {
	color: var(--dgs-muted);
	font-size: 15px;
	max-width: 24em;
}

/* ============================================================= RESULT === */

.dgs-app .dgs-result {
	padding: 8px 0 60px;
}

.dgs-app .dgs-block {
	padding: 30px 0;
	border-top: 1px solid var(--dgs-line-soft);
}

.dgs-app .dgs-block:first-child {
	border-top: 0;
	padding-top: 12px;
}

.dgs-app .dgs-block__label {
	display: block;
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dgs-gold);
}

.dgs-app .dgs-block h2 {
	font-size: clamp(23px, 5.4vw, 30px);
	margin: 0 0 14px;
}

.dgs-app .dgs-block h3 {
	font-size: clamp(19px, 4.6vw, 23px);
	margin: 0 0 10px;
}

.dgs-app .dgs-block p {
	color: var(--dgs-muted);
	font-size: 15px;
	margin: 0 0 14px;
}

.dgs-app .dgs-block p:last-child {
	margin-bottom: 0;
}

/* Autoridade / abertura */

.dgs-app .dgs-hero {
	text-align: center;
	padding: 26px 0 18px;
}

.dgs-app img.dgs-hero__logo {
	display: block;
	height: clamp(32px, 7vw, 44px);
	width: auto;
	max-width: 230px;
	margin: 0 auto 24px;
	object-fit: contain;
}

.dgs-app .dgs-hero h1 {
	font-size: clamp(26px, 6.2vw, 36px);
	margin: 0 auto 14px;
	max-width: 17em;
}

.dgs-app .dgs-hero__sub {
	color: var(--dgs-muted);
	font-size: 15px;
	max-width: 34em;
	margin: 0 auto;
}

.dgs-app .dgs-authority {
	margin: 24px auto 0;
	padding: 18px 20px;
	max-width: 46em;
	background: var(--dgs-surface);
	border: 1px solid var(--dgs-line);
	border-radius: var(--dgs-radius);
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--dgs-muted);
	text-align: left;
}

/* Contexto */

.dgs-app .dgs-context {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.dgs-app .dgs-chip {
	padding: 7px 14px;
	border: 1px solid var(--dgs-line-soft);
	border-radius: var(--dgs-radius-pill);
	font-size: 12.5px;
	color: var(--dgs-muted);
}

.dgs-app .dgs-chip strong {
	color: var(--dgs-text);
	font-weight: 600;
}

/* Cinco pilares */

.dgs-app .dgs-pillars {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 6px;
}

.dgs-app .dgs-pillar__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.dgs-app .dgs-pillar__name {
	font-family: var(--dgs-font-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--dgs-text);
}

.dgs-app .dgs-pillar__value {
	font-family: var(--dgs-font-serif);
	font-size: 22px;
	font-weight: 700;
	color: var(--dgs-gold);
	line-height: 1;
}

.dgs-app .dgs-pillar__bar {
	height: 8px;
	border-radius: var(--dgs-radius-pill);
	background: rgba(254, 252, 255, 0.09);
	overflow: hidden;
}

.dgs-app .dgs-pillar__fill {
	height: 100%;
	border-radius: inherit;
	width: 0;
	transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Rampa sequencial: a cor reforça o próprio valor da barra. */
.dgs-app .dgs-pillar__fill[data-level="CRITICAL"] {
	background: #8a5a2b;
}
.dgs-app .dgs-pillar__fill[data-level="INITIAL"] {
	background: #b8782f;
}
.dgs-app .dgs-pillar__fill[data-level="DEVELOPING"] {
	background: #d69a45;
}
.dgs-app .dgs-pillar__fill[data-level="STRUCTURED"] {
	background: #f0b15c;
}
.dgs-app .dgs-pillar__fill[data-level="ADVANCED"] {
	background: #ffcd84;
}

.dgs-app .dgs-pillar__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 7px;
	font-size: 12.5px;
	color: var(--dgs-faint);
}

.dgs-app .dgs-pillar__maturity {
	color: var(--dgs-muted);
	font-weight: 500;
}

.dgs-app .dgs-pillar__note {
	margin: 8px 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--dgs-muted);
}

/* Leitura ajustada por contradição entre respostas (auditoria, seção 6). */
.dgs-app .dgs-pillar__note--consistency {
	padding-left: 10px;
	border-left: 2px solid var(--dgs-gold-deep);
	color: var(--dgs-text);
}

/* Achados absorvidos por uma prioridade (auditoria, seção 9). */
.dgs-app .dgs-related {
	margin: 4px 0 14px;
	padding: 11px 14px;
	border-radius: 10px;
	background: rgba(254, 252, 255, 0.04);
	border: 1px solid var(--dgs-line-soft);
	font-size: 13px;
	line-height: 1.55;
	color: var(--dgs-muted);
}

.dgs-app .dgs-related strong {
	color: var(--dgs-text);
	font-weight: 600;
}

.dgs-app .dgs-restart {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}

/* Diagnóstico central */

.dgs-app .dgs-central {
	padding: 24px 22px;
	background: linear-gradient(145deg, rgba(240, 177, 92, 0.13), rgba(240, 177, 92, 0.03));
	border: 1px solid var(--dgs-line);
	border-radius: var(--dgs-radius);
}

.dgs-app .dgs-central p {
	font-family: var(--dgs-font-serif);
	font-size: clamp(19px, 4.6vw, 24px);
	font-weight: 700;
	line-height: 1.4;
	color: var(--dgs-text);
	margin: 0;
}

/* Forças e gargalos */

.dgs-app .dgs-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 4px;
}

.dgs-app .dgs-card {
	padding: 19px 20px;
	background: var(--dgs-surface);
	border: 1px solid var(--dgs-line-soft);
	border-radius: var(--dgs-radius);
	border-left: 3px solid var(--dgs-line-soft);
}

.dgs-app .dgs-card--strength {
	border-left-color: var(--dgs-gold);
}

.dgs-app .dgs-card--bottleneck {
	border-left-color: var(--dgs-gold-deep);
}

.dgs-app .dgs-card__tag {
	display: inline-block;
	margin: 0 0 9px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--dgs-faint);
}

.dgs-app .dgs-card h3 {
	font-size: 18px;
	margin: 0 0 11px;
}

.dgs-app .dgs-card__row {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--dgs-muted);
	margin: 0 0 7px;
}

.dgs-app .dgs-card__row:last-child {
	margin-bottom: 0;
}

.dgs-app .dgs-card__row strong {
	color: var(--dgs-text);
	font-weight: 600;
}

/* Prioridades */

.dgs-app .dgs-priority {
	margin-top: 14px;
	padding: 24px 20px;
	background: var(--dgs-surface);
	border: 1px solid var(--dgs-line-soft);
	border-radius: var(--dgs-radius);
}

.dgs-app .dgs-priority:first-of-type {
	border-color: var(--dgs-line);
	background: linear-gradient(160deg, rgba(240, 177, 92, 0.07), var(--dgs-surface) 55%);
}

.dgs-app .dgs-priority__head {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 14px;
}

.dgs-app .dgs-priority__rank {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--dgs-gold);
	color: #17120b;
	font-size: 15px;
	font-weight: 700;
}

.dgs-app .dgs-priority:not(:first-of-type) .dgs-priority__rank {
	background: rgba(240, 177, 92, 0.16);
	color: var(--dgs-gold);
	border: 1px solid var(--dgs-line);
}

.dgs-app .dgs-priority__kicker {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dgs-gold);
}

.dgs-app .dgs-priority__pillar {
	display: block;
	font-size: 11.5px;
	letter-spacing: 0.05em;
	text-transform: none;
	font-weight: 400;
	color: var(--dgs-faint);
}

.dgs-app .dgs-priority h3 {
	font-size: clamp(19px, 4.8vw, 24px);
	margin: 0 0 12px;
}

.dgs-app .dgs-sub {
	margin: 18px 0 9px;
	font-family: var(--dgs-font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dgs-gold);
}

.dgs-app .dgs-evidence {
	margin-top: 4px;
	padding: 14px 16px;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 12px;
	border: 1px solid var(--dgs-line-soft);
}

.dgs-app .dgs-evidence li {
	font-size: 13px;
	line-height: 1.55;
	color: var(--dgs-muted);
	padding: 5px 0;
	border-bottom: 1px solid rgba(254, 252, 255, 0.06);
}

.dgs-app .dgs-evidence li:last-child {
	border-bottom: 0;
}

.dgs-app .dgs-evidence b {
	display: block;
	color: var(--dgs-text);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 1px;
}

.dgs-app .dgs-actions {
	counter-reset: dgs-action;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dgs-app .dgs-actions li {
	position: relative;
	padding-left: 34px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--dgs-muted);
}

.dgs-app .dgs-actions li::before {
	counter-increment: dgs-action;
	content: counter(dgs-action);
	position: absolute;
	left: 0;
	top: 1px;
	width: 23px;
	height: 23px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--dgs-line);
	font-size: 11.5px;
	font-weight: 700;
	color: var(--dgs-gold);
}

.dgs-app .dgs-callout {
	margin-top: 6px;
	padding: 15px 17px;
	border-radius: 12px;
	background: rgba(240, 177, 92, 0.09);
	border: 1px solid var(--dgs-line);
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--dgs-text);
}

.dgs-app .dgs-impact {
	margin: 14px 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--dgs-muted);
}

.dgs-app .dgs-impact strong {
	color: var(--dgs-text);
	font-weight: 600;
}

/* CTA — sempre depois do diagnóstico completo */

.dgs-app .dgs-transition-note {
	margin: 38px auto 0;
	padding-top: 26px;
	max-width: 40em;
	border-top: 1px solid var(--dgs-line-soft);
	font-size: 15px;
	color: var(--dgs-muted);
	text-align: center;
}

.dgs-app .dgs-cta {
	margin-top: 18px;
	padding: 30px 22px;
	text-align: center;
	background: linear-gradient(150deg, rgba(240, 177, 92, 0.15), rgba(240, 177, 92, 0.04));
	border: 1px solid var(--dgs-line);
	border-radius: var(--dgs-radius);
}

.dgs-app .dgs-cta h2 {
	font-size: clamp(21px, 5.2vw, 28px);
	margin: 0 0 11px;
}

.dgs-app .dgs-cta p {
	color: var(--dgs-muted);
	font-size: 14.5px;
	max-width: 32em;
	margin: 0 auto 22px;
}

.dgs-app .dgs-footnote {
	margin: 34px 0 0;
	text-align: center;
	font-size: 11.5px;
	line-height: 1.6;
	color: rgba(254, 252, 255, 0.3);
}

/* Erro */

.dgs-app .dgs-alert {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 16px auto 0;
	padding: 14px 16px;
	max-width: 34em;
	border-radius: 12px;
	background: rgba(226, 114, 91, 0.1);
	border: 1px solid rgba(226, 114, 91, 0.35);
	font-size: 13.5px;
	line-height: 1.5;
	color: #f2a494;
	text-align: center;
}

.dgs-app .dgs-alert__retry,
.dgs-app .dgs-alert__retry:active {
	padding: 9px 20px;
	border-radius: var(--dgs-radius-pill);
	border: 1px solid rgba(226, 114, 91, 0.5);
	background: transparent;
	color: #f2a494;
	font-family: var(--dgs-font-sans);
	font-size: 13px;
	font-weight: 600;
	transition: background-color 0.15s ease;
}

.dgs-app .dgs-alert__retry:hover,
.dgs-app .dgs-alert__retry:focus {
	background: rgba(226, 114, 91, 0.15);
}

/* --------------------------------------------------------- Breakpoints -- */

@media (min-width: 600px) {
	.dgs-app {
		--dgs-gutter: 28px;
	}

	/* Mais respiro lateral no desktop, sem aumentar a letra: o cartão fica
	   largo e o texto precisa de margem para não colar nas bordas. */
	.dgs-app .dgs-option {
		padding: 16px 22px;
	}

	.dgs-app .dgs-block {
		padding: 38px 0;
	}

	.dgs-app .dgs-priority {
		padding: 30px 28px;
	}

	.dgs-app .dgs-cta {
		padding: 40px 32px;
	}

	.dgs-app .dgs-card {
		padding: 22px 24px;
	}

	.dgs-app .dgs-central {
		padding: 30px 28px;
	}
}

@media (min-width: 900px) {
	.dgs-app {
		--dgs-max: 780px;
	}

	.dgs-app .dgs-cards--grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}
}

@media print {
	.dgs-app {
		background: #fff;
		color: #111;
	}

	.dgs-app .dgs-topbar,
	.dgs-app .dgs-cta,
	.dgs-app .dgs-nav {
		display: none;
	}
}