/* DVEx Pricing Plans — card de plano
 *
 * Sistema fechado de marca (não segue dark mode do SO/site de propósito):
 * este card representa a identidade fixa de um plano comercial, como uma
 * tabela de apólice impressa — o tema é parte do produto, não do ambiente.
 *
 * Tipografia self-hospedada (sem chamada ao Google Fonts): Fraunces para
 * nome do plano e valor do preço; Public Sans para rótulos e texto corrido;
 * IBM Plex Mono (tabular) só para números comparáveis entre planos —
 * carência e centavos do preço.
 */

@font-face {
	font-family: "Dvex Fraunces";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/fraunces-variable.woff2") format("woff2");
}

@font-face {
	font-family: "Dvex Public Sans";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/public-sans-variable.woff2") format("woff2");
}

@font-face {
	font-family: "Dvex Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
}

/* Garante que o widget ocupe a largura total da coluna mesmo quando o
 * Container do Elementor não está com "Align items: stretch" — sem isso o
 * widget encolheria para a largura do conteúdo e o card ficaria fino. */
.elementor-widget-dvex-pricing-plan {
	width: 100%;
}

.dvex-pp-card {
	--dvex-pp-ink: #1e2a22;
	--dvex-pp-paper: #ffffff;
	--dvex-pp-accent: #e2984b;
	--dvex-pp-accent-ink: #4a3620;
	--dvex-pp-positive: #2f6b4f;
	--dvex-pp-muted: #9c9587;
	--dvex-pp-line: #eae4d8;
	--dvex-pp-tooltip-bg: #1e2a22;
	--dvex-pp-tooltip-ink: #ffffff;

	--dvex-pp-font-display: "Dvex Fraunces", ui-serif, Georgia, serif;
	--dvex-pp-font-body: "Dvex Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--dvex-pp-font-data: "Dvex Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--dvex-pp-paper);
	border-radius: 18px;
	font-family: var(--dvex-pp-font-body);
	color: var(--dvex-pp-ink);
	-webkit-font-smoothing: antialiased;
}

.dvex-pp-header {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 30px 28px 42px;
	margin-bottom: -26px;
	border-radius: 18px 18px 50% 50% / 18px 18px 56px 56px;
	background: var(--dvex-pp-accent);
}

.dvex-pp-plan-name {
	margin: 0;
	font-family: var(--dvex-pp-font-display);
	font-size: clamp(22px, 4vw, 27px);
	font-weight: 600;
	line-height: 1.15;
	color: var(--dvex-pp-accent-ink);
	text-wrap: balance;
}

.dvex-pp-plan-subtitle {
	margin: 7px 0 0;
	font-size: 13.5px;
	letter-spacing: 0.01em;
	color: var(--dvex-pp-accent-ink);
	opacity: 0.72;
}

.dvex-pp-body {
	position: relative;
	z-index: 0;
	background: var(--dvex-pp-paper);
	border-radius: 0 0 18px 18px;
	padding: 40px 26px 28px;
}

.dvex-pp-price-wrap {
	text-align: center;
	margin-bottom: 24px;
}

.dvex-pp-price {
	display: inline-flex;
	align-items: baseline;
	color: var(--dvex-pp-accent);
	font-family: var(--dvex-pp-font-display);
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.dvex-pp-price .dvex-pp-currency {
	font-family: var(--dvex-pp-font-data);
	font-weight: 500;
	font-size: 18px;
	margin-right: 3px;
}

.dvex-pp-price .dvex-pp-value {
	font-size: clamp(46px, 8vw, 58px);
}

.dvex-pp-price .dvex-pp-decimals {
	font-family: var(--dvex-pp-font-data);
	font-weight: 500;
	font-size: 18px;
}

.dvex-pp-price-period {
	font-family: var(--dvex-pp-font-body);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var(--dvex-pp-muted);
	margin-left: 5px;
}

.dvex-pp-columns-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 10px;
	margin-bottom: 4px;
	border-bottom: 1.5px solid var(--dvex-pp-line);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dvex-pp-ink);
}

