/* =========================================================================
   Página: App Minha CA (/produtos/app-minha-ca)
   Design aprovado "Minha CA Landing" (tema escuro), com a paleta da marca
   CA® — a mesma do CA Preview e do CA 360.
   Asset standalone (fora do bundle webpack). Classes prefixadas com amc-
   para não colidir com o Bootstrap global do tema.
   ========================================================================= */

body.amc-body {
	background: #161826 !important;
	margin: 0;
}

#page-app-minha-ca {
	--amc-bg: #161826;
	--amc-surface: #232532;
	--amc-text: #e9e9ed;
	--amc-muted: #b2b6ca;
	--amc-muted-2: #9da0b4;
	--amc-muted-3: #75798c;
	--amc-soft: #cfd3e5;
	--amc-accent: #9936f2;
	--amc-accent-200: #e7defe;
	--amc-accent-300: #dcbcfe;
	--amc-accent-400: #c48cfb;
	--amc-accent-700: #5d2894;
	--amc-accent-800: #42206a;
	--amc-line: rgba(233, 233, 237, 0.10);
	--amc-line-2: rgba(233, 233, 237, 0.16);
	--amc-font: "Inter", system-ui, sans-serif;
	/* respiro entre um título/intro e o bloco que ele apresenta */
	--amc-gap-block: clamp(40px, 4.4cqw, 56px);

	background: var(--amc-bg);
	color: var(--amc-text);
	font-family: var(--amc-font);
	font-size: 15px;
	line-height: 1.55;
	overflow: hidden;
	container-type: inline-size;
	-webkit-font-smoothing: antialiased;
}

#page-app-minha-ca h1,
#page-app-minha-ca h2,
#page-app-minha-ca h3,
#page-app-minha-ca h4 {
	font-family: var(--amc-font);
	font-weight: 500;
	color: var(--amc-text);
	margin: 0;
	text-wrap: pretty;
}
#page-app-minha-ca p { margin: 0; text-wrap: pretty; }
#page-app-minha-ca sup { font-size: 0.55em; position: relative; top: -0.6em; line-height: 0; }
#page-app-minha-ca a { text-decoration: none; }
#page-app-minha-ca img { max-width: 100%; height: auto; display: block; }
#page-app-minha-ca ul { list-style: none; margin: 0; padding: 0; }

/* O bundle global do tema (comparison.scss) declara `figure` sem escopo com
   position:absolute — feito para os sliders de antes/depois de outras
   páginas, mas vaza para o site inteiro. */
#page-app-minha-ca figure {
	position: static;
	width: auto;
	height: auto;
	font-size: inherit;
	background: none;
	margin: 0;
}

.amc-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 3.5cqw, 28px); }
#page-app-minha-ca section[id] { scroll-margin-top: 160px; }

.amc-rule {
	border: 0;
	height: 1px;
	margin: 0;
	background: linear-gradient(90deg, transparent, var(--amc-line-2) 12%, var(--amc-line-2) 88%, transparent);
}

/* ------------------------------------------------------------- Tipografia */
.amc-kicker {
	font-size: 12.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--amc-accent-400);
}
.amc-intro { max-width: 52ch; }
#page-app-minha-ca .amc-intro h2 { margin-top: 14px; }
#page-app-minha-ca h2 {
	font-size: clamp(27px, 3.4cqw, 40px);
	line-height: 1.12;
	letter-spacing: -0.025em;
}
#page-app-minha-ca .amc-intro__lead { margin-top: 16px; font-size: clamp(15px, 1.45cqw, 17px); line-height: 1.6; color: var(--amc-muted); }

/* Brilhos de fundo do design */
.amc-glow { position: absolute; pointer-events: none; z-index: 0; }
.amc-glow--hero {
	top: -120px;
	left: -80px;
	width: min(620px, 80cqw);
	height: 480px;
	background: radial-gradient(closest-side, rgba(153, 54, 242, 0.17), transparent);
}
.amc-glow--phone {
	inset: 8% 14%;
	background: radial-gradient(closest-side, rgba(153, 54, 242, 0.3), transparent);
	filter: blur(28px);
}
.amc-glow--soft {
	inset: 10% 14%;
	background: radial-gradient(closest-side, rgba(153, 54, 242, 0.2), transparent);
	filter: blur(26px);
}
.amc-glow--cta {
	inset: 0;
	background: radial-gradient(60% 140% at 50% 0%, rgba(153, 54, 242, 0.22), transparent);
}

