/* =====================================================================
   Template 3 — "Stripe-grade" premium marketing layer.
   Fully self-contained + scoped under .t3-page so it never collides with
   the theme's global CSS. Light-first; one signature animated gradient.
   Font: Geist (loaded via Google Fonts in header-t3.php).
   ===================================================================== */

.t3-page {
	/* Palette — Stripe-like: deep navy ink on near-white, purple brand. */
	--t3-bg: #ffffff;
	--t3-bg-tint: #f6f9fc;
	--t3-ink: #0a2540;
	--t3-ink-2: #3c4a5e;
	--t3-ink-3: #697386;
	--t3-brand: #635bff;
	--t3-brand-700: #4b45d6;
	--t3-brand-soft: #efeefe;
	--t3-cyan: #21d4fd;
	--t3-pink: #ff6ea9;
	--t3-line: rgba(10, 37, 64, .10);
	--t3-line-2: rgba(10, 37, 64, .06);
	--t3-success: #15c47e;
	--t3-card: #ffffff;
	--t3-shadow-sm: 0 1px 2px rgba(10, 37, 64, .06), 0 1px 3px rgba(10, 37, 64, .05);
	--t3-shadow-md: 0 8px 24px -10px rgba(10, 37, 64, .18);
	--t3-shadow-lg: 0 40px 80px -32px rgba(10, 37, 64, .32);
	--t3-shadow-brand: 0 18px 40px -16px rgba(99, 91, 255, .5);
	--t3-radius: 14px;
	--t3-radius-lg: 22px;
	--t3-shell: 1120px;
	--t3-ease: cubic-bezier(.22, .61, .36, 1);

	/* Signature t3 hero gradient (indigo/violet). One source for every t3 hero;
	   tweak here to recolor them all. */
	--t3-hero-bg: #5650e6;
	--t3-hero-grad:
		radial-gradient(42% 60% at 8% 6%, #8f89ff 0%, transparent 60%),
		radial-gradient(46% 62% at 90% 4%, #4b45d6 0%, transparent 60%),
		radial-gradient(52% 66% at 96% 58%, #7a6bff 0%, transparent 62%),
		radial-gradient(56% 72% at 28% 92%, #3a33ad 0%, transparent 64%),
		radial-gradient(34% 46% at 1% 74%, rgba(45, 210, 253, .40) 0%, transparent 56%),
		radial-gradient(72% 82% at 58% 42%, #635bff 0%, transparent 74%);

	font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--t3-ink-2);
	background: var(--t3-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-feature-settings: "cv01", "ss01";
}

/* ---- Scoped reset / base ---- */
.t3-page *, .t3-page *::before, .t3-page *::after { box-sizing: border-box; }
.t3-page h1, .t3-page h2, .t3-page h3, .t3-page h4, .t3-page p, .t3-page ul, .t3-page li, .t3-page figure { margin: 0; padding: 0; }
.t3-page ul { list-style: none; }
.t3-page a { color: inherit; text-decoration: none; }
.t3-page img, .t3-page svg { display: block; max-width: 100%; }
.t3-page h1, .t3-page h2, .t3-page h3 { color: var(--t3-ink); font-weight: 700; letter-spacing: -0.022em; text-wrap: balance; line-height: 1.08; }
.t3-page :focus-visible { outline: 2px solid var(--t3-brand); outline-offset: 3px; border-radius: 6px; }

.t3-shell { width: 100%; max-width: var(--t3-shell); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }

/* ---- Buttons ---- */
.t3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 15px; line-height: 1; border-radius: 999px; padding: 13px 22px; cursor: pointer; border: 1px solid transparent; transition: transform .18s var(--t3-ease), box-shadow .18s var(--t3-ease), background-color .18s var(--t3-ease), color .18s var(--t3-ease); white-space: nowrap; }
.t3-btn svg { width: 17px; height: 17px; transition: transform .18s var(--t3-ease); }
.t3-btn--primary { background: var(--t3-brand); color: #fff; box-shadow: var(--t3-shadow-brand); }
.t3-btn--primary:hover { background: var(--t3-brand-700); transform: translateY(-1px); }
.t3-btn--primary:hover svg { transform: translateX(3px); }
.t3-btn--ghost { background: transparent; color: var(--t3-ink); border-color: var(--t3-line); }
.t3-btn--ghost:hover { background: var(--t3-bg-tint); border-color: rgba(10,37,64,.18); }
.t3-btn--light { background: #fff; color: var(--t3-ink); box-shadow: var(--t3-shadow-sm); }
.t3-btn--light:hover { transform: translateY(-1px); box-shadow: var(--t3-shadow-md); }

/* ---- Navigation ---- */
.t3-nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, #fff 82%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s, background-color .2s; }
.t3-nav.is-stuck { border-bottom-color: var(--t3-line); background: color-mix(in srgb, #fff 90%, transparent); }
.t3-nav__row { display: flex; align-items: center; gap: 28px; height: 68px; }
.t3-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 19px; color: var(--t3-ink); letter-spacing: -0.03em; }
.t3-brand__mark { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--t3-brand), var(--t3-cyan)); box-shadow: var(--t3-shadow-brand); }
.t3-nav__links { display: none; align-items: center; gap: 26px; margin-left: 6px; }
.t3-nav__links a { font-size: 15px; font-weight: 500; color: var(--t3-ink-2); transition: color .15s; }
.t3-nav__links a:hover { color: var(--t3-ink); }
.t3-nav__cta { display: none; align-items: center; gap: 14px; margin-left: auto; }
.t3-nav__login { font-size: 15px; font-weight: 600; color: var(--t3-ink); }
.t3-nav__burger { margin-left: auto; display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--t3-line); background: #fff; color: var(--t3-ink); cursor: pointer; }
@media (min-width: 940px) {
	.t3-nav__links, .t3-nav__cta { display: flex; }
	.t3-nav__burger { display: none; }
}

/* ---- Hero ---- */
.t3-hero { position: relative; overflow: hidden; padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(56px, 8vw, 110px); }
/* Signature animated gradient — soft mesh, top-right, behind the mockup. */
.t3-hero__aurora { position: absolute; z-index: 0; inset: -20% -10% auto auto; width: min(1100px, 92%); height: 780px; pointer-events: none;
	background:
		radial-gradient(38% 44% at 72% 18%, color-mix(in srgb, var(--t3-cyan) 60%, transparent), transparent 70%),
		radial-gradient(42% 50% at 88% 30%, color-mix(in srgb, var(--t3-brand) 62%, transparent), transparent 72%),
		radial-gradient(40% 46% at 60% 48%, color-mix(in srgb, var(--t3-pink) 48%, transparent), transparent 72%);
	filter: blur(46px) saturate(1.15);
	opacity: .9;
	animation: t3-aurora 22s var(--t3-ease) infinite alternate;
	will-change: transform;
}
@keyframes t3-aurora { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(-3%, 3%, 0) scale(1.08); } }
.t3-hero__inner { position: relative; z-index: 1; display: grid; gap: clamp(40px, 6vw, 64px); align-items: center; }
@media (min-width: 1000px) { .t3-hero__inner { grid-template-columns: 1.04fr 1fr; } }

.t3-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--t3-brand-700); background: var(--t3-brand-soft); border: 1px solid color-mix(in srgb, var(--t3-brand) 18%, transparent); padding: 6px 12px; border-radius: 999px; }
.t3-eyebrow__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--t3-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--t3-brand) 18%, transparent); }
.t3-hero h1 { margin-top: 22px; font-size: clamp(38px, 6vw, 68px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; }
.t3-hero h1 em { font-style: normal; color: var(--t3-brand); }
.t3-hero__sub { margin-top: 22px; max-width: 33ch; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--t3-ink-2); }
.t3-hero__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
.t3-hero__micro { margin-top: 16px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--t3-ink-3); }
.t3-hero__micro svg { width: 16px; height: 16px; color: var(--t3-success); }