.dvex-pp-rows {
	display: flex;
	flex-direction: column;
}

.dvex-pp-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 0;
	border-bottom: 1px solid var(--dvex-pp-line);
	font-size: 14px;
	line-height: 1.35;
}

.dvex-pp-row:last-child {
	border-bottom: none;
}

.dvex-pp-row-icon {
	display: inline-flex;
	flex: 0 0 auto;
}

/* Tamanho fixo à prova de temas que aplicam width:100% / height:auto em svg. */
.dvex-pp-row-icon svg {
	display: block;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.dvex-pp-icon-check {
	color: var(--dvex-pp-positive);
}

.dvex-pp-icon-cross {
	color: var(--dvex-pp-muted);
}

.dvex-pp-row-label {
	flex: 1 1 auto;
	color: var(--dvex-pp-ink);
}

.dvex-pp-row.is-excluded .dvex-pp-row-label {
	color: var(--dvex-pp-muted);
	text-decoration: line-through;
	text-decoration-color: currentColor;
	text-decoration-thickness: 1px;
}

.dvex-pp-row-waiting {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	flex: 0 0 auto;
	min-width: 60px;
	color: var(--dvex-pp-ink);
	font-family: var(--dvex-pp-font-data);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.dvex-pp-row.is-excluded .dvex-pp-row-waiting {
	color: var(--dvex-pp-muted);
}

.dvex-pp-tooltip-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: none;
	color: var(--dvex-pp-muted);
	cursor: pointer;
	flex: 0 0 auto;
	transition: color 0.15s ease;
}

/* Ícone (i): tamanho fixo à prova de temas + cores via CSS (vencem regras
 * genéricas de tema como "svg { fill: currentColor }"). */
.dvex-pp-tooltip-trigger svg.dvex-pp-i {
	display: block;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.dvex-pp-tooltip-trigger svg.dvex-pp-i .dvex-pp-i-bg {
	fill: currentColor;
}

.dvex-pp-tooltip-trigger svg.dvex-pp-i .dvex-pp-i-mark {
	fill: var(--dvex-pp-paper, #ffffff);
}

.dvex-pp-tooltip-trigger:hover,
.dvex-pp-tooltip-trigger:focus-visible {
	color: var(--dvex-pp-ink);
}

.dvex-pp-tooltip-trigger,
.dvex-pp-tooltip-trigger:focus,
.dvex-pp-tooltip-trigger:focus-visible,
.dvex-pp-tooltip-trigger:active {
	outline: none !important;
	box-shadow: none !important;
	border: none !important;
}

/* O gatilho fica sempre na coluna direita (Carência), então o balão é
 * ancorado à direita e cresce para dentro do card — evita vazar pela borda.
 * A largura fixa garante a quebra de linha do texto. */
.dvex-pp-tooltip-box {
	position: absolute;
	bottom: calc(100% + 11px);
	right: -3px;
	left: auto;
	width: 210px;
	max-width: calc(100vw - 48px);
	transform: translateY(3px);
	background: var(--dvex-pp-tooltip-bg);
	color: var(--dvex-pp-tooltip-ink);
	font-family: var(--dvex-pp-font-body);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
	white-space: normal;
	overflow-wrap: break-word;
	padding: 10px 14px;
	border-radius: 10px;
	box-shadow: 0 8px 20px rgba(30, 42, 34, 0.22);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 5;
}

.dvex-pp-tooltip-box::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 8px;
	border: 6px solid transparent;
	border-top-color: var(--dvex-pp-tooltip-bg);
}

.dvex-pp-tooltip-trigger:hover .dvex-pp-tooltip-box,
.dvex-pp-tooltip-trigger:focus-visible .dvex-pp-tooltip-box,
.dvex-pp-tooltip-trigger.is-active .dvex-pp-tooltip-box {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dvex-pp-button-wrap {
	margin-top: 28px;
}

/* Alinhamento do botão (classe aplicada pelo controle do Elementor no wrapper
 * do widget). Padrão sem classe = largura total. */
.dvex-pp-align-left .dvex-pp-button-wrap,
.dvex-pp-align-center .dvex-pp-button-wrap,
.dvex-pp-align-right .dvex-pp-button-wrap {
	display: flex;
}

.dvex-pp-align-left .dvex-pp-button-wrap {
	justify-content: flex-start;
}

.dvex-pp-align-center .dvex-pp-button-wrap {
	justify-content: center;
}

.dvex-pp-align-right .dvex-pp-button-wrap {
	justify-content: flex-end;
}

.dvex-pp-align-left .dvex-pp-button,
.dvex-pp-align-center .dvex-pp-button,
.dvex-pp-align-right .dvex-pp-button {
	width: auto;
	min-width: 0;
}

.dvex-pp-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	padding: 15px 20px;
	border: none;
	border-radius: 8px;
	background: var(--dvex-pp-positive);
	color: var(--dvex-pp-paper);
	font-family: var(--dvex-pp-font-body);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.dvex-pp-arrow-yes .dvex-pp-button::after {
	content: "\2192";
	display: inline-block;
	transition: transform 0.15s ease;
}

.dvex-pp-button:hover,
.dvex-pp-button:focus-visible {
	background: color-mix(in srgb, var(--dvex-pp-positive) 82%, black);
	color: var(--dvex-pp-paper);
}

.dvex-pp-arrow-yes .dvex-pp-button:hover::after,
.dvex-pp-arrow-yes .dvex-pp-button:focus-visible::after {
	transform: translateX(3px);
}

.dvex-pp-button:focus-visible {
	outline: 2px solid var(--dvex-pp-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.dvex-pp-tooltip-box,
	.dvex-pp-tooltip-trigger,
	.dvex-pp-button,
	.dvex-pp-button::after {
		transition: none;
	}
}

/* ====================================================================
 * LAYOUT COMPARATIVO — card de recursos + pop-up "mais recursos"
 *
 * Tudo daqui para baixo é escopado em .dvex-pp-card--comparativo (ou no
 * .dvex-pp-modal, que fica fora do card) e não afeta o layout padrão.
 * ================================================================= */

.dvex-pp-card--comparativo {
	padding: 0 0 28px;
	border: 1px solid var(--dvex-pp-line);
	overflow: visible;
}

.dvex-pp-card--comparativo.is-featured {
	border-color: var(--dvex-pp-accent);
	box-shadow: 0 12px 32px -18px color-mix(in srgb, var(--dvex-pp-ink) 55%, transparent);
}

/* Selo "mais vendido" */
.dvex-pp-card--comparativo .dvex-pp-badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 6px 16px;
	border-radius: 999px;
	background: var(--dvex-pp-accent);
	color: var(--dvex-pp-accent-ink);
	font-family: var(--dvex-pp-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Neutraliza o cabeçalho curvo laranja do layout padrão: aqui o card é
 * plano, no espírito de uma tabela de comparação de SaaS. */
.dvex-pp-card--comparativo .dvex-pp-header {
	z-index: auto;
	padding: 32px 28px 0;
	margin-bottom: 0;
	border-radius: 0;
	background: none;
	text-align: center;
}

.dvex-pp-card--comparativo .dvex-pp-plan-name {
	color: var(--dvex-pp-ink);
	font-size: clamp(19px, 3vw, 23px);
}

.dvex-pp-card--comparativo .dvex-pp-plan-subtitle {
	color: var(--dvex-pp-muted);
	opacity: 1;
}

.dvex-pp-card--comparativo .dvex-pp-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 0 28px;
	border-radius: 0;
	background: none;
}

/* --- Cards de mesma altura ---
 *
 * Planos com quantidade diferente de texto geram cards de alturas
 * diferentes. Com a opção ligada, o widget estica na coluna e a sobra de
 * altura é distribuída — antes do link ou entre os recursos, conforme a
 * escolha no painel. Depende de o container/coluna do Elementor estar com
 * alinhamento "stretch", que é o padrão dos Containers. */
.dvex-pp-stretch-yes {
	height: 100%;
	align-self: stretch;
}

.dvex-pp-stretch-yes > .elementor-widget-container {
	height: 100%;
}

.dvex-pp-stretch-yes .dvex-pp-card--comparativo {
	height: 100%;
}

/* Sobra vai antes do link: os "Mais recursos" se alinham na base. */
.dvex-pp-fill-link .dvex-pp-card--comparativo .dvex-pp-body .dvex-pp-features {
	margin-bottom: 20px;
}

.dvex-pp-fill-link .dvex-pp-card--comparativo .dvex-pp-body .dvex-pp-more-trigger {
	margin-top: auto;
}

/* Sobra distribuída entre os recursos: a lista respira mais nos cards
 * mais curtos e o link acompanha a base do mesmo jeito. */
.dvex-pp-fill-items .dvex-pp-card--comparativo .dvex-pp-body .dvex-pp-features {
	flex: 1 1 auto;
	justify-content: space-between;
}

/* --- Preço --- */

.dvex-pp-card--comparativo .dvex-pp-price-wrap {
	padding: 18px 0 20px;
	margin-bottom: 0;
	text-align: center;
}

.dvex-pp-card--comparativo .dvex-pp-price {
	color: var(--dvex-pp-ink);
}

.dvex-pp-card--comparativo .dvex-pp-price .dvex-pp-value {
	font-size: clamp(34px, 6vw, 42px);
}

.dvex-pp-price-old {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 22px;
	margin-bottom: 4px;
	font-family: var(--dvex-pp-font-body);
	font-size: 14px;
	color: var(--dvex-pp-muted);
}

.dvex-pp-price-old s {
	text-decoration-thickness: 1.5px;
}

.dvex-pp-price-discount {
	padding: 2px 8px;
	border-radius: 5px;
	background: color-mix(in srgb, var(--dvex-pp-positive) 14%, transparent);
	color: var(--dvex-pp-positive);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}

.dvex-pp-price-note {
	margin-top: 8px;
	font-family: var(--dvex-pp-font-body);
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--dvex-pp-muted);
}

/* --- Botão --- */

.dvex-pp-card--comparativo .dvex-pp-button-wrap {
	padding: 0 0 22px;
}

/* --- Lista de recursos --- */

.dvex-pp-features-title {
	margin: 0 0 14px;
	font-family: var(--dvex-pp-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dvex-pp-muted);
}

.dvex-pp-features {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dvex-pp-feature {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--dvex-pp-font-body);
	line-height: 1.45;
}

.dvex-pp-dividers-yes .dvex-pp-feature + .dvex-pp-feature {
	padding-top: 12px;
	border-top: 1px solid var(--dvex-pp-line);
}

.dvex-pp-feature-icon {
	flex: 0 0 auto;
	display: inline-flex;
	margin-top: 2px;
}

.dvex-pp-feature.is-included .dvex-pp-feature-icon {
	color: var(--dvex-pp-positive);
}

.dvex-pp-feature.is-excluded .dvex-pp-feature-icon {
	color: var(--dvex-pp-muted);
}

.dvex-pp-feature.is-excluded {
	opacity: 0.62;
}

.dvex-pp-feature-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.dvex-pp-feature-label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--dvex-pp-ink);
}

.dvex-pp-feature-value {
	font-size: 13.5px;
	color: var(--dvex-pp-muted);
	overflow-wrap: anywhere;
}

/* --- Link "mais recursos" --- */

/* Temas costumam estilizar <button> com seletores como
 * ".elementor-widget-container button" (0,2,1), que venceria um reset de uma
 * ou duas classes. Os seletores abaixo usam três classes (0,3,0) para ficar
 * acima disso, e neutralizam também o estilo nativo do navegador
 * (appearance). Sem isso o link herda o botão do tema.
 * Os controles do painel usam quatro classes, então sempre vencem este
 * reset independentemente da ordem em que os CSS são carregados. */
.dvex-pp-card--comparativo .dvex-pp-body .dvex-pp-more-trigger {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: auto;
	min-height: 0;
	margin-top: 20px;
	padding: 6px 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-shadow: none;
	font-family: var(--dvex-pp-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	color: var(--dvex-pp-positive);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color 0.15s ease;
}

.dvex-pp-card--comparativo .dvex-pp-body .dvex-pp-more-trigger:hover,
.dvex-pp-card--comparativo .dvex-pp-body .dvex-pp-more-trigger:focus-visible {
	background: none;
	color: color-mix(in srgb, var(--dvex-pp-positive) 78%, black);
}

.dvex-pp-card--comparativo .dvex-pp-body .dvex-pp-more-trigger:focus-visible {
	outline: 2px solid var(--dvex-pp-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.dvex-pp-card--comparativo .dvex-pp-body .dvex-pp-more-trigger svg {
	flex: 0 0 auto;
	transition: transform 0.15s ease;
}

.dvex-pp-card--comparativo .dvex-pp-body .dvex-pp-more-trigger:hover svg {
	transform: translateX(2px);
}

/* --- Pop-up (elemento <dialog> nativo) --- */

.dvex-pp-modal {
	/* O <dialog> vive fora do card, então repete as variáveis de marca. */
	--dvex-pp-ink: #1e2a22;
	--dvex-pp-paper: #ffffff;
	--dvex-pp-accent: #e2984b;
	--dvex-pp-positive: #2f6b4f;
	--dvex-pp-muted: #9c9587;
	--dvex-pp-line: #eae4d8;

	--dvex-pp-font-display: "Dvex Fraunces", ui-serif, Georgia, serif;
	--dvex-pp-font-body: "Dvex Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	width: min(560px, calc(100vw - 32px));
	max-height: min(80vh, 720px);
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: var(--dvex-pp-paper);
	color: var(--dvex-pp-ink);
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.45);
	overflow: hidden;
}

.dvex-pp-modal::backdrop {
	background: rgba(20, 28, 24, 0.55);
	backdrop-filter: blur(2px);
}

.dvex-pp-modal[open] {
	display: flex;
	flex-direction: column;
}

.dvex-pp-modal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px 16px;
	border-bottom: 1px solid var(--dvex-pp-line);
}

.dvex-pp-modal-title {
	margin: 0;
	font-family: var(--dvex-pp-font-display);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--dvex-pp-ink);
}

.dvex-pp-modal-intro {
	margin: 6px 0 0;
	font-family: var(--dvex-pp-font-body);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--dvex-pp-muted);
}

.dvex-pp-modal .dvex-pp-modal-head .dvex-pp-modal-close {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--dvex-pp-line) 55%, transparent);
	box-shadow: none;
	color: var(--dvex-pp-ink);
	font-size: 0;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.dvex-pp-modal .dvex-pp-modal-head .dvex-pp-modal-close:hover,
.dvex-pp-modal .dvex-pp-modal-head .dvex-pp-modal-close:focus-visible {
	background: var(--dvex-pp-line);
}

.dvex-pp-modal .dvex-pp-modal-head .dvex-pp-modal-close:focus-visible {
	outline: 2px solid var(--dvex-pp-accent);
	outline-offset: 2px;
}

.dvex-pp-modal-list {
	padding: 20px 24px 24px;
	/* min-height:0 é o que permite o filho flex encolher e rolar. */
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

@media (max-width: 480px) {
	.dvex-pp-card--comparativo .dvex-pp-header,
	.dvex-pp-card--comparativo .dvex-pp-body {
		padding-left: 20px;
		padding-right: 20px;
	}

	.dvex-pp-modal {
		width: calc(100vw - 24px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dvex-pp-more-trigger,
	.dvex-pp-more-trigger svg,
	.dvex-pp-modal-close {
		transition: none;
	}
}