/* ==========================================================================
   Cúpula em Saúde — Botões padrão (reutilizáveis)
   Adicione a classe no campo "Classes CSS" (aba Avançado) de um widget
   Botão do Elementor, ou diretamente no elemento <a class="elementor-button">.

     .botao-padrao-01  → Modelo 01 — fundo ESCURO (pílula clara + seta animada)
     .botao-padrao-02  → Modelo 02 — fundo CLARO (pílula navy + seta animada)
     .botao-padrao-03  → Modelo 03 — estilo Apple (pílula sólida, minimalista)
     .botao-padrao-04  → Modelo 04 — Contorno (sem fundo, só as linhas)
     .botao-padrao-05  → Modelo 05 — 21ST (pílula + círculo que invertem juntos)
     .botao-padrao-06  → Modelo 06 — 21ST Contorno (só linhas, sem fundo)
     .botao-padrao-07  → Modelo 07 — 21ST (mesma mecânica do 05, para fundo CLARO)
     .botao-padrao-08  → Modelo 08 — 21ST (mesma mecânica do 05, para fundo ESCURO)

   Tamanho (classe extra, junto da classe do modelo):
     .pb-sm (pequeno) · .pb-md (médio, padrão) · .pb-lg (grande)

   CORES: cada cor é uma CSS variable, com o padrão da marca como fallback.
   O menu "Botões" do painel sobrescreve essas variáveis globalmente por modelo
   (injeção em wp_head). Ver custom.css para os tokens --cs-color-*.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Recursos compartilhados
   -------------------------------------------------------------------------- */
.botao-padrao-01 .elementor-button,
.botao-padrao-01.elementor-button,
.botao-padrao-02 .elementor-button,
.botao-padrao-02.elementor-button,
.botao-padrao-03 .elementor-button,
.botao-padrao-03.elementor-button,
.botao-padrao-04 .elementor-button,
.botao-padrao-04.elementor-button,
.botao-padrao-05 .elementor-button,
.botao-padrao-05.elementor-button,
.botao-padrao-06 .elementor-button,
.botao-padrao-06.elementor-button,
.botao-padrao-07 .elementor-button,
.botao-padrao-07.elementor-button,
.botao-padrao-08 .elementor-button,
.botao-padrao-08.elementor-button {
	/* Seta (lucide "arrow-up-right") em SVG. Nos modelos 01/02/03 é usada como
	   background-image (a cor da seta é editável = esta variável é reescrita);
	   nos modelos 04/05/06/07/08 é usada como máscara (mask), pintada com a cor
	   do texto para recolorir junto no hover. */
	--pbtn-arrow: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='7'%20y1='17'%20x2='17'%20y2='7'/%3E%3Cpolyline%20points='7%207%2017%207%2017%2017'/%3E%3C/svg%3E");

	font-family: var(--cs-font-button, "Poppins", sans-serif);
	text-decoration: none;
	cursor: pointer;
}