/* Hero product mock (browser frame + agenda) */
.t3-mock { position: relative; border-radius: var(--t3-radius-lg); background: #fff; box-shadow: var(--t3-shadow-lg); border: 1px solid var(--t3-line-2); overflow: hidden; }
.t3-mock__bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--t3-line-2); background: var(--t3-bg-tint); }
.t3-mock__dot { width: 10px; height: 10px; border-radius: 999px; background: #d7dee8; }
.t3-mock__url { margin-left: 10px; font-size: 12px; color: var(--t3-ink-3); font-weight: 500; }
.t3-mock__body { padding: 18px; display: grid; gap: 12px; }
.t3-mock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.t3-kpi { border: 1px solid var(--t3-line-2); border-radius: 12px; padding: 12px 13px; background: #fff; }
.t3-kpi__v { font-size: 20px; font-weight: 800; color: var(--t3-ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.t3-kpi__l { margin-top: 2px; font-size: 11px; color: var(--t3-ink-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.t3-mock__row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--t3-line-2); border-radius: 12px; }
.t3-mock__av { width: 34px; height: 34px; border-radius: 999px; flex: none; background: linear-gradient(135deg, var(--t3-brand), var(--t3-cyan)); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.t3-mock__who { flex: 1; min-width: 0; }
.t3-mock__name { font-size: 13.5px; font-weight: 600; color: var(--t3-ink); }
.t3-mock__meta { font-size: 12px; color: var(--t3-ink-3); }
.t3-mock__tag { font-size: 11px; font-weight: 700; color: var(--t3-success); background: color-mix(in srgb, var(--t3-success) 12%, transparent); padding: 4px 9px; border-radius: 999px; }
.t3-mock__chip { position: absolute; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--t3-line-2); border-radius: 12px; padding: 9px 12px; box-shadow: var(--t3-shadow-md); font-size: 12.5px; font-weight: 600; color: var(--t3-ink); }
.t3-mock__chip svg { width: 16px; height: 16px; }
.t3-mock__chip--wa { right: -14px; top: 26%; color: #25d366; }
.t3-mock__chip--star { left: -16px; bottom: 16%; color: #f5a623; }

.t3-hero__visual { position: relative; }
.t3-hero__visual .t3-mock { max-width: 520px; margin-inline: auto; }

/* ---- Footer ---- */
.t3-foot { margin-top: clamp(60px, 9vw, 120px); border-top: 1px solid var(--t3-line); background: var(--t3-bg-tint); padding-block: clamp(36px, 5vw, 56px) 28px; }
.t3-foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.t3-foot__brand { max-width: 42ch; }
.t3-foot__tag { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--t3-ink-3); }
.t3-foot__legal { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--t3-line-2); font-size: 13px; color: var(--t3-ink-3); }

/* ===================== Section system ===================== */
.t3-section { padding-block: clamp(56px, 8vw, 104px); }
.t3-section--tint { background: var(--t3-bg-tint); border-block: 1px solid var(--t3-line-2); }
.t3-head { max-width: 660px; margin-inline: auto; text-align: center; }
.t3-head__eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--t3-brand-700); text-transform: uppercase; }
.t3-head h2 { margin-top: 14px; font-size: clamp(27px, 3.6vw, 40px); letter-spacing: -0.03em; }
.t3-head__sub { margin-top: 15px; font-size: clamp(15.5px, 1.5vw, 18px); line-height: 1.6; color: var(--t3-ink-2); }
.t3-head + .t3-grid, .t3-head + .t3-steps { margin-top: clamp(36px, 4.6vw, 56px); }

/* ---- Trust band ---- */
.t3-trust { padding-block: 24px; border-bottom: 1px solid var(--t3-line-2); }
.t3-trust__inner { display: flex; align-items: center; justify-content: center; gap: 11px; text-align: center; color: var(--t3-ink-2); font-size: clamp(14px, 1.5vw, 16.5px); font-weight: 500; }
.t3-trust__inner strong { color: var(--t3-ink); font-weight: 700; }
.t3-trust svg { width: 19px; height: 19px; color: var(--t3-brand); flex: none; }

/* ---- Card grid ---- */
.t3-grid { display: grid; gap: 18px; }
.t3-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .t3-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.t3-card { background: var(--t3-card); border: 1px solid var(--t3-line); border-radius: var(--t3-radius-lg); padding: 26px 24px; box-shadow: var(--t3-shadow-sm); transition: transform .2s var(--t3-ease), box-shadow .2s var(--t3-ease); }
.t3-card:hover { transform: translateY(-3px); box-shadow: var(--t3-shadow-md); }
.t3-card__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--t3-brand-soft); color: var(--t3-brand-700); margin-bottom: 16px; }
.t3-card__ic svg { width: 22px; height: 22px; }
.t3-card h3 { font-size: 18px; letter-spacing: -0.02em; }
.t3-card p { margin-top: 9px; font-size: 14.5px; line-height: 1.6; color: var(--t3-ink-2); }
.t3-card--prob .t3-card__ic { background: color-mix(in srgb, var(--t3-pink) 16%, #fff); color: #d6336c; }
.t3-card--ben .t3-card__ic { background: color-mix(in srgb, var(--t3-success) 14%, #fff); color: #0f9d63; }

/* ---- Steps (como funciona) ---- */
.t3-steps { display: grid; gap: 20px; }
@media (min-width: 860px) { .t3-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.t3-step { position: relative; padding: 28px 24px; background: var(--t3-card); border: 1px solid var(--t3-line); border-radius: var(--t3-radius-lg); box-shadow: var(--t3-shadow-sm); }
.t3-step__n { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #fff; background: linear-gradient(135deg, var(--t3-brand), var(--t3-brand-700)); box-shadow: var(--t3-shadow-brand); }
.t3-step h3 { margin-top: 18px; font-size: 17.5px; letter-spacing: -0.02em; }
.t3-step p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--t3-ink-2); }
.t3-step code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: var(--t3-brand-soft); color: var(--t3-brand-700); padding: 2px 7px; border-radius: 6px; }

/* ---- Segments (por profissão) ---- */
.t3-seg { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .t3-seg { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .t3-seg { grid-template-columns: repeat(4, 1fr); } }
.t3-seg__card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--t3-radius-lg); border: 1px solid var(--t3-line); background: var(--t3-card); box-shadow: var(--t3-shadow-sm); transition: transform .2s var(--t3-ease), box-shadow .2s var(--t3-ease), border-color .2s; }
.t3-seg__card:hover { transform: translateY(-3px); box-shadow: var(--t3-shadow-md); border-color: color-mix(in srgb, var(--t3-brand) 30%, var(--t3-line)); }
.t3-seg__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--t3-bg-tint); }
.t3-seg__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--t3-ease); }
.t3-seg__card:hover .t3-seg__media img { transform: scale(1.05); }
.t3-seg__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.t3-seg__name { font-weight: 700; font-size: 16px; color: var(--t3-ink); letter-spacing: -0.02em; }
.t3-seg__blurb { font-size: 13px; line-height: 1.55; color: var(--t3-ink-3); flex: 1; }
.t3-seg__more { margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--t3-brand-700); }
.t3-seg__more svg { width: 14px; height: 14px; transition: transform .18s var(--t3-ease); }
.t3-seg__card:hover .t3-seg__more svg { transform: translateX(3px); }
.t3-center { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 48px); }

/* ---- Recursos gating (grátis vs pagos) ---- */
.t3-gate { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .t3-gate { grid-template-columns: 1fr 1fr; } }
.t3-gate__col { border: 1px solid var(--t3-line); border-radius: var(--t3-radius-lg); padding: 28px 26px; background: var(--t3-card); box-shadow: var(--t3-shadow-sm); }
.t3-gate__col--paid { background: linear-gradient(180deg, color-mix(in srgb, var(--t3-brand) 5%, #fff), #fff); border-color: color-mix(in srgb, var(--t3-brand) 24%, var(--t3-line)); }
.t3-gate__tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 5px 11px; border-radius: 999px; }
.t3-gate__col .t3-gate__tag { background: var(--t3-bg-tint); color: var(--t3-ink-2); }
.t3-gate__col--paid .t3-gate__tag { background: var(--t3-brand); color: #fff; }
.t3-gate h3 { margin-top: 14px; font-size: 19px; letter-spacing: -0.02em; }
.t3-gate__list { margin-top: 16px; display: grid; gap: 11px; }
.t3-gate__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--t3-ink-2); }
.t3-gate__list svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--t3-success); }
.t3-gate__col--paid .t3-gate__list svg { color: var(--t3-brand); }

/* ---- Pricing ---- */
.t3-price { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 760px) { .t3-price { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: 960px; margin-inline: auto; } }
.t3-plan { position: relative; display: flex; flex-direction: column; border: 1px solid var(--t3-line); border-radius: var(--t3-radius-lg); padding: 28px 26px; background: var(--t3-card); box-shadow: var(--t3-shadow-sm); }
.t3-plan--feat { border-color: var(--t3-brand); box-shadow: var(--t3-shadow-md); }
.t3-plan__ribbon { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--t3-brand); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; box-shadow: var(--t3-shadow-brand); white-space: nowrap; }
.t3-plan__name { font-size: 16px; font-weight: 700; color: var(--t3-ink); letter-spacing: -0.01em; }
.t3-plan__price { margin-top: 12px; display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.t3-plan__amt { font-size: 34px; font-weight: 800; color: var(--t3-ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.t3-plan__per { font-size: 13.5px; color: var(--t3-ink-3); font-weight: 500; }
.t3-plan__desc { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--t3-ink-3); }
.t3-plan__list { margin-top: 18px; display: grid; gap: 10px; flex: 1; }
.t3-plan__list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.8px; line-height: 1.45; color: var(--t3-ink-2); }
.t3-plan__list svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--t3-success); }
.t3-plan .t3-btn { margin-top: 22px; width: 100%; }

/* ---- FAQ ---- */
.t3-faq { max-width: 760px; margin-inline: auto; margin-top: clamp(36px, 4.6vw, 52px); display: grid; gap: 12px; }
.t3-faq details { border: 1px solid var(--t3-line); border-radius: var(--t3-radius); background: var(--t3-card); box-shadow: var(--t3-shadow-sm); overflow: hidden; }
.t3-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; font-weight: 600; font-size: 16px; color: var(--t3-ink); list-style: none; }
.t3-faq summary::-webkit-details-marker { display: none; }
.t3-faq summary svg { width: 20px; height: 20px; flex: none; color: var(--t3-ink-3); transition: transform .2s var(--t3-ease); }
.t3-faq details[open] summary svg { transform: rotate(45deg); }
.t3-faq__a { padding: 0 20px 18px; font-size: 14.5px; line-height: 1.65; color: var(--t3-ink-2); }

