/*
 * Estilos da seção [mais_saude_app].
 * Totalmente escopado dentro de .msapp-section para não interferir
 * no restante do WordPress/Elementor/tema pai.
 */

.msapp-section {
	/* Paleta isolada da seção — não usa o roxo do tema pai (--theme-color). */
	--msapp-blue-900: #0f2a5c;
	--msapp-blue-700: #163f8c;
	--msapp-blue-600: #1a4fa8;
	--msapp-blue-050: #eef3fb;
	--msapp-green-600: #12703a; /* verde escurecido para atender contraste AA (4.5:1+) em texto e fundo com texto branco */
	--msapp-green-500: #22b25f; /* uso apenas decorativo (bordas de hover, sem texto sobreposto) */
	--msapp-green-050: #e9f8ef;
	--msapp-white: #ffffff;
	--msapp-neutral-50: #f6f9fc;
	--msapp-neutral-100: #eef2f8;
	--msapp-neutral-200: #e2e8f2;
	--msapp-neutral-600: #526078;
	--msapp-neutral-900: #101828;

	--msapp-radius-lg: 28px;
	--msapp-radius-md: 18px;
	--msapp-radius-sm: 12px;
	--msapp-radius-pill: 999px;

	--msapp-shadow-sm: 0 8px 24px -12px rgba(15, 42, 92, 0.18);
	--msapp-shadow-md: 0 24px 60px -20px rgba(15, 42, 92, 0.28);

	--msapp-transition: 0.25s ease;

	display: block;
	background: linear-gradient(180deg, var(--msapp-white) 0%, var(--msapp-neutral-50) 100%);
	color: var(--msapp-neutral-900);
	padding-block: clamp(56px, 8vw, 120px);
	overflow: hidden;
}

.msapp-section,
.msapp-section *,
.msapp-section *::before,
.msapp-section *::after {
	box-sizing: border-box;
}

.msapp-section img {
	max-width: 100%;
	height: auto;
	display: block;
}

.msapp-container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 48px);
}

/* ---------- Layout em grade ---------- */

.msapp-grid {
	display: grid;
	gap: clamp(32px, 5vw, 56px);
	align-items: center;
	grid-template-columns: 1fr;
	grid-template-areas:
		"hook"
		"media"
		"details";
}

@media (min-width: 992px) {
	.msapp-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
		grid-template-rows: auto 1fr;
		column-gap: clamp(48px, 6vw, 80px);
		row-gap: 28px;
		align-items: start;
		grid-template-areas:
			"hook media"
			"details media";
	}
}

.msapp-hook {
	grid-area: hook;
}

.msapp-details {
	grid-area: details;
}

.msapp-media {
	grid-area: media;
}

@media (min-width: 992px) {
	.msapp-media {
		align-self: stretch;
		display: flex;
		align-items: center;
	}
}

/* ---------- Texto ---------- */

.msapp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 6px 16px;
	border-radius: var(--msapp-radius-pill);
	background: var(--msapp-green-050);
	color: var(--msapp-green-600);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.msapp-title {
	margin: 0 0 18px;
	color: var(--msapp-blue-900);
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.msapp-lead {
	margin: 0;
	color: var(--msapp-neutral-600);
	font-size: clamp(17px, 1.6vw, 19px);
	line-height: 1.6;
}

.msapp-text {
	margin: 0 0 16px;
	color: var(--msapp-neutral-600);
	font-size: 16px;
	line-height: 1.7;
	max-width: 62ch;
}

.msapp-text:last-of-type {
	margin-bottom: 28px;
}

.msapp-callout {
	margin: 28px 0 20px;
	padding: 18px 22px;
	border-radius: var(--msapp-radius-md);
	background: var(--msapp-blue-050);
	border-left: 4px solid var(--msapp-blue-600);
	color: var(--msapp-blue-900);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.55;
}

.msapp-download-lead {
	margin: 0 0 18px;
	color: var(--msapp-neutral-900);
	font-size: 17px;
	font-weight: 700;
}

/* ---------- Destaques de recursos ---------- */

.msapp-features {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

@media (min-width: 560px) {
	.msapp-features {
		grid-template-columns: repeat(4, 1fr);
	}
}

.msapp-feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 18px 12px;
	background: var(--msapp-white);
	border: 1px solid var(--msapp-neutral-200);
	border-radius: var(--msapp-radius-md);
	box-shadow: var(--msapp-shadow-sm);
	transition: transform var(--msapp-transition), box-shadow var(--msapp-transition), border-color var(--msapp-transition);
}

.msapp-feature:hover {
	transform: translateY(-4px);
	border-color: var(--msapp-green-500);
	box-shadow: var(--msapp-shadow-md);
}

.msapp-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--msapp-radius-pill);
	background: var(--msapp-blue-050);
	color: var(--msapp-blue-700);
	font-size: 20px;
}