/* Foco visível (acessibilidade) — vale para os seis modelos. */
.botao-padrao-01 .elementor-button:focus-visible,
.botao-padrao-01.elementor-button:focus-visible,
.botao-padrao-02 .elementor-button:focus-visible,
.botao-padrao-02.elementor-button:focus-visible,
.botao-padrao-03 .elementor-button:focus-visible,
.botao-padrao-03.elementor-button:focus-visible,
.botao-padrao-04 .elementor-button:focus-visible,
.botao-padrao-04.elementor-button:focus-visible,
.botao-padrao-05 .elementor-button:focus-visible,
.botao-padrao-05.elementor-button:focus-visible,
.botao-padrao-06 .elementor-button:focus-visible,
.botao-padrao-06.elementor-button:focus-visible,
.botao-padrao-07 .elementor-button:focus-visible,
.botao-padrao-07.elementor-button:focus-visible,
.botao-padrao-08 .elementor-button:focus-visible,
.botao-padrao-08.elementor-button:focus-visible {
	outline: 2px solid var(--cs-color-cyan, #00A0CC);
	outline-offset: 3px;
}

/* Tamanhos — classe extra ao lado da classe do modelo (ex.: "botao-padrao-05 pb-lg").
   Como os modelos são dimensionados em "em", basta escalar a font-size. */
.pb-sm .elementor-button,
.pb-sm.elementor-button {
	font-size: 14px !important;
}
.pb-md .elementor-button,
.pb-md.elementor-button {
	font-size: 16px !important;
}
.pb-lg .elementor-button,
.pb-lg.elementor-button {
	font-size: 19px !important;
}

/* ==========================================================================
   MODELOS 01 e 02 — pílula + círculo com seta diagonal animada
   ========================================================================== */

/* Modelo 01 — para fundos ESCUROS */
.botao-padrao-01 .elementor-button,
.botao-padrao-01.elementor-button {
	--pbtn-pill-bg: #ffffff;
	--pbtn-pill-tx: var(--cs-color-navy, #02065F);
	--pbtn-circ-bg: var(--cs-color-cyan, #00A0CC);
	--pbtn-pill-bg-h: var(--cs-color-cyan, #00A0CC);
	--pbtn-pill-tx-h: #ffffff;
	--pbtn-circ-bg-h: var(--cs-color-navy, #02065F);
}

/* Modelo 02 — para fundos CLAROS */
.botao-padrao-02 .elementor-button,
.botao-padrao-02.elementor-button {
	--pbtn-pill-bg: var(--cs-color-navy, #02065F);
	--pbtn-pill-tx: #ffffff;
	--pbtn-circ-bg: var(--cs-color-cyan, #00A0CC);
	--pbtn-pill-bg-h: var(--cs-color-cyan, #00A0CC);
	--pbtn-pill-tx-h: #ffffff;
	--pbtn-circ-bg-h: var(--cs-color-navy, #02065F);
}

/* Estrutura comum aos modelos 01 e 02 */
.botao-padrao-01 .elementor-button,
.botao-padrao-01.elementor-button,
.botao-padrao-02 .elementor-button,
.botao-padrao-02.elementor-button {
	display: inline-flex !important;
	align-items: stretch;
	gap: 0.45em;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 999px;
	line-height: 1;
}
.botao-padrao-01 .elementor-button .elementor-button-content-wrapper,
.botao-padrao-01.elementor-button .elementor-button-content-wrapper,
.botao-padrao-02 .elementor-button .elementor-button-content-wrapper,
.botao-padrao-02.elementor-button .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.9em 1.5em;
	border-radius: 999px;
	background-color: var(--pbtn-pill-bg);
	color: var(--pbtn-pill-tx);
	font-weight: 500;
	line-height: 1;
	transition: background-color 0.45s ease, color 0.45s ease;
}
.botao-padrao-01 .elementor-button:hover .elementor-button-content-wrapper,
.botao-padrao-01 .elementor-button:focus-visible .elementor-button-content-wrapper,
.botao-padrao-01.elementor-button:hover .elementor-button-content-wrapper,
.botao-padrao-01.elementor-button:focus-visible .elementor-button-content-wrapper,
.botao-padrao-02 .elementor-button:hover .elementor-button-content-wrapper,
.botao-padrao-02 .elementor-button:focus-visible .elementor-button-content-wrapper,
.botao-padrao-02.elementor-button:hover .elementor-button-content-wrapper,
.botao-padrao-02.elementor-button:focus-visible .elementor-button-content-wrapper {
	background-color: var(--pbtn-pill-bg-h);
	color: var(--pbtn-pill-tx-h);
}
.botao-padrao-01 .elementor-button .elementor-button-text,
.botao-padrao-01.elementor-button .elementor-button-text,
.botao-padrao-02 .elementor-button .elementor-button-text,
.botao-padrao-02.elementor-button .elementor-button-text {
	color: inherit;
}
/* Círculo com a seta (dois exemplares em background, deslizando na diagonal). */
.botao-padrao-01 .elementor-button::after,
.botao-padrao-01.elementor-button::after,
.botao-padrao-02 .elementor-button::after,
.botao-padrao-02.elementor-button::after {
	content: "";
	align-self: stretch;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: var(--pbtn-circ-bg);
	background-image: var(--pbtn-arrow), var(--pbtn-arrow);
	background-repeat: no-repeat;
	background-size: 42%;
	background-position: 50% 50%, -80% 180%;
	transition: background-position 0.55s cubic-bezier(0.65, 0, 0.35, 1),
		background-color 0.45s ease;
}
.botao-padrao-01 .elementor-button:hover::after,
.botao-padrao-01 .elementor-button:focus-visible::after,
.botao-padrao-01.elementor-button:hover::after,
.botao-padrao-01.elementor-button:focus-visible::after,
.botao-padrao-02 .elementor-button:hover::after,
.botao-padrao-02 .elementor-button:focus-visible::after,
.botao-padrao-02.elementor-button:hover::after,
.botao-padrao-02.elementor-button:focus-visible::after {
	background-color: var(--pbtn-circ-bg-h);
	background-position: 180% -80%, 50% 50%;
}

/* ==========================================================================
   MODELO 03 — estilo Apple (pílula sólida)
   ========================================================================== */
.botao-padrao-03 .elementor-button,
.botao-padrao-03.elementor-button {
	--c3-bg: var(--cs-color-navy, #02065F);
	--c3-text: #ffffff;
	--c3-bg-h: #1b1f8a;
	--c3-text-h: #ffffff;

	display: inline-flex !important;
	align-items: center;
	gap: 0.55em;
	padding: 0.85em 1.6em !important;
	border: 0 !important;
	border-radius: 980px !important;
	background-color: var(--c3-bg) !important;
	color: var(--c3-text) !important;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1;
	box-shadow: 0 1px 2px rgba(2, 6, 95, 0.25) !important;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease,
		box-shadow 0.3s ease;
}
.botao-padrao-03 .elementor-button .elementor-button-content-wrapper,
.botao-padrao-03.elementor-button .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}
.botao-padrao-03 .elementor-button .elementor-button-text,
.botao-padrao-03.elementor-button .elementor-button-text {
	color: inherit;
}
.botao-padrao-03 .elementor-button::after,
.botao-padrao-03.elementor-button::after {
	content: "";
	width: 1.05em;
	height: 1.05em;
	background: var(--pbtn-arrow) center / contain no-repeat;
	transition: transform 0.3s ease;
}
.botao-padrao-03 .elementor-button:hover,
.botao-padrao-03 .elementor-button:focus-visible,
.botao-padrao-03.elementor-button:hover,
.botao-padrao-03.elementor-button:focus-visible {
	background-color: var(--c3-bg-h) !important;
	color: var(--c3-text-h) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(2, 6, 95, 0.28) !important;
}
.botao-padrao-03 .elementor-button:hover::after,
.botao-padrao-03 .elementor-button:focus-visible::after,
.botao-padrao-03.elementor-button:hover::after,
.botao-padrao-03.elementor-button:focus-visible::after {
	transform: translate(2px, -2px);
}

/* ==========================================================================
   MODELO 04 — Contorno (sem fundo, só as linhas; preenche no hover)
   ========================================================================== */
.botao-padrao-04 .elementor-button,
.botao-padrao-04.elementor-button {
	--c4-ink: var(--cs-color-navy, #02065F);     /* texto + linha + seta */
	--c4-fill-h: var(--cs-color-navy, #02065F);  /* preenchimento no hover */
	--c4-text-h: #ffffff;                        /* texto + seta no hover */

	display: inline-flex !important;
	align-items: center;
	gap: 0.55em;
	padding: 0.85em 1.6em !important;
	border: 1.5px solid var(--c4-ink) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--c4-ink) !important;
	box-shadow: none !important;
	font-weight: 500;
	line-height: 1;
	transition: background-color 0.3s ease, color 0.3s ease,
		border-color 0.3s ease;
}
.botao-padrao-04 .elementor-button .elementor-button-content-wrapper,
.botao-padrao-04.elementor-button .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}
.botao-padrao-04 .elementor-button .elementor-button-text,
.botao-padrao-04.elementor-button .elementor-button-text {
	color: inherit;
}
.botao-padrao-04 .elementor-button::after,
.botao-padrao-04.elementor-button::after {
	content: "";
	width: 1.05em;
	height: 1.05em;
	background-color: currentColor;
	-webkit-mask: var(--pbtn-arrow) center / contain no-repeat;
	mask: var(--pbtn-arrow) center / contain no-repeat;
	transition: transform 0.3s ease;
}
.botao-padrao-04 .elementor-button:hover,
.botao-padrao-04 .elementor-button:focus-visible,
.botao-padrao-04.elementor-button:hover,
.botao-padrao-04.elementor-button:focus-visible {
	background-color: var(--c4-fill-h) !important;
	border-color: var(--c4-fill-h) !important;
	color: var(--c4-text-h) !important;
}
.botao-padrao-04 .elementor-button:hover::after,
.botao-padrao-04 .elementor-button:focus-visible::after,
.botao-padrao-04.elementor-button:hover::after,
.botao-padrao-04.elementor-button:focus-visible::after {
	transform: translate(2px, -2px);
}

/* ==========================================================================
   MODELO 05 — 21ST (réplica fiel: pílula + círculo que invertem juntos)
   ========================================================================== */
.botao-padrao-05 .elementor-button,
.botao-padrao-05.elementor-button {
	--c5-size: 3.1em;             /* diâmetro do círculo = altura da pílula */
	--c5-gap: 0.4em;              /* vão entre pílula e círculo */
	--c5-bg: #d6f1f8;             /* fundo pílula + círculo (normal) */
	--c5-ink: var(--cs-color-navy, #02065F);     /* texto + seta (normal) */
	--c5-bg-h: var(--cs-color-navy, #02065F);    /* fundo (hover) */
	--c5-ink-h: #d6f1f8;          /* texto + seta (hover) */

	position: relative;
	display: inline-flex !important;
	align-items: center;
	padding: 0 calc(var(--c5-size) + var(--c5-gap)) 0 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 999px;
	line-height: 1;
}
.botao-padrao-05 .elementor-button .elementor-button-content-wrapper,
.botao-padrao-05.elementor-button .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	min-height: var(--c5-size);
	padding: 0 1.6em;
	border-radius: 999px;
	background-color: var(--c5-bg);
	color: var(--c5-ink);
	font-weight: 500;
	white-space: nowrap;
	transition: background-color 0.5s ease, color 0.5s ease;
}
.botao-padrao-05 .elementor-button .elementor-button-text,
.botao-padrao-05.elementor-button .elementor-button-text {
	color: inherit;
}
.botao-padrao-05 .elementor-button::before,
.botao-padrao-05.elementor-button::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: var(--c5-size);
	height: var(--c5-size);
	transform: translateY(-50%);
	border-radius: 50%;
	background-color: var(--c5-bg);
	transition: background-color 0.5s ease;
}
.botao-padrao-05 .elementor-button::after,
.botao-padrao-05.elementor-button::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: var(--c5-size);
	height: var(--c5-size);
	transform: translateY(-50%);
	border-radius: 50%;
	background-color: var(--c5-ink);
	-webkit-mask-image: var(--pbtn-arrow), var(--pbtn-arrow);
	mask-image: var(--pbtn-arrow), var(--pbtn-arrow);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 42%;
	mask-size: 42%;
	-webkit-mask-position: 50% 50%, -80% 180%;
	mask-position: 50% 50%, -80% 180%;
	transition: background-color 0.5s ease,
		-webkit-mask-position 0.55s cubic-bezier(0.65, 0, 0.35, 1),
		mask-position 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
/* Hover: inverte pílula, círculo e seta */
.botao-padrao-05 .elementor-button:hover .elementor-button-content-wrapper,
.botao-padrao-05 .elementor-button:focus-visible .elementor-button-content-wrapper,
.botao-padrao-05.elementor-button:hover .elementor-button-content-wrapper,
.botao-padrao-05.elementor-button:focus-visible .elementor-button-content-wrapper {
	background-color: var(--c5-bg-h);
	color: var(--c5-ink-h);
}
.botao-padrao-05 .elementor-button:hover::before,
.botao-padrao-05 .elementor-button:focus-visible::before,
.botao-padrao-05.elementor-button:hover::before,
.botao-padrao-05.elementor-button:focus-visible::before {
	background-color: var(--c5-bg-h);
}
.botao-padrao-05 .elementor-button:hover::after,
.botao-padrao-05 .elementor-button:focus-visible::after,
.botao-padrao-05.elementor-button:hover::after,
.botao-padrao-05.elementor-button:focus-visible::after {
	background-color: var(--c5-ink-h);
	-webkit-mask-position: 180% -80%, 50% 50%;
	mask-position: 180% -80%, 50% 50%;
}

/* ==========================================================================
   MODELO 06 — 21ST Contorno (só as linhas, sem fundo)
   ========================================================================== */
.botao-padrao-06 .elementor-button,
.botao-padrao-06.elementor-button {
	--c6-size: 3.1em;
	--c6-gap: 0.4em;
	--c6-line: var(--cs-color-navy, #02065F);   /* linha + texto + seta (normal) */
	--c6-line-h: var(--cs-color-cyan, #00A0CC); /* idem (hover) */
	--c6-ink: var(--c6-line);                   /* cor atual (anima no hover) */

	position: relative;
	display: inline-flex !important;
	align-items: center;
	padding: 0 calc(var(--c6-size) + var(--c6-gap)) 0 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 999px;
	line-height: 1;
}
.botao-padrao-06 .elementor-button:hover,
.botao-padrao-06 .elementor-button:focus-visible,
.botao-padrao-06.elementor-button:hover,
.botao-padrao-06.elementor-button:focus-visible {
	--c6-ink: var(--c6-line-h);
}
.botao-padrao-06 .elementor-button .elementor-button-content-wrapper,
.botao-padrao-06.elementor-button .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	min-height: var(--c6-size);
	padding: 0 1.6em;
	border: 1.5px solid var(--c6-ink);
	border-radius: 999px;
	background: transparent;
	color: var(--c6-ink);
	font-weight: 500;
	white-space: nowrap;
	transition: border-color 0.5s ease, color 0.5s ease;
}
.botao-padrao-06 .elementor-button .elementor-button-text,
.botao-padrao-06.elementor-button .elementor-button-text {
	color: inherit;
}
.botao-padrao-06 .elementor-button::before,
.botao-padrao-06.elementor-button::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: var(--c6-size);
	height: var(--c6-size);
	transform: translateY(-50%);
	border: 1.5px solid var(--c6-ink);
	border-radius: 50%;
	background: transparent;
	transition: border-color 0.5s ease;
}
.botao-padrao-06 .elementor-button::after,
.botao-padrao-06.elementor-button::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: var(--c6-size);
	height: var(--c6-size);
	transform: translateY(-50%);
	border-radius: 50%;
	background-color: var(--c6-ink);
	-webkit-mask-image: var(--pbtn-arrow), var(--pbtn-arrow);
	mask-image: var(--pbtn-arrow), var(--pbtn-arrow);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 42%;
	mask-size: 42%;
	-webkit-mask-position: 50% 50%, -80% 180%;
	mask-position: 50% 50%, -80% 180%;
	transition: background-color 0.5s ease,
		-webkit-mask-position 0.55s cubic-bezier(0.65, 0, 0.35, 1),
		mask-position 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.botao-padrao-06 .elementor-button:hover::after,
.botao-padrao-06 .elementor-button:focus-visible::after,
.botao-padrao-06.elementor-button:hover::after,
.botao-padrao-06.elementor-button:focus-visible::after {
	-webkit-mask-position: 180% -80%, 50% 50%;
	mask-position: 180% -80%, 50% 50%;
}

/* ==========================================================================
   MODELO 07 — 21ST (mesma mecânica do 05; cores para fundo CLARO)
   Pílula navy em repouso (destaca sobre fundo claro); inverte para ciano no hover.
   ========================================================================== */
.botao-padrao-07 .elementor-button,
.botao-padrao-07.elementor-button {
	--c7-size: 3.1em;             /* diâmetro do círculo = altura da pílula */
	--c7-gap: 0.4em;              /* vão entre pílula e círculo */
	--c7-bg: var(--cs-color-navy, #02065F);     /* fundo pílula + círculo (normal) */
	--c7-ink: #ffffff;            /* texto + seta (normal) */
	--c7-bg-h: var(--cs-color-cyan, #00A0CC);   /* fundo (hover) */
	--c7-ink-h: #ffffff;          /* texto + seta (hover) */

	position: relative;
	display: inline-flex !important;
	align-items: center;
	padding: 0 calc(var(--c7-size) + var(--c7-gap)) 0 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 999px;
	line-height: 1;
}
.botao-padrao-07 .elementor-button .elementor-button-content-wrapper,
.botao-padrao-07.elementor-button .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	min-height: var(--c7-size);
	padding: 0 1.6em;
	border-radius: 999px;
	background-color: var(--c7-bg);
	color: var(--c7-ink);
	font-weight: 500;
	white-space: nowrap;
	transition: background-color 0.5s ease, color 0.5s ease;
}
.botao-padrao-07 .elementor-button .elementor-button-text,
.botao-padrao-07.elementor-button .elementor-button-text {
	color: inherit;
}
.botao-padrao-07 .elementor-button::before,
.botao-padrao-07.elementor-button::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: var(--c7-size);
	height: var(--c7-size);
	transform: translateY(-50%);
	border-radius: 50%;
	background-color: var(--c7-bg);
	transition: background-color 0.5s ease;
}
.botao-padrao-07 .elementor-button::after,
.botao-padrao-07.elementor-button::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: var(--c7-size);
	height: var(--c7-size);
	transform: translateY(-50%);
	border-radius: 50%;
	background-color: var(--c7-ink);
	-webkit-mask-image: var(--pbtn-arrow), var(--pbtn-arrow);
	mask-image: var(--pbtn-arrow), var(--pbtn-arrow);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 42%;
	mask-size: 42%;
	-webkit-mask-position: 50% 50%, -80% 180%;
	mask-position: 50% 50%, -80% 180%;
	transition: background-color 0.5s ease,
		-webkit-mask-position 0.55s cubic-bezier(0.65, 0, 0.35, 1),
		mask-position 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
/* Hover: inverte pílula, círculo e seta */
.botao-padrao-07 .elementor-button:hover .elementor-button-content-wrapper,
.botao-padrao-07 .elementor-button:focus-visible .elementor-button-content-wrapper,
.botao-padrao-07.elementor-button:hover .elementor-button-content-wrapper,
.botao-padrao-07.elementor-button:focus-visible .elementor-button-content-wrapper {
	background-color: var(--c7-bg-h);
	color: var(--c7-ink-h);
}
.botao-padrao-07 .elementor-button:hover::before,
.botao-padrao-07 .elementor-button:focus-visible::before,
.botao-padrao-07.elementor-button:hover::before,
.botao-padrao-07.elementor-button:focus-visible::before {
	background-color: var(--c7-bg-h);
}
.botao-padrao-07 .elementor-button:hover::after,
.botao-padrao-07 .elementor-button:focus-visible::after,
.botao-padrao-07.elementor-button:hover::after,
.botao-padrao-07.elementor-button:focus-visible::after {
	background-color: var(--c7-ink-h);
	-webkit-mask-position: 180% -80%, 50% 50%;
	mask-position: 180% -80%, 50% 50%;
}

/* ==========================================================================
   MODELO 08 — 21ST (mesma mecânica do 05; cores para fundo ESCURO)
   Pílula branca em repouso (destaca sobre fundo escuro); inverte para ciano no hover.
   ========================================================================== */
.botao-padrao-08 .elementor-button,
.botao-padrao-08.elementor-button {
	--c8-size: 3.1em;
	--c8-gap: 0.4em;
	--c8-bg: #ffffff;             /* fundo pílula + círculo (normal) */
	--c8-ink: var(--cs-color-navy, #02065F);    /* texto + seta (normal) */
	--c8-bg-h: var(--cs-color-cyan, #00A0CC);   /* fundo (hover) */
	--c8-ink-h: #ffffff;          /* texto + seta (hover) */

	position: relative;
	display: inline-flex !important;
	align-items: center;
	padding: 0 calc(var(--c8-size) + var(--c8-gap)) 0 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 999px;
	line-height: 1;
}
.botao-padrao-08 .elementor-button .elementor-button-content-wrapper,
.botao-padrao-08.elementor-button .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	min-height: var(--c8-size);
	padding: 0 1.6em;
	border-radius: 999px;
	background-color: var(--c8-bg);
	color: var(--c8-ink);
	font-weight: 500;
	white-space: nowrap;
	transition: background-color 0.5s ease, color 0.5s ease;
}
.botao-padrao-08 .elementor-button .elementor-button-text,
.botao-padrao-08.elementor-button .elementor-button-text {
	color: inherit;
}
.botao-padrao-08 .elementor-button::before,
.botao-padrao-08.elementor-button::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: var(--c8-size);
	height: var(--c8-size);
	transform: translateY(-50%);
	border-radius: 50%;
	background-color: var(--c8-bg);
	transition: background-color 0.5s ease;
}
.botao-padrao-08 .elementor-button::after,
.botao-padrao-08.elementor-button::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: var(--c8-size);
	height: var(--c8-size);
	transform: translateY(-50%);
	border-radius: 50%;
	background-color: var(--c8-ink);
	-webkit-mask-image: var(--pbtn-arrow), var(--pbtn-arrow);
	mask-image: var(--pbtn-arrow), var(--pbtn-arrow);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 42%;
	mask-size: 42%;
	-webkit-mask-position: 50% 50%, -80% 180%;
	mask-position: 50% 50%, -80% 180%;
	transition: background-color 0.5s ease,
		-webkit-mask-position 0.55s cubic-bezier(0.65, 0, 0.35, 1),
		mask-position 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
/* Hover: inverte pílula, círculo e seta */
.botao-padrao-08 .elementor-button:hover .elementor-button-content-wrapper,
.botao-padrao-08 .elementor-button:focus-visible .elementor-button-content-wrapper,
.botao-padrao-08.elementor-button:hover .elementor-button-content-wrapper,
.botao-padrao-08.elementor-button:focus-visible .elementor-button-content-wrapper {
	background-color: var(--c8-bg-h);
	color: var(--c8-ink-h);
}
.botao-padrao-08 .elementor-button:hover::before,
.botao-padrao-08 .elementor-button:focus-visible::before,
.botao-padrao-08.elementor-button:hover::before,
.botao-padrao-08.elementor-button:focus-visible::before {
	background-color: var(--c8-bg-h);
}
.botao-padrao-08 .elementor-button:hover::after,
.botao-padrao-08 .elementor-button:focus-visible::after,
.botao-padrao-08.elementor-button:hover::after,
.botao-padrao-08.elementor-button:focus-visible::after {
	background-color: var(--c8-ink-h);
	-webkit-mask-position: 180% -80%, 50% 50%;
	mask-position: 180% -80%, 50% 50%;
}

/* ==========================================================================
   Acessibilidade — respeita "reduzir movimento"
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.botao-padrao-01 .elementor-button::after,
	.botao-padrao-01.elementor-button::after,
	.botao-padrao-02 .elementor-button::after,
	.botao-padrao-02.elementor-button::after,
	.botao-padrao-03 .elementor-button::after,
	.botao-padrao-03.elementor-button::after,
	.botao-padrao-03 .elementor-button,
	.botao-padrao-03.elementor-button,
	.botao-padrao-04 .elementor-button::after,
	.botao-padrao-04.elementor-button::after,
	.botao-padrao-05 .elementor-button::after,
	.botao-padrao-05.elementor-button::after,
	.botao-padrao-06 .elementor-button::after,
	.botao-padrao-06.elementor-button::after,
	.botao-padrao-07 .elementor-button::after,
	.botao-padrao-07.elementor-button::after,
	.botao-padrao-08 .elementor-button::after,
	.botao-padrao-08.elementor-button::after {
		transition-duration: 0.001ms;
	}
}