/* ---- Final CTA ---- */
.t3-final { padding-block: clamp(40px, 6vw, 88px); }
.t3-cta { position: relative; overflow: hidden; border-radius: var(--t3-radius-lg); padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 56px); text-align: center; background: linear-gradient(135deg, #0a2540, #1a1a4e 55%, var(--t3-brand-700)); color: #fff; box-shadow: var(--t3-shadow-lg); }
.t3-cta__aurora { position: absolute; inset: -40% -10% auto auto; width: 70%; height: 320px; background: radial-gradient(50% 60% at 70% 20%, color-mix(in srgb, var(--t3-cyan) 55%, transparent), transparent 70%), radial-gradient(50% 60% at 90% 40%, color-mix(in srgb, var(--t3-pink) 45%, transparent), transparent 72%); filter: blur(50px); opacity: .55; pointer-events: none; }
.t3-cta > * { position: relative; z-index: 1; }
.t3-cta h2 { color: #fff; font-size: clamp(26px, 3.6vw, 40px); letter-spacing: -0.03em; }
.t3-cta p { margin-top: 14px; font-size: clamp(15px, 1.6vw, 18px); color: rgba(255,255,255,.82); max-width: 46ch; margin-inline: auto; }
.t3-cta .t3-btn { margin-top: 26px; }
.t3-cta .t3-btn--light { background: #fff; color: var(--t3-brand-700); }
.t3-cta .t3-btn--light:hover { background: #fff; box-shadow: 0 14px 30px -10px rgba(0,0,0,.4); }
.t3-cta__micro { margin-top: 16px; font-size: 13px; color: rgba(255,255,255,.66); }

/* =====================================================================
   T3 v2 — Stripe purple/white skin OVER the real V1 home blocks.
   front-page.php renders the actual V1 sections (content + animations);
   this layer (a) retokenizes to the approved purple/navy/white palette,
   (b) sets Geist, (c) gives the hero the signature gradient, (d) makes
   the nav transparent over the hero and solid after it, (e) removes the
   AI-looking glow dot. Loaded AFTER the compiled bundle so it wins.
   ===================================================================== */

/* (a) palette — force purple/white whatever the saved color-scheme is */
html body.t3-page,
html[data-color-scheme="dark"] body.t3-page,
html[data-color-scheme="light"] body.t3-page {
	--bft-color-primary: #635bff;
	--bft-color-secondary: #4b45d6;
	--bft-color-accent: #635bff;

	/* theme surface tokens — force light (bg-surface/bg-card were dark by default) */
	--bft-color-background: #ffffff;
	--bft-color-surface: #ffffff;
	--bft-color-surface-muted: #f6f9fc;
	--bft-color-card: #ffffff;
	--bft-color-border: rgba(10, 37, 64, .10);
	--bft-color-text: #0a2540;
	--bft-color-text-muted: #4a5670;

	--ink: #0a2540;
	--ink-soft: #313d54;
	--ink-muted: #4a5670;

	--brand: #635bff;
	--brand-2: #4b45d6;
	--brand-soft: rgba(99, 91, 255, .10);
	--accent: #635bff;
	--success: #15c47e;
	--gold: #b8860b;

	--line: rgba(10, 37, 64, .10);
	--line-strong: rgba(10, 37, 64, .14);
	--glass: #ffffff;
	--glass-2: #f6f9fc;
	--glow: rgba(99, 91, 255, .22);

	--royal-950: #eef1ff;
	--royal-900: #ffffff;
	--royal-800: #ffffff;
	--royal-700: #f6f9fc;
	--royal-600: #eef1fb;

	--shadow-card: 0 24px 60px -34px rgba(10, 37, 64, .20);
	--bft-font-heading: "Geist", ui-sans-serif, system-ui, sans-serif;

	--skin-body-bg:
		radial-gradient(1100px 680px at 88% -10%, rgba(99, 91, 255, .06), transparent 60%),
		radial-gradient(900px 600px at 0% 4%, rgba(33, 212, 253, .04), transparent 58%),
		#ffffff;
}

/* (b) Geist across the whole t3 home (incl. the V1 .font-display headings) */
body.t3-page,
body.t3-page .font-display,
body.t3-page h1, body.t3-page h2, body.t3-page h3,
body.t3-page h4, body.t3-page h5, body.t3-page h6 {
	font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* highlighted heading words: readable brand gradient on white (was light blue) */
body.t3-page .text-gradient {
	background: linear-gradient(90deg, #635bff, #4b45d6);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* (e) kill the AI glow dot anywhere it slipped through */
body.t3-page span.bg-brand-soft.text-accent > span:first-child { display: none; }

/* a touch more vertical air between sections (Stripe-like) */
body.t3-page main.bft-home > section { padding-top: clamp(26px, 3.6vw, 58px); padding-bottom: clamp(26px, 3.6vw, 58px); }

/* ── Pricing (#precos) rhythm fix ───────────────────────────────────────
   The grey ".bpx-stage" band is a self-contained section: it carries its own
   background AND its own generous padding (top ~76px / bottom ~88px). But it's
   nested inside a <section> that ALSO picked up the global section padding
   above, so the two stacked on top of #recursos' bottom padding for a ~190px
   void before "Planos e preços". Drop the redundant OUTER section padding (the
   band owns the spacing), trim the band's own top, and dock the features grid
   closer — its distinct grey background already signals the section break. */
body.t3-page main.bft-home > section#precos { padding-top: 0; padding-bottom: 0; }
body.t3-page main.bft-home #precos .bpx-stage { padding-top: clamp(34px, 4vw, 50px); padding-bottom: clamp(44px, 5vw, 68px); }
body.t3-page main.bft-home > section#recursos { padding-bottom: clamp(20px, 2.6vw, 36px); }

/* (d) nav — transparent over the hero gradient, solidifies on scroll */
body.t3-page .t3-nav { background: transparent; border-bottom-color: transparent; }
/* While transparent, NO backdrop-filter: the saturate/blur was tinting + blurring
   the gradient ONLY behind the header — making it bluer than the banner and
   leaving a hard seam at the nav's bottom edge. The header now shows the hero
   gradient untouched, so it reads as ONE connected block with the banner. The
   filter returns only on the scrolled bar (.is-stuck). */
body.t3-page .t3-nav:not(.is-stuck) { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
body.t3-page .t3-nav .t3-brand,
body.t3-page .t3-nav__login { color: #fff; }
body.t3-page .t3-nav__links a { color: rgba(255, 255, 255, .9); }
body.t3-page .t3-nav__links a:hover { color: #fff; }
body.t3-page .t3-nav .t3-btn--primary { background: #fff; color: var(--t3-brand-700); box-shadow: 0 8px 22px rgba(7, 16, 48, .22); }
body.t3-page .t3-nav .t3-btn--primary:hover { background: #fff; transform: translateY(-1px); }
body.t3-page .t3-nav__burger { color: #fff; border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .12); }
/* At the top the nav is transparent and "connected" to the hero (no bar). On
   scroll it KEEPS the brand color — a translucent indigo bar in the theme's
   purple; the white logo/links/CTA from the top state persist (no dark
   overrides). The bar matches the hero's base indigo so it reads as the same
   color, just solidified. */
body.t3-page .t3-nav.is-stuck { background: color-mix(in srgb, var(--t3-hero-bg) 93%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom-color: rgba(255, 255, 255, .16); box-shadow: 0 10px 30px -18px rgba(20, 8, 60, .55); }

/* Inner t3 pages with a LIGHT hero (e.g. /segmentos/) opt into `.t3-solid-nav`
   on <body>: there is no purple gradient hero behind the nav, so the default
   transparent nav would just reveal the dark <body> as a flat band ("old theme"
   look). Render the polished indigo bar (same as the home's scrolled state) from
   the start — white logo/links/CTA stay visible, branded, no dark-body leak. */
body.t3-page.t3-solid-nav .t3-nav { background: color-mix(in srgb, var(--t3-hero-bg) 94%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom-color: rgba(255, 255, 255, .16); box-shadow: 0 10px 30px -18px rgba(20, 8, 60, .55); }

/* (c) HERO — pull up under the sticky nav + signature gradient + white copy */
body.t3-page main.bft-home > section.t3-hero {
	position: relative;
	margin-top: -68px;
	/* Tighter top gap on desktop: the previous clamp(...,70px) pushed the eyebrow
	   ~68px below the nav, sending the subtitle + CTAs (under the tall 5-line H1)
	   below the fold. Pulled up so more of the hero fits above the fold. */
	padding-top: calc(68px + clamp(18px, 2.5vw, 36px));
	padding-bottom: clamp(72px, 9vw, 128px);
	overflow: hidden;
}
body.t3-page .t3-hero__bg {
	position: absolute; inset: 0; z-index: 0;
	background-color: var(--t3-hero-bg);
	background-image: var(--t3-hero-grad);
	clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%);
}
body.t3-page .t3-hero__wash {
	position: absolute; inset: 0; z-index: 1;
	clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%);
	background: linear-gradient(96deg, rgba(7, 16, 48, .42) 0%, rgba(7, 16, 48, .16) 42%, transparent 66%);
}
body.t3-page .t3-hero__inner {
	position: relative; z-index: 2;
	display: grid; gap: clamp(40px, 5vw, 60px); align-items: center;
	/* Single column on mobile. `minmax(0,1fr)` (not the default `auto`) so the
	   track can shrink below the dashboard mock's min-content instead of growing
	   to it — without this the track inflated past the viewport and dragged the
	   hero copy off the right edge (clipped by the section's overflow:hidden). */
	grid-template-columns: minmax(0, 1fr);
}
/* Grid items default to min-width:auto (= min-content) and refuse to shrink —
   force them to 0 so the mock/copy fit the track on every width. */
body.t3-page .t3-hero__copy,
body.t3-page .t3-hero__visual { min-width: 0; }
@media (min-width: 1000px) { body.t3-page .t3-hero__inner { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); } }

body.t3-page .t3-hero .t3-eyebrow { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .30); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
body.t3-page .t3-hero h1 { color: #fff; font-weight: 800; font-size: clamp(40px, 5.2vw, 72px); line-height: 1.02; letter-spacing: -.04em; margin-top: 22px; max-width: 15ch; }
body.t3-page .t3-hero h1 em { font-style: normal; background: linear-gradient(90deg, #fff, #cfe9ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.t3-page .t3-hero__sub { color: rgba(255, 255, 255, .9); max-width: 40ch; margin-top: 22px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; }
body.t3-page .t3-hero__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
body.t3-page .t3-hero .t3-btn--primary { background: #fff; color: var(--t3-brand-700); box-shadow: 0 14px 34px rgba(7, 16, 48, .28); }
body.t3-page .t3-hero .t3-btn--primary:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 18px 40px rgba(7, 16, 48, .34); }
body.t3-page .t3-hero .t3-btn--ghost { background: rgba(255, 255, 255, .10); color: #fff; border-color: rgba(255, 255, 255, .4); }
body.t3-page .t3-hero .t3-btn--ghost:hover { background: rgba(255, 255, 255, .18); }
body.t3-page .t3-hero__micro { margin-top: 18px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: rgba(255, 255, 255, .82); }
body.t3-page .t3-hero__micro svg { width: 16px; height: 16px; color: #7dffd0; }

/* the dashboard mock sits on the gradient (white card + white chips, dark text) */
body.t3-page .t3-hero__mock { position: relative; max-width: 560px; margin-inline: auto; }
body.t3-page .t3-hero { --royal-800: #ffffff; --ink: #0a2540; --line-strong: rgba(10, 37, 64, .10); }

/* keep the nav present + sticky no matter what other base rules say */
body.t3-page .t3-nav { position: sticky; top: 0; z-index: 60; }

/* gentle purple rhythm — alternate sections get a barely-there lavender band so
   the page never reads as flat white (the gradient sections override this). */
body.t3-page main.bft-home > section:nth-child(2n) { background-color: #f6f7ff; }

/* ===== Title + body-copy polish (approved) =====
   Section titles + feature-row titles in the brand accent #534CE2; muted body
   copy darkened so it reads on the light/lavender bands. Dark sections
   (#como-funciona, hero) keep their own !important white overrides, and the
   #problema purple subtitle (!important) is preserved. The theme header/nav
   uses its own --t3-ink-* tokens and is intentionally untouched. */
body.t3-page main.bft-home > section h2.text-ink,
body.t3-page #beneficios h3.text-ink { color: #534CE2; }
body.t3-page .text-ink-soft { color: #313d54; }
body.t3-page .text-ink-muted { color: #4a5670; }

/* feature-showcase (#beneficios) — explicit vertical rhythm. The theme's
   Tailwind bundle is precompiled and can't be rebuilt here, so newly-added
   utility classes (mt-8/gap-4/leading-[1.16]…) aren't in the bundle and do
   nothing. Spacing for this block is therefore set here, where it always wins. */
body.t3-page #beneficios .t3-fs-copy > h3  { margin-top: clamp(14px, 1.4vw, 20px); line-height: 1.18; }
body.t3-page #beneficios .t3-fs-copy > p   { margin-top: clamp(18px, 1.9vw, 26px); }
body.t3-page #beneficios .t3-fs-copy > ul  { margin-top: clamp(28px, 3.2vw, 40px); gap: 18px; }
body.t3-page #beneficios .t3-fs-copy > div { margin-top: clamp(30px, 3.4vw, 42px); }

/* ============================================================================
   STRIPE PASS (home): kill the AI-tell eyebrow pills → plain highlighted label,
   center every section header, and restore the vertical rhythm that the
   `.t3-page` margin reset zeroes out on the Tailwind utilities.
   ========================================================================== */

/* 1) Tailwind eyebrow pills (section_head, feature-showcase, booking-showcase):
      remove the pill chrome, keep just the highlighted #534CE2 label. */
body.t3-page .bft-home .rounded-full.uppercase.bg-brand-soft {
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	box-shadow: none !important;
	color: #534CE2 !important;
	letter-spacing: 0.14em;
}
/* hide any leftover glow dot inside those eyebrows */
body.t3-page .bft-home .rounded-full.uppercase.bg-brand-soft > span:first-child { display: none !important; }

/* 2) Hero eyebrow (its own .t3-eyebrow) → white highlighted label, no pill. */
body.t3-page .t3-hero .t3-eyebrow {
	background: transparent !important;
	border: 0 !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	padding: 0 !important;
	color: #fff !important;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 12.5px;
	font-weight: 700;
}

/* 3) Centered section headers + their vertical rhythm (mt-* utilities are
      zeroed by the .t3-page reset, so set the gaps here where they win). */
body.t3-page .t3-sec-head { text-align: center; margin-left: auto; margin-right: auto; }
body.t3-page .t3-sec-head > h2 { margin-top: clamp(12px, 1.4vw, 18px); }
body.t3-page .t3-sec-head > p  { margin-top: clamp(14px, 1.6vw, 20px); }

/* Segments cards — selected/hover state. Nutricionista (first card) is pre-selected
   on load; any card adopts it on hover: #534CE2 fills the card body + border, white
   text. Pure CSS, zero markup change (targets the existing structure). */
body.t3-page #segmentos .grid > a > div:last-child { transition: background-color .2s ease; }
body.t3-page #segmentos .grid > a > div:last-child span { transition: color .2s ease; }
body.t3-page #segmentos .grid:not(:hover) > a:first-child,
body.t3-page #segmentos .grid > a:hover { border-color: #534CE2 !important; }
body.t3-page #segmentos .grid:not(:hover) > a:first-child > div:last-child,
body.t3-page #segmentos .grid > a:hover > div:last-child { background: #534CE2 !important; }
body.t3-page #segmentos .grid:not(:hover) > a:first-child > div:last-child span,
body.t3-page #segmentos .grid > a:hover > div:last-child span { color: #fff !important; }

/* Features-preview (#recursos): first card pre-selected on load; any card goes
   active on hover. Whole card turns #534CE2 (no image = full-card fill). */
body.t3-page #recursos .grid > a { transition: background .2s ease, border-color .2s ease; }
body.t3-page #recursos .grid:not(:hover) > a:first-child,
body.t3-page #recursos .grid > a:hover { background: #534CE2 !important; border-color: #534CE2 !important; transform: none !important; box-shadow: 0 8px 32px -12px rgba(83,76,226,.5) !important; }
body.t3-page #recursos .grid:not(:hover) > a:first-child h3,
body.t3-page #recursos .grid:not(:hover) > a:first-child p,
body.t3-page #recursos .grid:not(:hover) > a:first-child .text-accent,
body.t3-page #recursos .grid > a:hover h3,
body.t3-page #recursos .grid > a:hover p,
body.t3-page #recursos .grid > a:hover .text-accent { color: #fff !important; }

/* Home shows 8 professions; the full list lives on the /segmentos/ page that the
   "Ver todas as profissões" button links to. */
body.t3-page #segmentos .grid > a:nth-child(n+9) { display: none; }
/* Premium "Ver todas as profissões" button: #534CE2 fill, white text. */
body.t3-page .t3-seg-all { background: #534CE2 !important; border-color: #534CE2 !important; color: #fff !important; box-shadow: 0 16px 34px -16px rgba(83,76,226,.55); transition: box-shadow .2s ease, transform .2s ease, filter .2s ease; }
body.t3-page .t3-seg-all:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 22px 44px -16px rgba(83,76,226,.7); }

/* ===== "Comece a receber agendamentos em 3 passos" — gradient band =====
   The V1 markup designed these floating white cards for a DARK band; on white
   they vanished. Give the section the hero gradient so the cards pop and the
   purple ties back to the top of the page. */
body.t3-page #como-funciona {
	position: relative;
	overflow: hidden;
	--ink: #ffffff;
	--ink-soft: rgba(255, 255, 255, .92);
	--ink-muted: rgba(255, 255, 255, .82);
	/* the heading color comes from `body.bft-v5 h2/h3 { color: var(--bft-color-text) }`,
	   NOT from --ink/.text-ink — so flip this token too or the title stays navy. */
	--bft-color-text: #ffffff;
	--bft-color-text-muted: rgba(255, 255, 255, .84);
	background: transparent;
	/* steep TOP cut (accentuated, above the centered heading) + gentle BOTTOM cut
	   so the rightmost step description never lands in the white triangle. */
	--t3-cut-top: clamp(54px, 8vw, 132px);
	--t3-cut-bot: clamp(16px, 2.2vw, 40px);
	padding-top: clamp(54px, 5.5vw, 88px) !important;
	padding-bottom: clamp(50px, 5vw, 76px) !important;
}
/* diagonal gradient band (echoes the hero cut). The gradient lives on a clipped
   ::before layer so the heading + step cards (in .shell) are never clipped. */
body.t3-page #como-funciona::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: #5650e6;
	background-image:
		radial-gradient(40% 60% at 8% 8%, #8f89ff 0%, transparent 60%),
		radial-gradient(46% 64% at 92% 4%, #4b45d6 0%, transparent 60%),
		radial-gradient(52% 66% at 90% 92%, #7a6bff 0%, transparent 62%),
		radial-gradient(38% 50% at 4% 88%, rgba(45, 210, 253, .34) 0%, transparent 56%),
		radial-gradient(70% 80% at 56% 46%, #635bff 0%, transparent 74%);
	clip-path: polygon(0 var(--t3-cut-top), 100% 0, 100% calc(100% - var(--t3-cut-bot)), 0 100%);
}
body.t3-page #como-funciona > .shell { position: relative; z-index: 1; }
/* make the circling dashed ring + glow stand out on the purple band */
body.t3-page #como-funciona .animate-spinslow { width: 296px !important; height: 296px !important; }
body.t3-page #como-funciona .animate-spinslow ellipse { stroke-width: 2.8 !important; }
/* three distinct, bright rings — one colour per step */
body.t3-page #como-funciona ol > li:nth-child(1) .animate-spinslow ellipse { stroke: rgba(56, 224, 255, .95) !important; }
body.t3-page #como-funciona ol > li:nth-child(2) .animate-spinslow ellipse { stroke: rgba(255, 196, 84, .95) !important; }
body.t3-page #como-funciona ol > li:nth-child(3) .animate-spinslow ellipse { stroke: rgba(255, 122, 176, .98) !important; }
body.t3-page #como-funciona .animate-drift { opacity: 1 !important; }
/* eyebrow pill → translucent white on the band */
body.t3-page #como-funciona span.bg-brand-soft.text-accent {
	background: rgba(255, 255, 255, .16) !important;
	border-color: rgba(255, 255, 255, .30) !important;
	color: #fff !important;
}
/* step number badge → white chip with purple number (purple-on-purple was flat) */
body.t3-page #como-funciona ol > li > span {
	background: #fff !important;
	background-image: none !important;
	color: var(--t3-brand-700) !important;
	box-shadow: 0 10px 24px -10px rgba(7, 16, 48, .5) !important;
}
/* belt-and-suspenders: force the section/step headings + intro white on the band.
   These selectors only hit the section head + step <h3>/intro — the floating mock
   cards use inline color (not .text-ink/h3), so their dark text is untouched. */
body.t3-page #como-funciona h2,
body.t3-page #como-funciona ol > li > h3,
body.t3-page #como-funciona .text-ink { color: #fff !important; }
body.t3-page #como-funciona .text-ink-soft { color: rgba(255, 255, 255, .92) !important; }
body.t3-page #como-funciona ol > li > p,
body.t3-page #como-funciona .text-ink-muted { color: rgba(255, 255, 255, .82) !important; }

/* ===== "O problema" — premium card grid on the LIGHT page. Cards white with
   #534CE2 icons; on HOVER the card fills with #534CE2 and its icon + copy turn
   white. Behind it, a "live booking calendar": time-slot cells in #534CE2 that
   a soft glow reveals + gently pulses/drifts through (slots being booked).
   The glow lives on a masked ::after (cells ∩ a centre fade) animated with
   transform+opacity only, so it stays smooth and never fights the text. ===== */
body.t3-page #problema { position: relative; overflow: hidden; --t3-prob: #534CE2; }
/* "live booking calendar" — recognizable calendars in the SIDE margins (away
   from the text). Day cells pulse like slots being booked + the calendars gently
   float. Hidden when there's no lateral room. */
body.t3-page #problema .t3-prob-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
body.t3-page #problema .t3-cal { position: absolute; top: 50%; width: clamp(232px, 19vw, 324px); }
body.t3-page #problema .t3-cal__svg { display: block; width: 100%; height: auto; }
body.t3-page #problema .t3-cal--l { left: clamp(-96px, -3vw, -48px); transform: translateY(-50%) rotate(-9deg); animation: t3-cal-l 11s ease-in-out infinite alternate; }
body.t3-page #problema .t3-cal--r { right: clamp(-96px, -3vw, -48px); transform: translateY(-50%) rotate(9deg); animation: t3-cal-r 11s ease-in-out infinite alternate; }
@keyframes t3-cal-l { from { transform: translateY(-55%) rotate(-10.5deg); } to { transform: translateY(-45%) rotate(-7deg); } }
@keyframes t3-cal-r { from { transform: translateY(-45%) rotate(7deg); } to { transform: translateY(-55%) rotate(10.5deg); } }
body.t3-page #problema .t3-cal__body { fill: rgba(83, 76, 226, .05); stroke: rgba(83, 76, 226, .45); stroke-width: 1.5; }
body.t3-page #problema .t3-cal__head { fill: rgba(83, 76, 226, .82); }
body.t3-page #problema .t3-cal__ring { fill: rgba(83, 76, 226, .62); }
body.t3-page #problema .t3-cal__cell { fill: rgba(83, 76, 226, .10); stroke: rgba(83, 76, 226, .26); stroke-width: 1; }
body.t3-page #problema .t3-cal__cell--hot { animation: t3-cell-pulse 3.2s ease-in-out infinite; }
@keyframes t3-cell-pulse { 0%, 100% { fill: rgba(83, 76, 226, .16); } 50% { fill: rgba(83, 76, 226, .92); } }
@media (max-width: 1180px) { body.t3-page #problema .t3-prob-fx { display: none; } }
body.t3-page #problema > .shell { position: relative; z-index: 1; }
/* heading + subtitle in the brand purple (more credible than the navy) */
body.t3-page #problema h2 { color: var(--t3-prob) !important; }
body.t3-page #problema .text-ink-soft { color: var(--t3-prob) !important; }
/* tighter head + cards */
body.t3-page #problema .bft-reveal:first-child { margin-bottom: clamp(20px, 3vw, 34px) !important; }
body.t3-page #problema .bft-stagger { gap: 14px !important; }
/* card — white default, purple icon */
body.t3-page #problema article {
	background: #ffffff !important;
	border-color: var(--t3-line) !important;
	box-shadow: var(--t3-shadow-sm);
	transition: transform .22s var(--t3-ease), box-shadow .22s var(--t3-ease), background-color .22s, border-color .22s;
}
body.t3-page #problema article > span:first-child {
	background: rgba(83, 76, 226, .10) !important;
	color: var(--t3-prob) !important;
	transition: background-color .22s, color .22s;
}
/* hover — card fills #534CE2, content turns light (the reference's pattern) */
body.t3-page #problema article:hover {
	background: var(--t3-prob) !important;
	border-color: var(--t3-prob) !important;
	transform: translateY(-4px);
	box-shadow: 0 24px 50px -20px rgba(83, 76, 226, .55);
}
body.t3-page #problema article:hover > span:first-child { background: rgba(255, 255, 255, .18) !important; color: #fff !important; }
body.t3-page #problema article:hover h3,
body.t3-page #problema article:hover .text-ink { color: #fff !important; }
body.t3-page #problema article:hover p,
body.t3-page #problema article:hover .text-ink-muted { color: rgba(255, 255, 255, .86) !important; }

/* ===== Agent IA phone mockup — ported from the login brand panel, shown as a
   self-contained dark animated card (no plugin dependency). ===== */
.t3-aiphone { position: relative; overflow: visible; padding: clamp(30px, 4vw, 54px) clamp(40px, 6vw, 78px); display: flex; align-items: center; justify-content: center; perspective: 1100px; }
/* soft light brand glow behind the phone (no dark box), like the other mocks */
.t3-aiphone::before { content: ""; position: absolute; z-index: 0; pointer-events: none; inset: 6% 10%;
	background: radial-gradient(52% 52% at 50% 46%, rgba(99, 91, 255, .18), transparent 72%);
	filter: blur(34px); animation: t3aip-aurora 17s ease-in-out infinite alternate; }
.t3-aiphone__stage { position: relative; z-index: 2; width: min(100%, 264px); will-change: transform; transition: transform .3s cubic-bezier(.22, .61, .36, 1); }
@keyframes t3aip-aurora { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-4%, 3%, 0) scale(1.1); } }
.t3-aiphone .bft-bp__phone { position: relative !important; inset: auto !important; transform: none !important; z-index: 5 !important; width: 100% !important; overflow: hidden; background: #fff; border-radius: 22px; box-shadow: 0 26px 62px rgba(3, 6, 28, .35), 0 0 0 4px rgba(121, 103, 255, .2), 0 0 46px rgba(89, 111, 255, .22); }
.t3-aiphone .bft-bp__phone-head { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 9px; min-height: 58px; padding: 11px 12px; color: #fff; background: linear-gradient(rgba(255, 255, 255, .1), transparent), linear-gradient(135deg, #4f46e5, #7058ff 58%, #8f6cff); }
.t3-aiphone .bft-bp__ai-avatar { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .96), rgba(255, 255, 255, .25) 45%, transparent 46%), radial-gradient(circle, #a7f3d0, #6b9eff); box-shadow: 0 0 0 3px rgba(255, 255, 255, .28), 0 0 18px rgba(128, 220, 255, .58); }
.t3-aiphone .bft-bp__phone-head-meta strong, .t3-aiphone .bft-bp__phone-head-meta small { display: block; line-height: 1; }
.t3-aiphone .bft-bp__phone-head-meta strong { color: #fff; font-size: 12px; font-weight: 850; }
.t3-aiphone .bft-bp__phone-head-meta small { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; color: rgba(255, 255, 255, .86); font-size: 9px; }
.t3-aiphone .bft-bp__phone-head-meta small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4ade80; }
.t3-aiphone .bft-bp__phone-head-icons { display: flex; gap: 4px; }
.t3-aiphone .bft-bp__phone-head-icons i { width: 19px; height: 19px; display: grid; place-items: center; color: rgba(255, 255, 255, .94); background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .12); border-radius: 6px; }
.t3-aiphone .bft-bp__chat { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 8px; background: linear-gradient(90deg, rgba(99, 102, 241, .035) 1px, transparent 1px) 0 0/28px 28px, linear-gradient(#fbfcff, #fff 76%); }
.t3-aiphone .bft-bp__bubble-user { align-self: flex-end; max-width: 92%; margin: 0; padding: 8px 12px; color: #fff; background: linear-gradient(135deg, #5145e8, #704cff); border-radius: 14px 14px 4px; box-shadow: 0 10px 22px rgba(79, 70, 229, .28); font-size: 11px; font-weight: 800; line-height: 1.25; }
.t3-aiphone .bft-bp__bubble-meta { align-self: flex-end; margin-right: 4px; color: #94a3b8; font-size: 9px; }
.t3-aiphone .bft-bp__revenue-card { overflow: hidden; background: #fff; border: 1px solid rgba(99, 102, 241, .1); border-radius: 12px; box-shadow: 0 12px 26px rgba(15, 23, 42, .075); }
.t3-aiphone .bft-bp__revenue-top { padding: 9px 10px; text-align: center; color: #fff; background: linear-gradient(rgba(255, 255, 255, .08), transparent), linear-gradient(135deg, #5145e8, #724eff); }
.t3-aiphone .bft-bp__revenue-top strong, .t3-aiphone .bft-bp__revenue-top small { display: block; }
.t3-aiphone .bft-bp__revenue-top strong { font-size: 11.5px; font-weight: 850; line-height: 1.15; }
.t3-aiphone .bft-bp__revenue-top small { margin-top: 2px; font-size: 9px; opacity: .88; }
.t3-aiphone .bft-bp__revenue-body { display: grid; grid-template-columns: 1fr 1fr; }
.t3-aiphone .bft-bp__revenue-body > div { padding: 9px 6px; text-align: center; }
.t3-aiphone .bft-bp__revenue-body > div + div { border-left: 1px solid rgba(15, 23, 42, .06); }
.t3-aiphone .bft-bp__revenue-body b, .t3-aiphone .bft-bp__revenue-body small { display: block; }
.t3-aiphone .bft-bp__revenue-body b { color: #5145e8; font-size: 15px; font-weight: 850; line-height: 1; }
.t3-aiphone .bft-bp__revenue-body small { margin-top: 3px; color: #64748b; font-size: 8.5px; line-height: 1.15; }
.t3-aiphone .bft-bp__quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 6px 0 4px; }
.t3-aiphone .bft-bp__q { min-height: 21px; display: grid; place-items: center; padding: 5px 3px; color: #5d687a; background: #f8faff; border: 1px solid #e8edf7; border-radius: 7px; font-size: 8.6px; font-weight: 800; line-height: 1.12; text-align: center; }
.t3-aiphone .bft-bp__q--active { color: #fff; background: linear-gradient(135deg, #5145e8, #704cff); border-color: transparent; box-shadow: 0 6px 14px rgba(81, 69, 232, .28); }
.t3-aiphone .bft-bp__phone-foot { padding: 6px 10px 10px; background: #fff; border-top: 1px solid rgba(15, 23, 42, .06); }
.t3-aiphone .bft-bp__phone-menu { display: flex; align-items: center; gap: 5px; padding: 3px 2px 5px; color: #94a3b8; font-size: 8.8px; font-weight: 700; }
.t3-aiphone .bft-bp__phone-input { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 10px; background: #f5f8fd; border: 1px solid #e3eaf6; border-radius: 999px; }
.t3-aiphone .bft-bp__phone-input span { flex: 1; color: #94a3b8; font-size: 8.8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t3-aiphone .bft-bp__phone-input b { width: 22px; height: 22px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #5145e8, #704cff); border-radius: 50%; }
.t3-aiphone .bft-bp__float, .t3-aiphone .bft-bp__helpdesk { position: absolute !important; z-index: 1 !important; display: inline-flex; align-items: center; border-radius: 8px; -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
.t3-aiphone .bft-bp__float--birthday { z-index: 9 !important; top: 40% !important; bottom: auto !important; left: -120px !important; right: auto !important; max-width: 168px; min-height: 52px; padding: 10px 13px 10px 11px; gap: 11px; color: #fff; background: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)), linear-gradient(135deg, rgba(28, 16, 70, .82), rgba(12, 11, 42, .86)); border: 1px solid rgba(255, 198, 107, .28); box-shadow: 0 22px 46px rgba(3, 6, 28, .42), inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px rgba(255, 255, 255, .12); animation: bft-bp-float-in .8s cubic-bezier(.22, .61, .36, 1) .85s both, bft-bp-bob 5.6s ease-in-out 1.8s infinite; }
.t3-aiphone .bft-bp__float-ico { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 32px; color: #ffd089; background: linear-gradient(135deg, rgba(255, 196, 109, .38), rgba(255, 128, 171, .22)); border: 1px solid rgba(255, 198, 107, .32); border-radius: 10px; box-shadow: inset 0 6px 14px rgba(255, 168, 76, .18), inset 0 1px rgba(255, 255, 255, .14); }
.t3-aiphone .bft-bp__float-text, .t3-aiphone .bft-bp__helpdesk-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.t3-aiphone .bft-bp__float strong, .t3-aiphone .bft-bp__helpdesk strong { display: block; margin: 0; color: #fff; font-size: 12.4px; font-weight: 800; line-height: 1.08; letter-spacing: -.01em; white-space: nowrap; }
.t3-aiphone .bft-bp__float small, .t3-aiphone .bft-bp__helpdesk small { display: inline-flex; align-items: center; gap: 5px; margin: 0; color: rgba(228, 234, 255, .7); font-size: 9.4px; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.t3-aiphone .bft-bp__helpdesk { z-index: 9 !important; top: 22% !important; bottom: auto !important; right: -150px !important; left: auto !important; min-height: 52px; padding: 10px 13px 10px 11px; gap: 11px; max-width: 168px; color: rgba(248, 251, 255, .9); background: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)), linear-gradient(135deg, rgba(45, 36, 142, .78), rgba(26, 22, 70, .82)); border: 1px solid rgba(140, 130, 255, .28); box-shadow: 0 22px 46px rgba(3, 6, 28, .42), inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px rgba(255, 255, 255, .12); animation: bft-bp-float-in .8s cubic-bezier(.22, .61, .36, 1) 1.05s both, bft-bp-bob 5.8s ease-in-out 2s infinite; }
.t3-aiphone .bft-bp__helpdesk-ico { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 32px; color: #fff; background: linear-gradient(135deg, #5b54ff, #876dff 60%, #b196ff); border: 1px solid rgba(177, 150, 255, .42); border-radius: 10px; box-shadow: 0 6px 14px rgba(91, 84, 255, .42), inset 0 1px rgba(255, 255, 255, .22); }
.t3-aiphone .bft-bp__helpdesk-dot { width: 6px; height: 6px; border-radius: 50%; background: #35e8a6; box-shadow: 0 0 0 2px rgba(53, 232, 166, .18), 0 0 8px rgba(53, 232, 166, .58); animation: bft-bp-pulse 2.6s cubic-bezier(.22, .61, .36, 1) infinite; }
@keyframes bft-bp-float-in { 0% { opacity: 0; transform: translateY(16px) scale(.94); filter: blur(5px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes bft-bp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes bft-bp-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(53, 232, 166, .18), 0 0 8px rgba(53, 232, 166, .58); } 50% { box-shadow: 0 0 0 4px rgba(53, 232, 166, .06), 0 0 14px rgba(53, 232, 166, .85); } }

@media (prefers-reduced-motion: reduce) {
	.t3-hero__aurora { animation: none; }
	body.t3-page #problema .t3-cal, body.t3-page #problema .t3-cal__cell--hot { animation: none !important; }
	.t3-page .t3-aiphone::before { animation: none !important; }
	.t3-page * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================================
   HERO DASHBOARD MOCK — the real "Agentech" backend MAIN view (.t3dash)
   A faithful, condensed render of the new admin home: topbar (search + period
   tabs + user), KPI tiles + a highlighted "Próximo atendimento" strip, and the
   day's "Agenda" list. Tokens mirror the backend (primary #534CE2, light
   surfaces). KPI numbers count up; agenda rows stagger in on load. Markup =
   bft_v5_dashboard_mock(). Reusable on profession heroes after approval.
   ========================================================================== */
.t3dash {
	--d-primary: #534CE2; --d-primary-soft: #F2F1FF; --d-primary-line: #DAD8FF; --d-surface: #fff;
	--d-line: #E5E9F2; --d-line-soft: #F0F2F7; --d-text: #101828;
	--d-muted: #667085; --d-muted-soft: #98A2B3;
	--d-success: #16A34A; --d-success-soft: #ECFDF3;
	--d-warning: #D97706; --d-warning-soft: #FFF7ED;
	position: relative; max-width: 560px; margin-inline: auto;
	background: var(--d-surface); color: var(--d-text); text-align: left;
	border: 1px solid rgba(16, 24, 40, .06); border-radius: 18px; overflow: hidden;
	box-shadow: 0 40px 90px -30px rgba(20, 8, 60, .55);
	font-variant-numeric: tabular-nums;
}
/* topbar */
.t3dash__top { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--d-line); }
.t3dash__search { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border: 1px solid var(--d-line); border-radius: 999px; color: var(--d-muted-soft); background: #fff; }
.t3dash__search svg { width: 14px; height: 14px; flex: 0 0 auto; }
.t3dash__search span { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t3dash__ico { position: relative; width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--d-line); border-radius: 10px; color: var(--d-muted); background: #fff; }
.t3dash__ico svg { width: 15px; height: 15px; }
.t3dash__ico i { position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: #EF4444; box-shadow: 0 0 0 2px #fff; }
.t3dash__user { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding-left: 2px; }
.t3dash__av2 { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #6f67ff, #534CE2); }
.t3dash__uname b { display: block; font-size: 12px; font-weight: 800; color: var(--d-text); line-height: 1.15; }
.t3dash__uname span { display: block; font-size: 10.5px; color: var(--d-muted-soft); }
/* period tabs */
.t3dash__tabs { display: flex; gap: 6px; padding: 10px 12px 0; overflow-x: auto; scrollbar-width: none; }
.t3dash__tabs::-webkit-scrollbar { display: none; }
.t3dash__tabs span { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--d-muted); padding: 5px 11px; border-radius: 999px; }
.t3dash__tabs span.is-active { color: #fff; background: var(--d-primary); box-shadow: 0 8px 18px -8px rgba(83, 76, 226, .6); }
/* body */
.t3dash__body { padding: 12px; display: grid; gap: 11px; }
/* kpis */
.t3dash__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.t3dash__kpi { border: 1px solid var(--d-line); border-radius: 13px; padding: 9px 10px; min-width: 0; }
.t3dash__kpi .k-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 7px; }
.t3dash__kpi .lbl { font-size: 8.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--d-muted-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t3dash__kpi .tile { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 7px; display: grid; place-items: center; background: var(--d-primary-soft); color: var(--d-primary); }
.t3dash__kpi .tile svg { width: 13px; height: 13px; }
.t3dash__kpi .num { font-size: 19px; font-weight: 850; letter-spacing: -.02em; line-height: 1; color: var(--d-text); }
.t3dash__kpi .num small { font-size: 10.5px; font-weight: 700; color: var(--d-muted-soft); margin-left: 2px; }
.t3dash__kpi .delta { display: block; margin-top: 5px; font-size: 10px; font-weight: 700; color: var(--d-muted); }
.t3dash__kpi .delta.up { color: var(--d-success); }
/* highlighted "próximo atendimento" strip */
.t3dash__next { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--d-primary-line); border-left: 3px solid var(--d-primary); border-radius: 13px; background: linear-gradient(90deg, var(--d-primary-soft), #fff 75%); }
.t3dash__nbadge { flex: 0 0 auto; text-align: center; padding: 6px 10px; border-radius: 10px; background: var(--d-primary); color: #fff; }
.t3dash__nbadge b { display: block; font-size: 14px; font-weight: 850; line-height: 1; }
.t3dash__nbadge span { display: block; margin-top: 3px; font-size: 8.5px; font-weight: 800; letter-spacing: .03em; opacity: .9; }
.t3dash__nbadge span em { font-style: normal; display: inline-block; animation: t3dash-blink 1.8s ease-in-out infinite; }
@keyframes t3dash-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.t3dash__ninfo { min-width: 0; flex: 1 1 auto; }
.t3dash__ninfo .elbl { font-size: 8.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--d-primary); }
.t3dash__ninfo b { display: block; font-size: 13px; font-weight: 800; color: var(--d-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t3dash__ninfo span { font-size: 10.5px; color: var(--d-muted); }
/* agenda */
.t3dash__agenda { border: 1px solid var(--d-line); border-radius: 14px; overflow: hidden; }
.t3dash__ahead { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--d-line-soft); }
.t3dash__ahead .at { min-width: 0; }
.t3dash__ahead .at b { display: block; font-size: 12.5px; font-weight: 850; color: var(--d-text); }
.t3dash__ahead .at span { display: block; font-size: 10.5px; color: var(--d-muted-soft); }
.t3dash__newbtn { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: #fff; background: var(--d-primary); padding: 6px 11px; border-radius: 999px; box-shadow: 0 10px 22px -12px rgba(83, 76, 226, .7); }
.t3dash__newbtn svg { width: 13px; height: 13px; }
.t3dash__row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; animation: t3dash-rowin .5s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(.25s + var(--i, 0) * .08s); }
.t3dash__row + .t3dash__row { border-top: 1px solid var(--d-line-soft); }
@keyframes t3dash-rowin { from { opacity: 0; transform: translateY(7px); } }
.t3dash__time { flex: 0 0 auto; text-align: left; }
.t3dash__time b { display: block; font-size: 12px; font-weight: 800; color: var(--d-text); line-height: 1.1; }
.t3dash__time span { display: block; font-size: 9.5px; font-weight: 700; color: var(--d-muted-soft); }
.t3dash__av { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #6f67ff, #534CE2); }
.t3dash__who { min-width: 0; }
.t3dash__who b { display: block; font-size: 12.5px; font-weight: 700; color: var(--d-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t3dash__who span { display: block; font-size: 10.5px; color: var(--d-muted-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t3dash__st { flex: 0 0 auto; font-size: 10px; font-weight: 800; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.t3dash__st.ok { color: var(--d-success); background: var(--d-success-soft); }
.t3dash__st.pend { color: var(--d-warning); background: var(--d-warning-soft); }
@media (max-width: 540px) {
	.t3dash__uname { display: none; }
	.t3dash__kpis { grid-template-columns: repeat(2, 1fr); }
}
/* On mobile the "Lembrete enviado" chip sat over the "Próximo atendimento"
   strip — drop it lower so it floats over the agenda instead. (Chips stay
   visible on mobile; the earlier spill was the hero overflow bug, now fixed.) */
@media (max-width: 999px) {
	.t3-hero__mock .bft-float-slow[class*="bottom-[34%]"],
	.t3-hero__mock .bft-chip--reminder { bottom: 14% !important; }
}
@media (prefers-reduced-motion: reduce) {
	.t3dash__row, .t3dash__nbadge span em { animation: none !important; }
}

/* ============================================================================
   SITE SHOWCASE (#site-profissional / .subx) — "Uma página profissional com a
   sua marca". Inserted after #segmentos. Signature gradient band (--t3-hero-grad)
   + soft aurora drift + a DISCREET flow-lines canvas, with a light product mock
   of the subscriber's own branded page on top. Self-contained (.subx-scoped)
   so it never collides; tokens mirror .t3-page. Markup =
   template-parts/sections/home-v5-site-showcase.php (owns the inline JS).
   ========================================================================== */

/* The band owns its own vertical rhythm. The theme's global section padding
   beats `.subx` on specificity, so re-declare the band's OWN padding here
   (zeroing it killed the breathing room the approved prototype has and left
   the mock glued to the band's top edge, clipping the corner chip against the
   section's overflow:hidden). White background so the clip-path triangles
   above/below the band never pick up the alternating lavender
   `section:nth-child(2n)` tint (neighbours render white). */
body.t3-page main.bft-home > section#site-profissional { padding: clamp(64px, 8vw, 118px) 0 !important; background-color: #fff !important; }

.subx {
	--bg: #ffffff;
	--tint: #f6f9fc;
	--ink: #0a2540;
	--ink-2: #3c4a5e;
	--ink-3: #697386;
	--brand: #635bff;
	--brand-700: #4b45d6;
	--brand-alt: #534ce2;
	--brand-soft: #efeefe;
	--cyan: #21d4fd;
	--pink: #ff6ea9;
	--success: #15c47e;
	--line: rgba(10, 37, 64, .10);
	--line-2: rgba(10, 37, 64, .06);
	--radius: 14px;
	--radius-lg: 22px;
	--shadow-sm: 0 1px 2px rgba(10, 37, 64, .06), 0 1px 3px rgba(10, 37, 64, .05);
	--shadow-md: 0 8px 24px -10px rgba(10, 37, 64, .18);
	--shadow-lg: 0 40px 90px -30px rgba(20, 8, 60, .55);
	--hero-bg: #5650e6;
	--hero-grad:
		radial-gradient(42% 60% at 8% 6%, #8f89ff 0%, transparent 60%),
		radial-gradient(46% 62% at 90% 4%, #4b45d6 0%, transparent 60%),
		radial-gradient(52% 66% at 96% 58%, #7a6bff 0%, transparent 62%),
		radial-gradient(56% 72% at 28% 92%, #3a33ad 0%, transparent 64%),
		radial-gradient(34% 46% at 1% 74%, rgba(45, 210, 253, .40) 0%, transparent 56%),
		radial-gradient(72% 82% at 58% 42%, #635bff 0%, transparent 74%);
	--ease: cubic-bezier(.22, .61, .36, 1);
	--shell: 1120px;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(64px, 8vw, 118px);
	color: #fff;
}
.subx *, .subx *::before, .subx *::after { box-sizing: border-box; }
.subx h2, .subx h3, .subx p, .subx ul, .subx li { margin: 0; padding: 0; }
.subx ul { list-style: none; }

/* ---- fundo: banda + linhas + aurora + wash (recortados juntos) ---- */
.subx__bg {
	position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
	clip-path: polygon(0 3.5%, 100% 0, 100% 96.5%, 0 100%);
}
.subx__grad { position: absolute; inset: 0; background-color: var(--hero-bg); background-image: var(--hero-grad); }
.subx__aurora {
	position: absolute; inset: -18% -8% auto auto; width: min(1000px, 90%); height: 720px;
	background:
		radial-gradient(38% 44% at 72% 18%, color-mix(in srgb, var(--cyan) 55%, transparent), transparent 70%),
		radial-gradient(42% 50% at 88% 30%, color-mix(in srgb, var(--brand) 60%, transparent), transparent 72%),
		radial-gradient(40% 46% at 60% 48%, color-mix(in srgb, var(--pink) 42%, transparent), transparent 72%);
	filter: blur(48px) saturate(1.12); opacity: .85;
	animation: subx-aurora 22s var(--ease) infinite alternate; will-change: transform;
}
@keyframes subx-aurora {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	100% { transform: translate3d(-3%, 3%, 0) scale(1.08); }
}
.subx__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.subx__wash { position: absolute; inset: 0; background: linear-gradient(96deg, rgba(7, 16, 48, .46) 0%, rgba(7, 16, 48, .18) 42%, transparent 66%); }

/* ---- shell + grid ---- */
.subx__shell {
	position: relative; z-index: 2; width: 100%; max-width: var(--shell); margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 40px); display: grid; gap: clamp(36px, 5vw, 60px); align-items: center;
}
@media (min-width: 1000px) { .subx__shell { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); } }

/* ---- copy ---- */
.subx__eyebrow { display: inline-block; color: #fff; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
.subx__title { margin-top: 20px; color: #fff; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; max-width: 16ch; text-wrap: balance; }
.subx__title em { font-style: normal; background: linear-gradient(90deg, #fff, #cfe9ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.subx__sub { margin-top: 20px; max-width: 42ch; color: rgba(255, 255, 255, .90); font-size: clamp(15.5px, 1.5vw, 18px); line-height: 1.6; }
.subx__list { margin-top: 26px; display: grid; gap: 14px; }
.subx__list li { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .92); font-size: 15px; line-height: 1.35; }
.subx__n { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: #fff; color: var(--brand-700); font-size: 13px; font-weight: 800; box-shadow: 0 10px 24px -10px rgba(7, 16, 48, .5); }
.subx__cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 13px; }
.subx__btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; line-height: 1; border-radius: 999px; padding: 13px 22px; cursor: pointer; border: 1px solid transparent; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease); }
.subx__btn svg { width: 17px; height: 17px; transition: transform .18s var(--ease); }
/* `.subx` prefix bumps specificity (0,2,0) over t3.css `.t3-page a{color:inherit}`
   (0,1,1) — without it the buttons are anchors and their text herda o branco da
   banda (botão branco → texto invisível). */
.subx .subx__btn--primary { background: #fff; color: var(--brand-700); box-shadow: 0 14px 34px rgba(7, 16, 48, .28); }
.subx .subx__btn--primary:hover { transform: translateY(-1px); box-shadow: 0 18px 40px rgba(7, 16, 48, .34); }
.subx .subx__btn--primary:hover svg { transform: translateX(3px); }
.subx .subx__btn--ghost { background: rgba(255, 255, 255, .10); color: #fff; border-color: rgba(255, 255, 255, .40); }
.subx .subx__btn--ghost:hover { background: rgba(255, 255, 255, .18); }

/* ---- visual: mock + chips ---- */
.subx__visual { position: relative; }
.subx__mock { position: relative; max-width: 560px; margin-inline: auto; background: #fff; color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); animation: subx-bob 8s var(--ease) infinite; will-change: transform; }
@keyframes subx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.subx__bar { display: flex; align-items: center; gap: 7px; padding: 12px 15px; border-bottom: 1px solid var(--line-2); background: var(--tint); }
.subx__bar i { width: 10px; height: 10px; border-radius: 999px; background: #d7dee8; }
.subx__bar i:nth-child(1) { background: #ff6d6d; }
.subx__bar i:nth-child(2) { background: #ffc857; }
.subx__bar i:nth-child(3) { background: #30d093; }
.subx__url { margin-left: 9px; font-size: 12px; color: var(--ink-3); font-weight: 500; }
.subx__page { padding: 18px; }
.subx__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.subx__verified { display: inline-flex; align-items: center; gap: 6px; height: 25px; padding: 0 10px; border-radius: 999px; color: #1379c5; background: #eff9ff; border: 1px solid #c6ebff; font-size: 11px; font-weight: 700; }
.subx__name { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: clamp(23px, 2.6vw, 30px); line-height: 1; letter-spacing: -.03em; font-weight: 800; color: var(--ink); }
.subx__check { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #2ea7ff; color: #fff; font-size: 12px; }
.subx__acts { display: flex; gap: 12px; color: var(--ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.subx__acts span { display: inline-flex; align-items: center; gap: 5px; }
.subx__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.subx__tag { display: inline-flex; align-items: center; min-height: 25px; padding: 0 10px; border-radius: 999px; background: var(--tint); color: var(--ink-2); font-size: 11px; font-weight: 600; border: 1px solid var(--line-2); }
.subx__tag--brand { color: var(--brand-700); background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 18%, transparent); }
.subx__tag--gold { color: #8a5a00; background: #fff4d6; border-color: #ffe6a3; }
.subx__tag svg { width: 12px; height: 12px; margin-right: 4px; }
.subx__grid { display: grid; grid-template-columns: 1.02fr .78fr; gap: 12px; }
.subx__media { position: relative; overflow: hidden; border-radius: var(--radius); min-height: 268px; border: 1px solid var(--line-2); background: radial-gradient(120% 90% at 20% 12%, color-mix(in srgb, var(--brand) 14%, #fff), transparent 55%), radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--cyan) 16%, #fff), transparent 52%), linear-gradient(140deg, #eef1fb, #f6f9fc 60%, #ffffff); }
.subx__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); transform: translateX(-120%); animation: subx-sheen 6s var(--ease) infinite; }
@keyframes subx-sheen { 0%, 45% { transform: translateX(-120%); } 78%, 100% { transform: translateX(120%); } }
.subx__media-cta { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%); z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 13px; border-radius: 999px; background: rgba(255, 255, 255, .76); border: 1px solid rgba(10, 37, 64, .08); color: var(--brand-700); box-shadow: var(--shadow-sm); font-size: 12px; font-weight: 800; white-space: nowrap; }
.subx__servcard { position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 9px; padding: 10px; border-radius: 13px; background: rgba(255, 255, 255, .82); border: 1px solid var(--line-2); box-shadow: var(--shadow-md); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.subx__servav { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--cyan)); }
.subx__servcard > span { min-width: 0; }
.subx__servcard b { display: block; font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subx__servcard small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subx__pill-live { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; color: #0f9d63; background: color-mix(in srgb, var(--success) 12%, #fff); font-size: 10px; font-weight: 800; }
.subx__pill-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: subx-pulse 1.9s var(--ease) infinite; }
@keyframes subx-pulse { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.12); } }
.subx__sched { border-radius: var(--radius); background: #fff; border: 1px solid var(--line); padding: 13px; box-shadow: var(--shadow-sm); }
.subx__sched h3 { font-size: 13px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.subx__sched p { margin-top: 3px; color: var(--ink-3); font-size: 10.5px; line-height: 1.35; }
.subx__week { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 12px; }
.subx__day { border: 0; background: transparent; cursor: pointer; min-height: 40px; border-radius: 10px; color: var(--ink-3); font: inherit; font-size: 8.5px; font-weight: 800; }
.subx__day s { display: block; margin-top: 3px; color: #3f495d; font-size: 14px; text-decoration: none; letter-spacing: -.03em; }
.subx__day--on { background: var(--brand-soft); color: var(--brand-700); }
.subx__day--on s { color: var(--brand-700); }
.subx__slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 11px; }
.subx__slot { min-height: 31px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--tint); color: var(--ink-2); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.subx__slot--on { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--brand-alt), var(--brand)); box-shadow: 0 10px 22px -10px rgba(83, 76, 226, .8); }
.subx__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-2); }
.subx__foot small { color: var(--ink-3); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.subx__foot b { display: block; margin-top: 3px; color: var(--ink); font-size: 11.5px; letter-spacing: -.02em; }
.subx__next { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 15px; border-radius: 10px; color: #fff; font-size: 11.5px; font-weight: 800; background: var(--brand-alt); box-shadow: 0 10px 22px -10px rgba(83, 76, 226, .7); }
.subx__chip { position: absolute; display: flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); border: 1px solid var(--line-2); border-radius: 12px; padding: 9px 12px; box-shadow: var(--shadow-md); font-size: 12.5px; font-weight: 600; animation: subx-bob 6.5s var(--ease) infinite; }
.subx__chip svg { width: 16px; height: 16px; flex: none; }
/* Chips straddle the mock's EDGES over EMPTY zones — the same pattern as the
   hero dashboard chips ("Lembrete enviado"/"Aniversário hoje"): half-in,
   half-out, anchored to a corner/edge, never covering copy.
   wa = pinned on the browser-bar's top-right corner (the bar's right side is
   empty, and it reads as a "no ar" status on the window);
   pay = riding the left edge over the empty media gradient, between the
   "Sua foto principal" pill and the servcard. */
.subx__chip--wa { right: -18px; top: -16px; color: #128c4b; animation-delay: -1.2s; }
.subx__chip--wa strong { color: var(--ink); font-weight: 700; }
.subx__chip--pay { left: -24px; top: 64%; animation-delay: -3.1s; }
.subx__chip--pay svg { color: var(--brand); }

@media (max-width: 999px) {
	.subx__chip--wa { right: 6px; top: -14px; }
	.subx__chip--pay { left: 6px; top: 62%; }
}
@media (max-width: 560px) {
	.subx__grid { grid-template-columns: 1fr; }
	.subx__acts { display: none; }
	.subx__media { min-height: 190px; }
	/* narrow bar is fully taken by the fake URL → move the chip down to the
	   empty zone beside the "Site exclusivo" pill (acts are hidden here) */
	.subx__chip--wa { top: 8%; }
	.subx__chip--pay { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.subx__aurora, .subx__mock, .subx__chip, .subx__media::after, .subx__pill-live i { animation: none !important; }
}

/* belt-and-suspenders: force the copy column white on the band — same pattern as
   #como-funciona (~line 588) and the hero h1 em (~line 414). The t3 base
   `.t3-page h2` (0,1,1) + the V1 bundle's heading rules beat `.subx__title` /
   `.subx__eyebrow` (0,1,0), so the H2 and eyebrow rendered navy over the purple
   band. Scope STRICTLY to `.subx__copy` — the light mock's `h3.subx__name` and
   `.subx__sched h3` must stay navy. */
body.t3-page #site-profissional .subx__copy h2 { color: #fff !important; }
body.t3-page #site-profissional .subx__copy .subx__eyebrow {
	color: #fff !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}
body.t3-page #site-profissional .subx__title { line-height: 1.04; }
/* keep the approved white→ice gradient on the highlighted phrase; without this
   the em loses its clip gradient to the global rules and reads as flat band
   purple (transparent text showing the band through). */
body.t3-page #site-profissional .subx__title em {
	font-style: normal !important;
	background: linear-gradient(90deg, #fff, #cfe9ff) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
}