/* =====================================================================
   Super Black Week — style.css (página principal)
   ---------------------------------------------------------------------
   Mobile first. Sem fontes externas: Helvetica/Arial do sistema
   (zero bytes de download, zero FOIT) — é a fonte do layout no Figma.

   TÍTULOS NO MOBILE: o tamanho é dado em vw, não em px. Assim cada
   título ocupa ~95% da largura e mantém o MESMO número de linhas em
   qualquer celular (360, 390, 412, 430…), nunca passando de 3–4.
     .t-xl  → títulos curtos (até ~50 caracteres)
     .t-lg  → títulos médios (50–90)
     .t-md  → títulos longos (90–150)
   A partir de 768px voltam a clamp() com teto no tamanho do Figma.

   ANIMAÇÕES: só transform e opacity (rodam na GPU, sem repintar).
   Tudo desliga com prefers-reduced-motion.
   ===================================================================== */

:root {
	--red: #e90000;
	--red-2: #ff3838;
	--cta: #0cff34;
	--ink: #000;
	--white: #fff;
	--gray-1: #cfcfcf;
	--gray-2: #929292;
	--line: rgba(255, 255, 255, .88);
	--card-bg: rgba(0, 0, 0, .05);
	--radius-card: 21.533px;
	--radius-cta: 8.551px;

	/* 95% da tela no mobile: 2,5% de cada lado */
	--gutter: 2.5vw;
	--maxw: 1520px;

	--font: "Helvetica Neue", Helvetica, Arial, "Nimbus Sans", "Liberation Sans", sans-serif;
	--ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 768px) {
	:root {
		--gutter: 5vw;
	}
}

@media (min-width: 1280px) {
	:root {
		--gutter: max(64px, calc((100vw - var(--maxw)) / 2));
	}
}

/* ---------- Base ---------- */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--ink);
	color: var(--white);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeSpeed;
	overflow-x: hidden;
}

body.no-scroll {
	overflow: hidden;
}

img, svg, video, iframe {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: inherit;
}

b, strong {
	font-weight: 700;
}

p {
	margin: 0;
}

h1, h2, h3 {
	margin: 0;
	font-weight: 400;
}

button {
	font: inherit;
	color: inherit;
}

ul {
	margin: 0;
	padding: 0;
}

.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

:focus-visible {
	outline: 3px solid var(--cta);
	outline-offset: 3px;
}

.red {
	color: var(--red);
}

.u {
	text-decoration: underline;
	text-underline-offset: .12em;
	text-decoration-thickness: from-font;
}

.hl {
	color: var(--accent, var(--red));
	font-weight: 700;
}

.wrap {
	width: 100%;
	padding-inline: var(--gutter);
}

/* ---------- Escala de títulos ---------- */
.t-hero, .t-xl, .t-lg, .t-md, .t-eyebrow {
	letter-spacing: -.02em;
	line-height: 1.04;
	text-wrap: balance;
}

.t-hero {
	font-size: 7.8vw;
}

.t-xl {
	font-size: 7.4vw;
	font-weight: 700;
}

.t-lg {
	font-size: 6.2vw;
	font-weight: 700;
}

.t-md {
	font-size: 5.3vw;
}

.t-eyebrow {
	font-size: 6vw;
	font-weight: 700;
}

@media (min-width: 768px) {
	.t-hero {
		font-size: clamp(36px, 2.95vw, 56px);
	}

	.t-xl {
		font-size: clamp(32px, 2.5vw, 48px);
	}

	.t-lg {
		font-size: clamp(28px, 2.2vw, 40px);
	}

	.t-md {
		font-size: clamp(26px, 2.5vw, 48px);
	}

	.t-eyebrow {
		font-size: clamp(24px, 1.7vw, 32px);
	}
}

/* ---------- Botões ---------- */
.btn {
	--h: 48px;
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: var(--h);
	padding: 12px 28px;
	border: 0;
	border-radius: var(--radius-cta);
	background: var(--cta);
	color: #000;
	font-weight: 700;
	font-size: clamp(17px, 4.8vw, 20px);
	line-height: 1;
	letter-spacing: -.02em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 0 22px rgba(14, 255, 54, .28);
	transition: transform .2s var(--ease);
	-webkit-tap-highlight-color: transparent;
}

.btn:hover {
	transform: translateY(-2px) scale(1.02);
}

.btn:active {
	transform: scale(.98);
}

.btn[disabled] {
	opacity: .75;
	cursor: wait;
	transform: none;
}

/* brilho que atravessa o botão: só transform, a cada ~4 s */
.btn::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 40%;
	z-index: -1;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent);
	transform: translateX(-120%) skewX(-18deg);
	animation: sbw-shine 4.2s ease-in-out 1.5s infinite;
}

.btn svg {
	width: 1.45em;
	height: 1.45em;
	flex: none;
}

@media (min-width: 768px) {
	.btn {
		--h: 64px;
		padding: 20px 40px;
		font-size: clamp(20px, 1.25vw, 24px);
	}
}

/* =====================================================================
   1. HERO
   ===================================================================== */
.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #000;
	padding: 24px var(--gutter) 0;
}

/* SEM mix-blend-mode aqui: o plus-lighter/hard-light do Figma fazia o Chrome
   pintar retângulos pretos atrás da doutora e dos cards (camadas compostas
   por cima de um elemento em blend). Sobre fundo preto, opacidade normal
   dá o mesmo resultado visual. */
.hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
	opacity: .6;
	pointer-events: none;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(70% 90% at 100% 100%, rgba(255, 0, 0, .45), rgba(255, 0, 0, 0) 70%);
	pointer-events: none;
}

.hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 20px;
	justify-items: center;
	max-width: var(--maxw);
	margin: 0 auto;
}