/* ---------------------------------------------------------------- Botões */
.amc-stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.amc-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: 8px;
	padding: 13px 20px;
	font-size: 15px;
	font-weight: 500;
	border: 1px solid transparent;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.amc-btn svg { flex: none; }
.amc-btn--apple { border-color: var(--amc-accent); color: var(--amc-accent-200); }
.amc-btn--apple:hover,
.amc-btn--apple:focus { background: rgba(153, 54, 242, 0.16); color: var(--amc-accent-200); }
.amc-btn--google { border-color: rgba(233, 233, 237, 0.22); color: var(--amc-text); }
.amc-btn--google:hover,
.amc-btn--google:focus { background: rgba(233, 233, 237, 0.07); border-color: rgba(233, 233, 237, 0.4); color: var(--amc-text); }
.amc-btn--ondark { border-color: rgba(243, 245, 254, 0.5); color: #f3f5fe; }
.amc-btn--ondark:hover,
.amc-btn--ondark:focus { background: rgba(243, 245, 254, 0.12); border-color: #f3f5fe; color: #fff; }

.amc-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	padding-bottom: 3px;
	border-bottom: 1px solid var(--amc-line-2);
	color: var(--amc-accent-300);
	font-size: 15px;
	font-weight: 500;
	transition: color 0.18s ease, border-color 0.18s ease;
}
.amc-link:hover,
.amc-link:focus { color: var(--amc-accent-200); border-color: var(--amc-accent); }

.amc-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid rgba(153, 54, 242, 0.45);
	color: var(--amc-accent-300);
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ Hero */
.amc-hero { position: relative; padding: clamp(150px, calc(14vh + 70px), 220px) 0 clamp(52px, 6cqw, 88px); }
.amc-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(32px, 4.5cqw, 56px);
	align-items: center;
}
#page-app-minha-ca h1 {
	margin-top: 22px;
	font-size: clamp(32px, 4.9cqw, 58px);
	line-height: 1.04;
	letter-spacing: -0.03em;
	max-width: 15ch;
}
#page-app-minha-ca .amc-hero__sub { margin-top: 22px; font-size: clamp(15px, 1.55cqw, 18px); line-height: 1.6; color: var(--amc-muted); max-width: 46ch; }
#page-app-minha-ca .amc-hero__note { margin-top: 18px; font-size: 13.5px; color: var(--amc-muted-3); }
.amc-hero__media { position: relative; display: flex; justify-content: center; }

/* ------------------------------------------------------- Mockup de celular */
.amc-phone {
	position: relative;
	z-index: 1;
	width: 240px;
	padding: 9px;
	border-radius: 38px;
	background: linear-gradient(155deg, #595d6c, #292b31 55%, #3f424d);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.amc-phone--lg { width: 320px; padding: 11px; border-radius: 46px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65); }
.amc-phone__screen {
	position: relative;
	border-radius: 30px;
	overflow: hidden;
	background: #fff;
	aspect-ratio: 589 / 1180;
}
.amc-phone--lg .amc-phone__screen { border-radius: 36px; }
#page-app-minha-ca .amc-phone__screen img { width: 100%; }
.amc-phone__notch {
	position: absolute;
	top: 11px;
	left: 50%;
	transform: translateX(-50%);
	width: 84px;
	height: 22px;
	border-radius: 999px;
	background: #17171a;
}
.amc-phone--lg .amc-phone__notch { top: 12px; width: 92px; height: 24px; }

/* Capturas soltas (sem moldura), como no design */
#page-app-minha-ca .amc-shot {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 252px;
	border-radius: 18px;
}
#page-app-minha-ca .amc-shot--up { margin-top: 26px; }
#page-app-minha-ca .amc-shot--down { margin-bottom: 26px; }
#page-app-minha-ca .amc-shot--solo { max-width: 300px; }

/* --------------------------------------------------------- Funcionalidades */
.amc-func { padding: clamp(56px, 7cqw, 96px) 0 clamp(24px, 3cqw, 40px); }
.amc-feature {
	margin-top: clamp(36px, 4.2cqw, 44px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 5.4cqw, 64px);
	align-items: center;
}
.amc-feature + .amc-feature { margin-top: clamp(56px, 8.8cqw, 104px); }
.amc-feature__media { position: relative; display: flex; justify-content: center; min-width: 0; }
.amc-feature__media--duo { gap: 8px; }
.amc-feature--rev .amc-feature__media { order: -1; }
.amc-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	border: 1px solid rgba(153, 54, 242, 0.45);
	background: rgba(153, 54, 242, 0.1);
	color: var(--amc-accent-400);
}
#page-app-minha-ca .amc-feature h3 { margin-top: 20px; font-size: clamp(21px, 2.4cqw, 28px); letter-spacing: -0.02em; }
#page-app-minha-ca .amc-feature__lead { margin-top: 12px; font-size: clamp(15px, 1.4cqw, 16.5px); line-height: 1.6; color: var(--amc-muted); }
#page-app-minha-ca .amc-feature__lead + .amc-feature__lead { margin-top: 14px; }