.msapp-feature-label {
	font-size: 14px;
	font-weight: 700;
	color: var(--msapp-neutral-900);
	line-height: 1.3;
}

/* ---------- Botões de loja ---------- */

.msapp-stores {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 8px;
}

.msapp-store-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 22px;
	border-radius: var(--msapp-radius-md);
	background: var(--msapp-blue-900);
	color: var(--msapp-white);
	text-decoration: none;
	line-height: 1.2;
	min-height: 52px;
	box-shadow: var(--msapp-shadow-sm);
	transition: transform var(--msapp-transition), box-shadow var(--msapp-transition), background-color var(--msapp-transition);
}

.msapp-store-btn:hover,
.msapp-store-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--msapp-shadow-md);
}

.msapp-store-btn--google:hover,
.msapp-store-btn--google:focus-visible {
	background: var(--msapp-green-600);
}

.msapp-store-btn--apple:hover,
.msapp-store-btn--apple:focus-visible {
	background: var(--msapp-blue-600);
}

.msapp-store-icon {
	font-size: 26px;
	line-height: 1;
}

.msapp-store-text {
	display: flex;
	flex-direction: column;
}

.msapp-store-text small {
	font-size: 11px;
	font-weight: 400;
	opacity: 0.85;
}

.msapp-store-text strong {
	font-size: 16px;
	font-weight: 700;
}

/* ---------- Imagem promocional ---------- */

.msapp-media-frame {
    position: relative;
    width: 100%;
    border-radius: 28px;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * O aspect-ratio fica na própria imagem (não no container pai) porque
 * "height: 100%"/inset:0 em um filho não resolve de forma confiável
 * quando a altura do pai vem de aspect-ratio — limitação conhecida do
 * CSS (a altura calculada via aspect-ratio não conta como "definida"
 * para fins de resolução de porcentagem/posicionamento de descendentes).
 */
.msapp-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 620px;
    object-fit: contain;
    object-position: center;
}

@media (min-width: 992px) {
	/*
	 * A imagem promocional já traz, do lado esquerdo, a logomarca, o
	 * título e os 4 destaques — os mesmos elementos que esta seção
	 * também exibe em HTML. No desktop, a moldura é recortada via
	 * object-position para priorizar as telas do aplicativo (lado
	 * direito da imagem), evitando repetir visualmente o mesmo título
	 * e os mesmos ícones duas vezes lado a lado.
	 */
	.msapp-image {
          width: 100%;
          height: auto;
          max-height: 620px;
          object-fit: contain;
          object-position: center;
          transform: none;
       }

}

/* ---------- Acessibilidade e movimento ---------- */

.msapp-section a:focus-visible {
	outline: 3px solid var(--msapp-green-600);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.msapp-feature,
	.msapp-store-btn {
		transition: none;
	}

	.msapp-feature:hover,
	.msapp-store-btn:hover,
	.msapp-store-btn:focus-visible {
		transform: none;
	}
}