.hero__data {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.hero__logo {
	width: clamp(129px, 34vw, 160px);
	height: auto;
}

.hero__title b:first-child {
	color: var(--red);
}

.hero__alt-text {
	font-size: 18px;
	line-height: 1.3;
	color: #ddd;
	max-width: 46ch;
}

/* --- Doutora + cards em órbita ---
   Os 7 cards ficam SEMPRE por cima da doutora. Cada um ocupa uma das 7
   posições do Figma (data-slot 0–6, sentido horário a partir do topo-
   esquerda); o page.js avança todos uma posição a cada 3 s e a transição
   de transform faz o deslize. As porcentagens do translate são da largura/
   altura do próprio card (23,98% × 20,69% da composição). */
.hero-art {
	position: relative;
	width: min(88%, 520px);
	aspect-ratio: 820 / 756;
	margin-top: 8px;
}

.hero-art>* {
	position: absolute;
}

.hero-art__doc {
	left: 3.29%;
	top: 0;
	width: 96.71%;
	height: 100%;
	z-index: 1;
}

.hero-art__doc img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 50% 100%;
}

.hero-art__card {
	left: 0;
	top: 0;
	width: 23.98%;
	aspect-ratio: 196.65 / 156.45;
	z-index: 2;
	transition: transform 1.2s cubic-bezier(.65, 0, .35, 1);
	animation: sbw-pop .7s var(--ease) both;
	animation-delay: calc(var(--d, 0) * .1s + .15s);
}

.hero-art__card img {
	width: 100%;
	height: 100%;
	animation: sbw-float 5s ease-in-out infinite;
	animation-delay: calc(var(--d, 0) * -.8s);
}

.hero-art__card[data-slot="0"] {
	transform: translate(58.47%, 88.87%);
}

.hero-art__card[data-slot="1"] {
	transform: translate(256.84%, 67.12%);
}

.hero-art__card[data-slot="2"] {
	transform: translate(300.04%, 181.56%);
}

.hero-art__card[data-slot="3"] {
	transform: translate(263.93%, 304.94%);
}

.hero-art__card[data-slot="4"] {
	transform: translate(138.82%, 377.13%);
}

.hero-art__card[data-slot="5"] {
	transform: translate(0%, 327.26%);
}

.hero-art__card[data-slot="6"] {
	transform: translate(0%, 189.2%);
}

.hero.is-paused .hero-art__card img {
	animation-play-state: paused;
}

/* topo-esquerda → topo-direita: passa POR TRÁS da doutora (z-index abaixo
   dela, que é 1) e volta para a frente quando chega */
.hero-art__card.is-behind {
	z-index: 0;
}

@media (min-width: 1024px) {
	.hero {
		padding: 32px var(--gutter);
	}

	.hero__inner {
		grid-template-columns: minmax(0, 1fr) min(46vw, 820px);
		gap: clamp(40px, 6.25vw, 120px);
		align-items: center;
		justify-items: stretch;
	}

	.hero__data {
		align-items: flex-start;
		text-align: left;
		gap: 22px;
	}

	.hero__logo {
		width: clamp(220px, 15.7vw, 302px);
	}

	.hero-art {
		width: 100%;
		margin: -32px 0;
	}

	.hero::before {
		background: radial-gradient(60% 120% at 100% 130%, rgba(255, 0, 0, .6), rgba(255, 0, 0, 0) 70%);
	}
}

/* =====================================================================
   FORMULÁRIO (hero + popup)
   ===================================================================== */
.lead-form {
	width: 100%;
	display: grid;
	gap: 9px;
	text-align: left;
}

.lead-form__row {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.field {
	position: relative;
	min-width: 0;
	flex: 1 1 auto;
}

.field-ddi {
	flex: 0 0 auto;
	width: 129px;
}

.field input,
.field select {
	width: 100%;
	height: 43px;
	padding: 0 20px;
	border: 2px solid transparent;
	border-radius: 8px;
	background: #fff;
	color: #2d2d2d;
	font: 16px/1 var(--font);
	/* 16px evita o zoom automático do iOS */
	outline: none;
	transition: border-color .15s;
}

.field select {
	appearance: none;
	-webkit-appearance: none;
	padding: 0 34px 0 14px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232d2d2d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
}

.field input::placeholder {
	color: rgba(45, 45, 45, .5);
	opacity: 1;
}

.field input:focus, .field select:focus {
	border-color: var(--cta);
}

.field [aria-invalid="true"] {
	border-color: #ff5a5a;
}

.field__error {
	display: block;
	font-size: 12.5px;
	line-height: 1.2;
	color: #ff8a8a;
	padding: 3px 4px 0;
	min-height: 0;
}

.field__error:empty {
	display: none;
}

.form-error[hidden] {
	display: none;
}

.form-error {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	background: rgba(255, 60, 60, .14);
	color: #ffb3b3;
	font-size: 14px;
}

.lead-form .btn {
	width: 100%;
	--h: 40px;
	font-size: clamp(15px, 4.1vw, 17px);
	padding: 10px 16px;
	border-radius: 6.4px;
}

.legal {
	font-size: 9px;
	line-height: 1.25;
	font-style: oblique;
	opacity: .8;
	text-align: center;
}

@media (min-width: 768px) {
	.lead-form {
		gap: 12px;
	}

	.field input, .field select {
		height: 53px;
		padding: 0 25px;
	}

	.field select {
		padding: 0 40px 0 20px;
		background-position: right 18px center;
	}

	.field-ddi {
		width: 196px;
	}

	.lead-form .btn {
		width: 100%;
		--h: 40px;
		font-size: clamp(14px, 4.1vw, 17px);
		padding: 10px 12px;
		border-radius: 6.4px;
		white-space: nowrap;
	}

	.legal {
		font-size: 12px;
		line-height: 1.23;
		text-align: justify;
	}
}

/* =====================================================================
   2. FAIXA DE LOGOS (marquee)
   ===================================================================== */
.logos {
	background: var(--red);
	height: 38px;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.marquee {
	display: flex;
	width: max-content;
	animation: sbw-marquee 36s linear infinite;
}

.marquee__group {
	display: flex;
	align-items: center;
	gap: 30px;
	padding-right: 30px;
	flex: none;
}

.logos img {
	--h: 30;
	--w: 60;
	width: calc(var(--w) * .55px);
	height: calc(var(--h) * .55px);
}

@media (min-width: 768px) {
	.logos {
		height: 90px;
	}

	.marquee__group {
		gap: 70px;
		padding-right: 70px;
	}

	.logos img {
		width: calc(var(--w) * 1px);
		height: calc(var(--h) * 1px);
	}
}

/* =====================================================================
   3. VÍDEO
   ===================================================================== */
.video-sec {
	background: #fff;
	color: #000;
	padding: 48px var(--gutter);
}

.video-sec__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	display: grid;
	gap: 24px;
	text-align: center;
}

.video-sec__text {
	display: grid;
	gap: 14px;
}

.video-sec em {
	font-style: italic;
	font-weight: 700;
	color: var(--red);
}

.video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background: #d9d9d9;
}