#page-app-minha-ca .amc-checks { margin-top: 22px; display: grid; gap: 12px; }
.amc-checks li {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 12px;
	align-items: start;
	font-size: clamp(14px, 1.35cqw, 15.5px);
	line-height: 1.5;
	color: var(--amc-soft);
}
.amc-check { display: block; margin-top: 3px; color: var(--amc-accent-400); }

.amc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.amc-chips span {
	border: 1px solid var(--amc-line-2);
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 13px;
	color: var(--amc-soft);
}

/* ---------------------------------------------------------- Como funciona */
.amc-passos { padding: clamp(56px, 7cqw, 96px) 0 0; }
.amc-passos__grid {
	margin-top: var(--amc-gap-block);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 2.6cqw, 28px);
}
.amc-passo { border-top: 1px solid var(--amc-line-2); padding-top: 22px; }
.amc-passo__n { font-size: 12.5px; letter-spacing: 0.1em; color: var(--amc-accent-400); }
#page-app-minha-ca .amc-passo h4 { margin-top: 12px; font-size: clamp(16px, 1.6cqw, 19px); letter-spacing: -0.01em; }
#page-app-minha-ca .amc-passo p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--amc-muted-2); }

/* --------------------------------------------------------------- Número */
.amc-numero { padding: clamp(56px, 7cqw, 96px) 0; }
#page-app-minha-ca .amc-numero__box {
	display: flex;
	flex-wrap: wrap;
	align-items: center; /* o design usa baseline; com o texto em 2 linhas, center é o que lê como alinhado */
	gap: 8px 28px;
	border: 1px solid rgba(233, 233, 237, 0.14);
	border-radius: 14px;
	background: var(--amc-surface);
	padding: clamp(24px, 3cqw, 32px) clamp(22px, 3.2cqw, 36px);
}
#page-app-minha-ca .amc-numero__n {
	font-size: clamp(36px, 3.8cqw, 44px);
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--amc-text);
	font-weight: 500;
}
#page-app-minha-ca .amc-numero__txt { font-size: 16px; line-height: 1.5; color: var(--amc-muted); max-width: 46ch; }

/* ------------------------------------------------------------- CTA final */
.amc-cta {
	position: relative;
	padding: clamp(48px, 6cqw, 80px) 0;
	border-top: 1px solid var(--amc-line-2);
	background: linear-gradient(160deg, #2f0a50 0%, #43107a 60%, #2f0a50 100%);
}
.amc-cta__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(28px, 4cqw, 48px);
	align-items: center;
}
#page-app-minha-ca .amc-cta__lead { margin-top: 16px; font-size: clamp(15px, 1.45cqw, 17px); line-height: 1.6; color: rgba(233, 233, 237, 0.82); max-width: 44ch; }
.amc-cta .amc-stores { margin-top: 0; justify-content: flex-end; }

/* ------------------------------------------------- Estados interativos */
#page-app-minha-ca a:focus-visible {
	outline: 2px solid var(--amc-accent-400);
	outline-offset: 3px;
	border-radius: 4px;
}
#page-app-minha-ca .amc-btn:active { transform: translateY(1px); }

/* ==================================================== Responsivo (≤ 990px) */
@media (max-width: 989.98px) {
	.amc-hero { padding-top: 116px; }
	.amc-hero__grid,
	.amc-feature,
	.amc-cta__grid { grid-template-columns: 1fr; }
	.amc-feature--rev .amc-feature__media { order: 0; }
	.amc-passos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.amc-cta .amc-stores { justify-content: flex-start; }
	#page-app-minha-ca h1 { max-width: none; }
}

@media (max-width: 639.98px) {
	.amc-passos__grid { grid-template-columns: 1fr; }
	.amc-stores .amc-btn { flex: 1 1 100%; justify-content: center; }
	.amc-phone--lg { width: min(280px, 78cqw); }
	#page-app-minha-ca .amc-shot { max-width: 46cqw; }
	#page-app-minha-ca .amc-shot--solo { max-width: min(260px, 70cqw); }
}