.video__btn {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

.video__btn[hidden] {
	display: none;
}

.video__btn img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video__play {
	position: relative;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var(--red);
	display: grid;
	place-items: center;
	box-shadow: 0 10px 30px rgba(233, 0, 0, .45);
	transition: transform .2s var(--ease);
}

.video__play::before {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 2px solid rgba(233, 0, 0, .5);
	animation: sbw-ring 2.2s ease-out infinite;
}

.video__btn:hover .video__play {
	transform: scale(1.08);
}

.video__play svg {
	width: 28px;
	height: 28px;
	margin-left: 4px;
	fill: #fff;
}

.video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (min-width: 1024px) {
	.video-sec {
		padding: 80px var(--gutter);
	}

	.video-sec__inner {
		grid-template-columns: minmax(0, 680fr) minmax(0, 800fr);
		gap: 40px;
		align-items: center;
		text-align: left;
	}

	.video {
		border-radius: 0;
	}
}

/* =====================================================================
   4. O QUE INCLUI
   ===================================================================== */
.includes {
	padding: 48px var(--gutter);
	text-align: center;
}

.includes__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	display: grid;
	gap: 28px;
	justify-items: center;
}

.includes h2 b {
	color: var(--red);
}

.card {
	background: var(--card-bg);
	border: 1.615px solid var(--line);
	border-radius: var(--radius-card);
}

.includes__card {
	width: min(100%, 742px);
	padding: 22px 20px;
	text-align: left;
}

.includes__card ul {
	list-style: none;
	display: grid;
	gap: 6px;
}

.includes__card li {
	position: relative;
	padding-left: 1.1em;
	font-size: clamp(17px, 4.5vw, 32px);
	line-height: 1.45;
}

.includes__card li::before {
	content: "";
	position: absolute;
	left: .15em;
	top: .62em;
	width: .3em;
	height: .3em;
	border-radius: 50%;
	background: currentColor;
}

@media (min-width: 768px) {
	.includes {
		padding: 80px var(--gutter);
	}

	.includes__inner {
		gap: 40px;
	}

	.includes__card {
		padding: 30px 40px;
	}

	.includes__card li {
		font-size: clamp(22px, 1.67vw, 32px);
		line-height: 1.6;
	}
}

/* =====================================================================
   5. CURSOS
   ===================================================================== */
.courses {
	padding: 8px var(--gutter) 48px;
}

.courses__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	display: grid;
	gap: 24px;
}

.courses__title {
	text-align: center;
	margin-bottom: 4px;
}

.course {
	--accent: var(--red);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 24px 14px;
	overflow: hidden;
}

.course__top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	text-align: center;
}

.course__cover {
	width: min(64%, 300px);
	aspect-ratio: 512 / 360;
	object-fit: cover;
}

.course__text {
	display: grid;
	gap: 16px;
	max-width: 34ch;
	font-size: clamp(16px, 4.4vw, 22px);
	line-height: 1.08;
	letter-spacing: -.03em;
}

.course__text .lead {
	font-family: Inter, var(--font);
	font-size: .92em;
}

.course .btn {
	min-width: min(100%, 231px);
}

.course__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
}

.c-formula-t {
	--accent: #e90000;
}

.c-intercept-t {
	--accent: #f5da4e;
}

.c-mini-t {
	--accent: #a6af62;
}

.c-alineadores-t {
	--accent: #148e9d;
}

.c-foca-t {
	--accent: #ae008d;
}

.c-4ac-t {
	--accent: #f28f4a;
}

.c-marpe-t {
	--accent: #ff694f;
}

@media (min-width: 1024px) {
	.courses {
		padding: 20px var(--gutter) 80px;
	}

	.courses__inner {
		gap: 40px;
	}

	.courses__title {
		margin-bottom: 0;
	}

	.course {
		padding: 30px;
		gap: 12px;
	}

	.course__top {
		flex-direction: row;
		text-align: left;
		gap: 15px;
		justify-content: center;
	}

	.course__cover {
		width: clamp(360px, 33.7vw, 512px);
		flex: none;
	}

	.course__text {
		font-size: clamp(18px, 1.15vw, 22px);
		max-width: 490px;
		gap: 25px;
	}

	.course__text.narrow {
		max-width: 360px;
	}

	.course__body {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 34px;
		width: 100%;
	}
}

/* --- Carrossel horizontal (módulos e bônus): scroll-snap nativo ---
   Rola na GPU, funciona com o dedo sem JS; o page.js só liga as setas. */
.strip {
	--card-w: calc((100% - 8px) / 2);
	--gap: 8px;
	position: relative;
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) 34px;
	align-items: center;
	width: 100%;
	max-width: 1174px;
}

.strip__viewport {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	-webkit-mask-image: linear-gradient(90deg, #000 78%, rgba(0, 0, 0, .15));
	mask-image: linear-gradient(90deg, #000 78%, rgba(0, 0, 0, .15));
}

.strip.at-end .strip__viewport {
	-webkit-mask-image: none;
	mask-image: none;
}

.strip__viewport::-webkit-scrollbar {
	display: none;
}

.strip__track {
	list-style: none;
	display: flex;
	gap: var(--gap);
}

.strip__track>li {
	flex: 0 0 var(--card-w);
	scroll-snap-align: start;
}

.strip__track img {
	width: 100%;
	height: auto;
	aspect-ratio: 177 / 248;
	object-fit: cover;
	border-radius: 10px;
}

.strip__btn {
	width: 34px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 0;
	padding: 0;
	background: transparent;
	color: currentColor;
	cursor: pointer;
	transition: opacity .2s, transform .2s;
}

.strip__btn svg {
	width: 14px;
	height: 24px;
}

.strip__btn:hover {
	transform: scale(1.15);
}

.strip__btn[disabled] {
	opacity: .25;
	cursor: default;
	transform: none;
}

@media (min-width: 768px) {
	.strip {
		--card-w: 177px;
		--gap: 10.29px;
		grid-template-columns: 48px minmax(0, 1fr) 48px;
		/* com poucos módulos (--n no HTML) a faixa encolhe e fica centralizada */
		max-width: min(1174px, calc(var(--n, 6) * 177px + (var(--n, 6) - 1) * 10.29px + 97px));
	}

	.strip__btn svg {
		width: 16px;
		height: 27px;
	}
}

/* --- Depoimentos (prints) ---
   Desktop: uma linha cujas larguras são proporcionais ao Figma, então tudo
   encolhe junto e na mesma altura. Mobile: carrossel com o dedo. */
.proofs {
	display: flex;
	gap: 8px;
	width: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 2px;
}

.proofs::-webkit-scrollbar {
	display: none;
}

/* mobile: cada print vira um slide; a largura vem da proporção (--ar),
   então print alto não fica gigante e print largo não estoura a tela */
.proofs {
	--mh: clamp(230px, 78vw, 360px);
	align-items: center;
}

.proofs>*, .proof-col>img {
	flex: 0 0 min(88%, calc(var(--ar) * var(--mh)));
	scroll-snap-align: center;
}

.proofs>*:only-child {
	flex-basis: 100%;
}

.proofs img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	object-fit: cover;
}

.proof-col {
	display: contents;
}

@media (min-width: 768px) {
	.proofs {
		overflow: visible;
		justify-content: center;
		align-items: center;
		gap: 6px;
		max-width: calc(var(--rw) * 1px);
	}

	.proofs>* {
		flex: var(--w) 1 0;
		min-width: 0;
	}

	.proof-col {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.proof-col>img {
		flex: none;
	}

	.proofs img {
		border-radius: 16px;
	}
}

/* --- Botão "Ver los X módulos" + galeria em modal --- */
.modules {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: 100%;
}

.gal-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .2s, color .2s, transform .2s var(--ease);
}

.gal-btn svg {
	width: 16px;
	height: 16px;
}

.gal-btn:hover {
	background: #fff;
	color: #000;
	transform: translateY(-1px);
}

.bonos .gal-btn:hover {
	background: #000;
	color: #fff;
}

.gallery {
	width: min(100% - 16px, 1240px);
	max-width: none;
	max-height: calc(100dvh - 16px);
	margin: auto;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 16px;
	background: #0b0b0b;
	color: #fff;
	overflow: hidden;
	opacity: 0;
	transform: translateY(16px) scale(.98);
	transition: opacity .25s ease, transform .3s var(--ease);
}

.gallery[open] {
	display: flex;
	flex-direction: column;
}

.gallery.is-open {
	opacity: 1;
	transform: none;
}

.gallery::backdrop {
	background: rgba(0, 0, 0, .82);
}

.gallery__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 14px 14px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.gallery__title {
	font-size: clamp(17px, 4.6vw, 24px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
}

.gallery__title small {
	display: block;
	font-size: .62em;
	font-weight: 400;
	color: #aaa;
	letter-spacing: 0;
	margin-top: 2px;
}

.gallery__close {
	flex: none;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.gallery__close:hover {
	background: rgba(255, 255, 255, .16);
}

.gallery__grid {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding: 14px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.gallery__grid li {
	opacity: 0;
	transform: translateY(14px);
	animation: sbw-rise .45s var(--ease) forwards;
	animation-delay: calc(var(--i) * 40ms);
}

.gallery__grid img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	background: #1a1a1a;
}

@media (min-width: 600px) {
	.gallery__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
		padding: 20px;
	}
}

@media (min-width: 900px) {
	.gallery__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.gallery__grid.is-many {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* =====================================================================
   6. BÔNUS
   ===================================================================== */
.bonos {
	background: #fff;
	color: #000;
	padding: 48px var(--gutter);
	text-align: center;
}

.bonos__inner {
	max-width: 1224px;
	margin: 0 auto;
	display: grid;
	gap: 24px;
	justify-items: center;
}

.bonos__sub {
	font-size: clamp(17px, 4.4vw, 24px);
	line-height: 1.12;
	max-width: 62ch;
}

.bonos .strip {
	color: #000;
}

.bonos .strip__track img {
	aspect-ratio: 228 / 272;
	border-radius: 0;
}

.bonos .strip__viewport {
	-webkit-mask-image: linear-gradient(90deg, #000 70%, rgba(0, 0, 0, .1));
	mask-image: linear-gradient(90deg, #000 70%, rgba(0, 0, 0, .1));
}

@media (min-width: 768px) {
	.bonos {
		padding: 80px var(--gutter);
	}

	.bonos__inner {
		gap: 40px;
	}

	.bonos .strip {
		--card-w: 228px;
		--gap: 12.35px;
	}
}

/* =====================================================================
   7. INVESTIMENTO
   ===================================================================== */
.pricing {
	position: relative;
	overflow: hidden;
	padding: 48px var(--gutter);
	background: #000;
}

.pricing__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.pricing__inner {
	position: relative;
	max-width: 848px;
	margin: 0 auto;
	display: grid;
	gap: 40px;
	justify-items: center;
	text-align: center;
}

.pricing__block {
	display: grid;
	gap: 24px;
	width: 100%;
	justify-items: center;
}

.pricing__title {
	color: var(--red);
}

.pricing__sub {
	font-size: clamp(17px, 4.4vw, 24px);
	line-height: 1.1;
}

.pricing__ask {
	font-size: 4.6vw;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.03em;
}

.table {
	width: 100%;
	padding: 18px 14px;
	backdrop-filter: none;
}

.table__list {
	display: grid;
	gap: 12px;
	font-size: clamp(14px, 3.9vw, 22px);
	line-height: 1.1;
	letter-spacing: -.03em;
	text-align: left;
	max-width: 743px;
	margin: 0 auto;
}

.table__row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	align-items: baseline;
}

.table__row dt {
	color: var(--gray-1);
	font-weight: 700;
}

.table__row dd {
	margin: 0;
	color: var(--gray-2);
	white-space: nowrap;
}

.table__total {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
	padding: 13px 18px;
	border-radius: 55px;
	background: #1b1b1b;
}

.table__total dt {
	color: #fff;
	font-weight: 700;
}

.table__total dd {
	margin: 0;
	color: var(--red-2);
}

.pricing__now {
	font-size: 4.6vw;
	line-height: 1.08;
	letter-spacing: -.01em;
}

.pricing__now b {
	color: var(--red);
}

.prices {
	display: grid;
	gap: 17px;
	width: 100%;
	justify-items: center;
}

.price {
	width: min(100%, 383px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 22px 20px;
	border: 1.063px solid rgba(185, 0, 0, .48);
	border-radius: 31.891px;
	background: rgba(0, 0, 0, .25);
}

.price__tag {
	width: min(100%, 284px);
	padding: 12px 10px;
	border-radius: 31.891px;
	background: #191919;
	font-weight: 700;
	font-size: clamp(28px, 8vw, 38px);
	letter-spacing: -.03em;
	line-height: 1.06;
}

.price__value {
	display: grid;
	justify-items: center;
	line-height: 1;
}

.price__amount {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 2px;
	white-space: nowrap;
}

.price__x {
	font-size: clamp(24px, 7vw, 29.8px);
	letter-spacing: -.03em;
}

.price__int {
	font-size: clamp(68px, 19.5vw, 82px);
	font-weight: 700;
	color: var(--red);
	letter-spacing: -.03em;
}

.price__dec {
	font-size: clamp(42px, 12vw, 50px);
	font-weight: 700;
	color: var(--red);
	letter-spacing: -.03em;
}

.price__cur {
	font-size: clamp(30px, 9vw, 38px);
	letter-spacing: -.03em;
	margin-top: -.1em;
}

.price__cash {
	font-size: 21px;
	letter-spacing: -.03em;
	margin-top: 6px;
}

.price .btn {
	width: 100%;
	max-width: 337px;
	padding: 12px 10px;
	white-space: nowrap;
	font-size: clamp(18px, 5vw, 25.5px);
}

.doubt {
	width: min(100%, 605px);
	display: grid;
	gap: 14px;
	justify-items: center;
	padding: 24px 18px;
}

.doubt__title {
	color: var(--red);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 7.6vw;
	letter-spacing: -.03em;
	line-height: 1.02;
}

.doubt p {
	font-size: clamp(17px, 4.6vw, 22px);
	line-height: 1.08;
	max-width: 448px;
	letter-spacing: -.03em;
}

.doubt .btn {
	width: 100%;
	max-width: 518px;
	padding: 12px 16px;
	font-size: clamp(15px, 4.3vw, 24px);
	gap: clamp(12px, 3vw, 29px);
}

@media (min-width: 768px) {
	.pricing {
		padding: 80px var(--gutter);
	}

	.pricing__inner {
		gap: 64px;
	}

	.pricing__block {
		gap: 40px;
	}

	.pricing__ask {
		font-size: 22px;
	}

	.table {
		padding: 30px;
	}

	.table__list {
		gap: 15px;
	}

	.table__total {
		padding: 15px 30px;
		margin-top: 11px;
	}

	.pricing__now {
		font-size: clamp(24px, 1.67vw, 32px);
		max-width: 824px;
	}

	.prices {
		grid-template-columns: repeat(2, 383px);
	}

	.price {
		padding: 20px 22px;
		height: 373px;
		justify-content: center;
	}

	.doubt {
		padding: 30px;
	}

	.doubt__title {
		font-size: 36px;
	}

	.doubt .btn {
		white-space: nowrap;
	}
}

/* --- Investimento v2: tabela com preço por formação + badges nos cards --- */
.pricing__head {
	display: grid;
	gap: 16px;
	width: 100%;
	justify-items: center;
}

.pricing__renew {
	gap: 24px;
}

.offer-table {
	width: 100%;
	padding: 16px 12px;
	display: grid;
	gap: 2px;
	text-align: left;
}

.offer-table__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) repeat(3, 64px);
	gap: 6px;
	align-items: center;
	padding: 7px 0;
	font-size: 14px;
	line-height: 1.15;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.offer-table__name {
	color: var(--gray-1);
	font-weight: 700;
}

.offer-table__num {
	text-align: right;
	white-space: nowrap;
	color: #fff;
	font-weight: 700;
}

.offer-table__num.is-full {
	color: var(--gray-2);
	font-weight: 400;
}

.offer-table__num s {
	text-decoration-color: var(--red);
	text-decoration-thickness: 2px;
}

.offer-table__head {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gray-2);
	padding-bottom: 10px;
	margin-bottom: 4px;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.offer-table__tag {
	display: inline-block;
	padding: 4px 6px;
	border-radius: 999px;
	background: #262626;
	color: #fff;
	letter-spacing: .06em;
}

.offer-table__tag.is-hl {
	background: var(--red);
}

.offer-table__head {
	align-items: end;
}

.offer-table__sub {
	display: block;
	margin-top: 5px;
	font-size: 1.1em;
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--gray-2);
	white-space: nowrap;
}

.usd-note {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

@media (min-width: 768px) {
	.usd-note {
		display: none;
	}
}

.offer-table__total {
	margin-top: 10px;
	padding: 12px 14px;
	border-radius: 20px;
	background: #1b1b1b;
	font-size: 15px;
}

.offer-table__total>span:first-child {
	color: #fff;
	font-weight: 700;
}

.offer-table__total .offer-table__num:not(.is-full) {
	color: var(--red-2);
}

.price__badge {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--cta);
	border: 1.5px solid var(--cta);
	padding: 7px 12px;
	border-radius: 999px;
	white-space: nowrap;
}

.price__was {
	font-size: 16px;
	color: var(--gray-2);
	margin-bottom: -8px;
}

.price__was s {
	text-decoration-color: var(--red);
	text-decoration-thickness: 2px;
}

/* CELULAR: primeiro a frase + cards de preço, depois título, tabela e renovação */
@media (max-width: 767px) {

	/* tabela estreita: valores sem " USD" (aviso no cabeçalho) */
	.offer-table .usd {
		display: none;
	}

	.offer-table__row {
		grid-template-columns: minmax(0, 1fr) repeat(3, 52px);
		gap: 6px;
		font-size: 14.5px;
	}

	.offer-table__head {
		font-size: 8.5px;
		letter-spacing: .04em;
	}

	.offer-table__tag {
		padding: 3px 5px;
		letter-spacing: .02em;
	}

	.offer-table__total {
		margin-inline: -6px;
		padding: 12px 6px;
	}

	.pricing__inner>.pricing__now {
		order: 1;
	}

	.pricing__inner>.prices {
		order: 2;
	}

	.pricing__inner>.pricing__head {
		order: 3;
	}

	.pricing__inner>.offer-table,
	.pricing__inner>.table {
		order: 4;
		margin-top: -16px;
	}

	.pricing__inner>.pricing__renew {
		order: 5;
	}

	.pricing__inner>.doubt {
		order: 6;
	}
}

@media (min-width: 768px) {
	.offer-table {
		padding: 30px 36px;
	}

	.offer-table__row {
		grid-template-columns: minmax(0, 1fr) repeat(3, 96px);
		gap: 8px 16px;
		font-size: clamp(16px, 1.15vw, 20px);
	}

	.offer-table__head {
		font-size: 11px;
	}

	.offer-table__tag {
		padding: 5px 9px;
	}

	.offer-table__total {
		margin-inline: -20px;
		padding: 15px 20px;
		border-radius: 55px;
		font-size: clamp(17px, 1.15vw, 21px);
	}

	.pricing__head+.offer-table,
	.pricing__head+.table {
		margin-top: -24px;
	}

	.price {
		height: auto;
		min-height: 373px;
		padding: 26px 22px 24px;
		gap: 14px;
	}
}

/* =====================================================================
   8. CERTIFICADO
   ===================================================================== */
.cert {
	background: #101010;
	padding: 48px var(--gutter) 40px;
	overflow: hidden;
}

.cert__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	display: grid;
	gap: 28px;
	justify-items: center;
	text-align: center;
}

.cert__text {
	display: grid;
	gap: 18px;
	align-content: center;
}

.cert__title {
	color: var(--red);
	text-transform: uppercase;
}

.cert__text p {
	font-size: clamp(17px, 4.4vw, 24px);
	line-height: 1.06;
	letter-spacing: -.02em;
}

.cert__img {
	width: min(78%, 454px);
	transform: rotate(0deg);
	filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .5));
}

@media (min-width: 1024px) {
	.cert {
		padding: 0 var(--gutter);
	}

	.cert__inner {
		grid-template-columns: minmax(0, 986fr) minmax(0, 454fr);
		gap: 120px;
		align-items: center;
		text-align: left;
		min-height: 531px;
	}

	.cert__text {
		gap: 23px;
	}

	.cert__img {
		width: 100%;
		margin: -31px 0;
	}
}

/* =====================================================================
   9. GARANTIA
   ===================================================================== */
.guarantee {
	padding: 48px var(--gutter);
}

.guarantee__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	display: grid;
	gap: 24px;
	justify-items: center;
	text-align: center;
}

.guarantee__seal {
	width: 160px;
	height: auto;
}

.js .guarantee__seal[data-reveal] {
	transform: rotate(-25deg) scale(.85);
	transition-duration: .9s;
}

.js .guarantee__seal[data-reveal].is-visible {
	transform: none;
}

.guarantee__text {
	display: grid;
	gap: 18px;
	align-content: center;
}

.guarantee__title {
	color: var(--red);
	font-weight: 700;
	font-size: 8vw;
	letter-spacing: -.03em;
	line-height: 1.02;
}

.guarantee__text p {
	font-size: clamp(16px, 4.3vw, 22px);
	line-height: 1.06;
	letter-spacing: -.02em;
}

.guarantee a {
	color: inherit;
	font-weight: 700;
}

@media (min-width: 1024px) {
	.guarantee {
		padding: 80px var(--gutter);
	}

	.guarantee__inner {
		grid-template-columns: 387px minmax(0, 1fr);
		gap: 75px;
		text-align: left;
		justify-items: start;
	}

	.guarantee__seal {
		width: 387px;
	}

	.guarantee__title {
		font-size: 36px;
	}

	.guarantee__text {
		gap: 22px;
	}
}

/* =====================================================================
   10. FAIXA "INSCRIPCIONES ABIERTAS"
   ===================================================================== */
.ticker {
	height: 44px;
	overflow: hidden;
	display: flex;
	align-items: center;
	background: linear-gradient(90deg, #e90000, #8f0000 50%, #e90000);
}

.ticker .marquee {
	animation-duration: 28s;
}

.ticker__item {
	flex: none;
	padding-right: .7em;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ticker__item b {
	font-weight: 700;
}

@media (min-width: 768px) {
	.ticker {
		height: 60px;
	}

	.ticker__item {
		font-size: 20px;
	}
}

/* =====================================================================
   11. FAQ
   ===================================================================== */
.faq {
	padding: 48px var(--gutter);
}

.faq__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	display: grid;
	gap: 28px;
}

.faq__title {
	font-size: 7vw;
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.1;
	text-align: center;
}

.faq__list {
	display: grid;
	gap: 14px;
}

.faq__item {
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	padding-bottom: 14px;
}

.faq__q {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	font-size: clamp(16px, 4.4vw, 22px);
	line-height: 1.12;
	cursor: pointer;
}

.faq__icon {
	flex: none;
	position: relative;
	width: 36px;
	height: 36px;
	border-radius: 4px;
	background: var(--red);
}

.faq__icon::before, .faq__icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 16px;
	height: 2.6px;
	background: #fff;
	border-radius: 2px;
	transform: translate(-50%, -50%);
	transition: transform .3s var(--ease);
}

.faq__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item.is-open .faq__icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.faq__a {
	max-height: 0;
	overflow: hidden;
	transition: max-height .35s var(--ease);
}

.faq__a p {
	padding: 12px 0 0 52px;
	font-size: clamp(15px, 4vw, 18px);
	line-height: 1.4;
	color: #d2d2d2;
}

.faq__a p+p {
	padding-top: 8px;
}

@media (min-width: 900px) {
	.faq {
		padding: 80px var(--gutter);
	}

	.faq__inner {
		gap: 44px;
	}

	.faq__title {
		font-size: 36px;
		text-align: left;
	}

	.faq__list {
		grid-template-columns: 1fr 1fr;
		column-gap: 80px;
		row-gap: 24px;
		align-items: start;
	}

	.faq__icon {
		width: 44px;
		height: 44px;
	}

	.faq__icon::before, .faq__icon::after {
		width: 20px;
		height: 3px;
	}

	.faq__a p {
		padding-left: 60px;
	}
}

/* =====================================================================
   12. RODAPÉ
   ===================================================================== */
.site-footer {
	background: #303030;
	padding: 26px var(--gutter);
	font-size: 13px;
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}

.site-footer__brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.site-footer__brand img {
	width: 108px;
	height: auto;
}

.site-footer__brand .sep {
	width: 1px;
	height: 18px;
	background: rgba(255, 255, 255, .6);
}

.site-footer__brand span {
	font-size: 12px;
	line-height: 1.1;
	max-width: 120px;
	text-align: left;
}

.site-footer__osf {
	width: 80px;
	height: auto;
}

.site-footer nav {
	font-style: italic;
}

.site-footer nav a {
	text-decoration: none;
}

.site-footer nav a:hover {
	text-decoration: underline;
}

@media (min-width: 900px) {
	.site-footer {
		padding: 37px var(--gutter);
	}

	.site-footer__inner {
		flex-direction: row;
		justify-content: center;
		gap: 26px;
	}

	.site-footer__brand img {
		width: 128px;
	}

	.site-footer__osf {
		width: 98px;
	}
}

/* =====================================================================
   POPUP DO FORMULÁRIO
   ===================================================================== */
.popup {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: 16px;
	background: rgba(20, 20, 20, .72);
	opacity: 0;
	transition: opacity .25s ease;
}

.popup[hidden] {
	display: none;
}

.popup.is-open {
	opacity: 1;
}

.popup__dialog {
	position: relative;
	width: min(100%, 572px);
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	padding: 24px 20px;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 14px;
	background: rgba(0, 0, 0, .86);
	box-shadow: 0 10px 30px rgba(255, 0, 0, .35);
	transform: translateY(18px) scale(.97);
	transition: transform .3s var(--ease);
}

.popup.is-open .popup__dialog {
	transform: none;
}

.popup__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.popup__close:hover {
	background: rgba(255, 255, 255, .08);
}

.popup__body {
	display: grid;
	gap: 20px;
	text-align: center;
}

.popup__title {
	font-size: 28px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -.03em;
	line-height: 1;
	padding: 0 24px;
}

.popup__text {
	font-size: 18px;
	line-height: 1.1;
	color: #ddd;
}

.popup .lead-form .btn {
	--h: 64px;
	border-radius: 10px;
	font-size: 16px;
}

.popup .field input, .popup .field select {
	height: 53px;
}

.popup .field input {
	padding: 0 12px;
}

.popup .field-ddi {
	width: 96px;
}

.popup .field-ddi select {
	padding: 0 26px 0 10px;
	background-position: right 10px center;
}

.popup .legal {
	text-align: center;
}

@media (min-width: 600px) {
	.popup__body {
		text-align: left;
	}

	.popup__title {
		padding: 0 32px 0 0;
	}

	.popup__text {
		line-height: 1.2;
	}

	.popup .field input {
		padding: 0 25px;
	}

	.popup .field-ddi {
		width: 180px;
	}

	.popup .field-ddi select {
		padding: 0 40px 0 20px;
		background-position: right 18px center;
	}
}

/* =====================================================================
   CARREGAMENTO DIFERIDO E REVELAÇÃO (classes do script.js)
   ===================================================================== */
.is-deferred {
	content-visibility: auto;
	contain-intrinsic-size: auto 900px;
}

.will-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.will-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

.js [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.js [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

.js [data-reveal="zoom"] {
	transform: scale(.94);
}

/* =====================================================================
   KEYFRAMES
   ===================================================================== */
@keyframes sbw-float {
	0%, 100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-9px);
	}
}

/* usa a propriedade "scale" (não transform) para não brigar com o translate da órbita */
@keyframes sbw-pop {
	from {
		opacity: 0;
		scale: .8;
	}

	to {
		opacity: 1;
		scale: 1;
	}
}

@keyframes sbw-rise {
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes sbw-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@keyframes sbw-shine {
	0% {
		transform: translateX(-120%) skewX(-18deg);
	}

	45%, 100% {
		transform: translateX(340%) skewX(-18deg);
	}
}

@keyframes sbw-ring {
	from {
		transform: scale(.9);
		opacity: 1;
	}

	to {
		transform: scale(1.35);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.marquee {
		animation: none !important;
	}

	.will-reveal, [data-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* BARRA FIXA DE CTA — só no celular */
.mbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px max(12px, 2.5vw) calc(10px + env(safe-area-inset-bottom, 0px));
	background: rgba(10, 10, 10, .94);
	border-top: 1px solid rgba(255, 255, 255, .1);
	box-shadow: 0 -8px 24px rgba(0, 0, 0, .45);
	transform: translateY(110%);
	transition: transform .35s var(--ease);
}

.mbar.is-on {
	transform: none;
}

.mbar__text {
	display: grid;
	line-height: 1.15;
	min-width: 0;
}

.mbar__text b {
	font-size: 15px;
	color: #fff;
}

.mbar__text span {
	font-size: 12.5px;
	color: var(--gray-1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mbar .mbar__btn {
	flex: none;
	--h: 44px;
	padding: 10px 16px;
	font-size: 15px;
	border-radius: 8px;
}

body.no-scroll .mbar {
	transform: translateY(110%);
}

@media (min-width: 768px) {
	.mbar {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mbar {
		transition: none;
	}
}

/* =====================================================================
   NOVEDAD (Ra.IA) — dentro da seção de bônus
   ===================================================================== */
.novedad {
	max-width: 1520px;
	margin: 48px auto 0;
	display: grid;
	gap: 24px;
	justify-items: center;
}

.novedad__art {
	width: 100%;
	max-width: 981px;
	height: auto;
}

.novedad__txt {
	display: grid;
	gap: 20px;
	justify-items: center;
	max-width: 512px;
}

.novedad__tag {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--red);
	font-weight: 700;
	font-size: clamp(30px, 8vw, 48px);
	line-height: 1.06;
	letter-spacing: -.01em;
}

.novedad__tag svg {
	width: 19px;
	height: 19px;
	flex: none;
}

.novedad__text {
	font-size: clamp(18px, 4.6vw, 22px);
	line-height: 1.12;
}

.novedad__pill {
	display: inline-flex;
	gap: 32px;
	align-items: center;
	padding: 12px 17px;
	border: 1px solid #000;
	border-radius: 999px;
	font-size: 11.5px;
	line-height: 1.5;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.novedad__pill b {
	color: var(--red);
}

/* celular: texto primeiro, imagem embaixo (igual ao Figma) */
@media (max-width: 899px) {
	.novedad__txt {
		order: -1;
	}
}

@media (min-width: 900px) {
	.novedad {
		margin-top: 100px;
		grid-template-columns: minmax(0, 981fr) minmax(0, 499fr);
		gap: 40px;
		align-items: center;
		text-align: left;
	}

	.novedad__txt {
		justify-items: start;
		gap: 0;
	}

	.novedad__text {
		margin-top: 32px;
	}

	.novedad__pill {
		margin-top: 36px;
	}
}

/* Investimento: linha embaixo de "ALUMNO" e frase antes dos cards */
.price__who {
	font-size: 15px;
	line-height: 1.2;
	color: var(--gray-1);
	margin-top: -8px;
	max-width: 284px;
}

.pricing__now-m {
	display: none;
}

@media (max-width: 767px) {
	.pricing__now-d {
		display: none;
	}

	.pricing__now-m {
		display: inline;
	}
}

/* =====================================================================
   7b. DEPOIMENTOS — "Conoce a quienes ya dijeron SÍ al acceso vitalicio"
   ===================================================================== */
.depo {
	background: #fff;
	color: #000;
	padding: 40px var(--gutter);
}

.depo__inner {
	max-width: 1520px;
	margin: 0 auto;
	display: grid;
	gap: 20px;
}

.depo__title {
	color: var(--red);
	text-align: center;
	letter-spacing: -.03em;
	line-height: 1.02;
}

.depo img {
	display: block;
	width: 100%;
	height: auto;
}

/* desktop: mosaico */
.depo__grid {
	display: none;
}

.depo__logo {
	display: grid;
	place-items: center;
	aspect-ratio: 289 / 183;
	background: #000;
}

.depo__logo img {
	width: 82%;
}

.depo__cover {
	background: #000;
}

/* celular/tablet: carrossel */
.depo__slider {
	width: min(100%, 372px);
	margin: 0 auto;
	display: grid;
	gap: 20px;
}

.depo__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: flex-start;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.depo__track::-webkit-scrollbar {
	display: none;
}

.depo__track li {
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.depo__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.depo__dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #d9d9d9;
	cursor: pointer;
	transition: background .2s, transform .2s;
}

.depo__dots button.is-on {
	background: #7a7a7a;
	transform: scale(1.15);
}

/* área de toque maior sem mudar o desenho */
.depo__dots button {
	position: relative;
}

.depo__dots button::after {
	content: "";
	position: absolute;
	inset: -8px -4px;
}

@media (min-width: 768px) {
	.depo {
		padding: 80px var(--gutter);
	}

	.depo__inner {
		gap: 48px;
	}
}

@media (min-width: 1024px) {
	.depo__inner {
		gap: 80px;
	}

	.depo__slider {
		display: none;
	}

	.depo__grid {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: clamp(12px, 1.22vw, 18.6px);
		align-items: start;
	}

	.depo__col {
		display: grid;
		gap: clamp(12px, 1.22vw, 18.6px);
	}
}

.bonos {
	padding-bottom: 0;
}

.novedad__art {
	display: block;
	margin-bottom: -22px;
}

/* subir botão flutuante do chat */
:root {
	--lv-fab-bottom: 70px
}

/* "Lote LIVE" riscado + "Lote especial" antes do botão dos cards de preço */
.price__lote {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: -4px 0 -6px;
}

.lote {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 7px;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: -.01em;
	white-space: nowrap;
}

.lote--old {
	background: var(--red);
	color: #fff;
	opacity: .85;
	text-decoration: line-through;
	text-decoration-color: #fff;
	text-decoration-thickness: 2px;
}

.lote--new {
	background: #fff;
	color: #000;
}

@media (min-width: 768px) {
	.lote {
		font-size: 16px;
	}
}