/* ============================================================
   FLIPPERFLIX — página estilo streaming
   HTML + CSS puro (JS só para a barra do topo e o reveal).
   Fundo preto, acento vermelho. Tipografia: Inter.

   Sumário:
   1. Tokens
   2. Reset e base
   3. Layout (container, section)
   4. Tipografia
   5. Botões, selos e ícones
   6. Barra do topo
   7. Hero
   8. Episódios (as 3 aulas)
   9. Player (lightbox)
  10. O método
  11. Rodapé
  12. Efeitos de entrada
  13. Responsivo
============================================================ */

/* ============================================================
   1. TOKENS
============================================================ */
:root {
	/* fundos */
	--bg: #000000;
	--bg-2: #070707;
	--card: #121212;
	--card-2: #1A1A1A;

	/* linhas */
	--line: rgba(255, 255, 255, .09);
	--line-strong: rgba(255, 255, 255, .22);

	/* texto */
	--white: #FFFFFF;
	--text: #E8E8E8;
	--text-2: #A9A9A9;
	--muted: #757575;

	/* marca */
	--verde: #2FC97B;
	--verde-claro: #3AD687;
	--verde-fundo: #23B26C;
	--verde-texto: #04230F;
	--verde-glow: rgba(58, 214, 135, .5);

	--red: #E50914;
	--red-2: #FF2A36;
	--red-glow: rgba(229, 9, 20, .45);

	/* artes do hero.
	   desk   — 1920x800, preto à esquerda e o Flipper à direita
	   mobile — 864x2436, Flipper no alto e o preto embaixo para o texto */
	--hero-img: url('../img/bg-hero-desk.webp');
	--hero-img-mob: url('../img/bg-hero-mobile.webp');

	/* medidas */
	--container: 1200px;
	--radius: 4px;
	--radius-card: 8px;
	--section-y: 96px;

	--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-logo: "Bebas Neue", "Inter", Impact, sans-serif;
	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* ============================================================
   2. RESET E BASE
============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

html {
	background: var(--bg);
	scroll-behavior: smooth;
	scroll-padding-top: 88px;
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	/* nenhuma palavra sozinha na última linha */
	text-wrap: pretty;
	font-size: 16px;
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: inherit;
	text-decoration: none;
}

ol,
ul {
	list-style: none;
}

/* o sprite não ocupa espaço */
.sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

:focus-visible {
	outline: 2px solid var(--red-2);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ============================================================
   3. LAYOUT
============================================================ */
.container {
	width: min(100% - 48px, var(--container));
	margin-inline: auto;
}

.section {
	padding-block: var(--section-y);
}

/* ============================================================
   4. TIPOGRAFIA
============================================================ */
.h1 {
	font-size: clamp(25px, 2.8vw, 40px);
	line-height: 1.16;
	letter-spacing: -.015em;
	font-weight: 300;
	color: var(--white);
	text-wrap: balance;
	text-shadow: 0 3px 26px rgba(0, 0, 0, .7);
}

.h2 {
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.15;
	letter-spacing: -.02em;
	font-weight: 800;
	color: var(--white);
}

/* ============================================================
   5. BOTÕES, SELOS E ÍCONES
============================================================ */
.ico {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 30px;
	border-radius: var(--radius);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease),
		box-shadow .18s var(--ease);
}

.btn:hover {
	transform: translateY(-1px);
}

/* verde da marca: gradiente de cima para baixo bem curto, só para dar volume,
   com um fio de luz na borda superior. Nada de degradê chamativo. */
.btn--verde {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--verde-claro) 0%, var(--verde) 54%, var(--verde-fundo) 100%);
	color: var(--verde-texto);
	box-shadow:
		0 8px 24px -12px var(--verde-glow),
		inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* lâmina de brilho que cruza o botão ao passar o mouse */
.btn--verde::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, .34) 50%, transparent 66%);
	transform: translateX(-130%);
	transition: transform .6s var(--ease);
	pointer-events: none;
}

.btn--verde:hover {
	filter: brightness(1.07);
	box-shadow:
		0 16px 34px -12px var(--verde-glow),
		inset 0 1px 0 rgba(255, 255, 255, .42);
}

.btn--verde:hover::after {
	transform: translateX(130%);
}

.btn--verde:active {
	filter: brightness(.97);
	box-shadow:
		0 6px 16px -10px var(--verde-glow),
		inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* o texto e o ícone ficam acima da lâmina de brilho */
.btn--verde>* {
	position: relative;
	z-index: 1;
}

.btn--ghost {
	background: rgba(109, 109, 110, .55);
	color: var(--white);
	backdrop-filter: blur(4px);
}

.btn--ghost:hover {
	background: rgba(109, 109, 110, .38);
}

.btn--sm {
	padding: 11px 20px;
	font-size: 14px;
}

/* selo TOP 10, no formato do retângulo vermelho da Netflix */
.top10 {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 3px;
	background: var(--red);
	color: var(--white);
	line-height: 1;
	font-style: normal;
	box-shadow: 0 6px 18px -10px var(--red-glow);
}

.top10 b {
	font-size: 8.5px;
	font-weight: 800;
	letter-spacing: .08em;
	margin-bottom: 1px;
}

.top10 i {
	font-family: var(--font-logo);
	font-style: normal;
	font-size: 19px;
	letter-spacing: .02em;
}

/* etiquetas de ficha: HD, classificação */
.tag {
	display: inline-flex;
	align-items: center;
	padding: 1px 6px;
	border: 1px solid var(--line-strong);
	border-radius: 3px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	color: var(--text-2);
}

/* botão redondo de ação */
.redondo {
	position: relative;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border: 2px solid rgba(255, 255, 255, .45);
	border-radius: 50%;
	background: rgba(30, 30, 30, .55);
	color: var(--white);
	cursor: pointer;
	backdrop-filter: blur(3px);
	transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease),
		transform .18s var(--ease);
}

.redondo:hover {
	border-color: var(--white);
	background: rgba(255, 255, 255, .16);
	transform: translateY(-1px);
}

.redondo .ico {
	width: 21px;
	height: 21px;
}

/* avaliado: fica verde e o polegar ganha corpo */
.redondo.is-ativo {
	border-color: var(--verde);
	background: rgba(47, 201, 123, .16);
	color: var(--verde-claro);
}

.redondo.is-ativo .ico {
	fill: rgba(47, 201, 123, .22);
}

/* dica que sobe no hover, como na Netflix */
.redondo::after {
	content: attr(data-dica);
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	translate: -50% 4px;
	padding: 5px 10px;
	border-radius: 3px;
	background: rgba(20, 20, 20, .96);
	border: 1px solid var(--line);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--white);
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s var(--ease), translate .18s var(--ease);
}

.redondo:hover::after,
.redondo:focus-visible::after {
	opacity: 1;
	translate: -50% 0;
}

/* ============================================================
   6. BARRA DO TOPO
============================================================ */
.topbar {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	padding-block: 16px;
	background: linear-gradient(180deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .45) 55%, transparent 100%);
	transition: background-color .3s var(--ease), padding .3s var(--ease);
}

.topbar.is-fixa {
	background: rgba(0, 0, 0, .94);
	border-bottom: 1px solid var(--line);
	padding-block: 11px;
}

.topbar__inner {
	display: flex;
	align-items: center;
	gap: 28px;
}

.marca {
	font-family: var(--font-logo);
	font-size: 32px;
	font-weight: 400;
	letter-spacing: .012em;
	color: var(--red);
	text-transform: uppercase;
	line-height: 1;
}

.marca span {
	color: var(--white);
}

.marca--sm {
	font-size: 24px;
}

.topbar__nav {
	display: flex;
	gap: 22px;
	margin-right: auto;
	font-size: 14px;
	color: var(--text-2);
}

.topbar__nav a:hover {
	color: var(--white);
}

/* ============================================================
   7. HERO
============================================================ */
.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(560px, 44vw, 820px);
	padding-block: 152px 92px;
	overflow: hidden;
	isolation: isolate;
}

/* Fundo da hero. Por padrão é só um degradê: quem vê o vídeo já tem o
   primeiro quadro dele como poster por cima, e baixar a arte junto seria
   peso à toa. A foto entra só para quem pediu menos movimento — ver o
   bloco de prefers-reduced-motion. */
.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: radial-gradient(120% 90% at 72% 18%, #2A0A0D 0%, #120406 42%, #000 78%);
	background-size: cover;
	background-position: 72% center;
	background-repeat: no-repeat;
}

/* vídeo do hero — mesmo enquadramento da imagem, na camada logo acima dela.
   Vem depois no HTML, então pinta por cima sem precisar de z-index maior.

   A animação de entrada fica no invólucro, não nos vídeos: se estivesse
   neles, o `both` seguraria a opacidade em 1 para sempre e mataria o
   dissolve do loop. */
.hero__filme {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

/* O clipe vem com tarja preta: 91px acima e 93px abaixo de 720, ou seja o
   conteúdo real é 1280x536. Esticando a caixa para 135% da altura e
   centralizando, as duas tarjas caem fora da janela — e o que sobra tem
   exatamente a proporção da arte original (2.39:1). */
.hero__video {
	position: absolute;
	left: 0;
	top: -17.5%;
	width: 100%;
	height: 135%;
	object-fit: cover;
	object-position: 72% center;
	opacity: 0;
	/* dissolve longo de propósito: com o clipe drifando entre o primeiro e o
	   último quadro, uma troca curta vira fantasma duplo; esticada, o olho
	   lê como respiro. Mudar aqui e o CRUZAMENTO do main.js juntos. */
	transition: opacity 1.3s linear;
	pointer-events: none;
}

.hero__video.is-frente {
	opacity: 1;
}

/* véu leve: só garante contraste do texto e derrete a base no preto da página.
   A arte já vem escurecida à esquerda, então aqui a mão é bem mais leve. */
.hero__fade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .38) 30%, transparent 56%),
		linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, transparent 20%, transparent 46%,
			rgba(0, 0, 0, .72) 78%, #000 96%);
}

.hero__inner {
	position: relative;
	max-width: 640px;
	margin-inline: 0;
}

.hero__kicker {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 22px;
}

.hero__alta {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--white);
	letter-spacing: -.01em;
}

/* ficha técnica: ano, etiquetas e as datas */
.hero__ficha {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
	font-size: 13.5px;
	color: var(--text-2);
}

.ficha__ano {
	font-weight: 700;
	color: var(--text);
}

.ficha__txt {
	font-weight: 500;
}

/* linha de reforço, logo abaixo da H1 */
.hero__destaque {
	margin-top: 14px;
	font-size: clamp(16px, 1.5vw, 20px);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -.015em;
	color: var(--white);
	text-shadow: 0 2px 16px rgba(0, 0, 0, .75);
	max-width: 30ch;
}

.hero__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 30px;
}

/* ============================================================
   8. EPISÓDIOS
============================================================ */
.aulas {
	background: var(--bg);
	padding-top: 8px;
}

.secao__topo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 26px;
}

.secao__tag {
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
}

.grade {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.ep {
	position: relative;
	/* espaço à esquerda para o algarismo aparecer por trás do card */
	padding-left: 64px;
	/* flex, e não height:100% na caixa: o <li> é esticado pelo grid, mas essa
	   altura não é definida o bastante para uma porcentagem resolver — os
	   cards saíam com alturas diferentes e os botões desalinhavam. */
	display: flex;
	flex-direction: column;
}

/* número gigante em traçado, atrás do box — a maior parte fica escondida
   pelo card e só as bordas do algarismo vazam pela esquerda e por baixo. */
.ep__num {
	position: absolute;
	left: 0;
	bottom: -18px;
	z-index: 0;
	font-size: clamp(210px, 20.5vw, 320px);
	font-weight: 900;
	line-height: .76;
	letter-spacing: -.06em;
	color: transparent;
	-webkit-text-stroke: 3.5px rgba(255, 255, 255, .32);
	pointer-events: none;
	user-select: none;
}

/* A caixa é o card em si. O <a> cobre só capa e texto, porque o botão de
   compra também é link e link dentro de link é HTML inválido. */
.ep__caixa {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	flex: 1;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	overflow: hidden;
	transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.ep__caixa:hover {
	transform: translateY(-4px);
	border-color: rgba(229, 9, 20, .55);
	box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .95), 0 0 0 1px rgba(229, 9, 20, .12);
}

.ep__link {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Miniatura de cada aula.

   A url() precisa ficar AQUI, e não num --img inline no HTML: URL relativa
   dentro de custom property é resolvida em relação à folha de estilo, não ao
   documento. Declarada inline, 'assets/img/x.webp' virava
   '/assets/css/assets/img/x.webp' e dava 404. */
#aula-1 .ep__thumb {
	--img: url('../img/aula-01.webp');
}

#aula-2 .ep__thumb {
	--img: url('../img/aula-02.webp');
}

#aula-3 .ep__thumb {
	--img: url('../img/aula-03.webp');
}

/* sem arquivo, o degradê abaixo aparece no lugar */
.ep__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background-image: var(--img),
		linear-gradient(140deg, #241014 0%, #140A0C 48%, #0A0A0A 100%);
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--line);
}

.ep__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	border: 2px solid rgba(255, 255, 255, .9);
	color: var(--white);
	backdrop-filter: blur(2px);
	opacity: .85;
	transition: transform .25s var(--ease), background-color .25s var(--ease), opacity .25s var(--ease);
}

.ep__caixa:hover .ep__play {
	opacity: 1;
	transform: scale(1.08);
	background: var(--red);
	border-color: var(--red);
}

/* faixa inferior: duração do replay ou data da próxima aula */
.ep__quando {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 4px 8px;
	border-radius: 3px;
	background: rgba(0, 0, 0, .72);
	border: 1px solid var(--line);
	font-size: 12px;
	font-weight: 600;
	color: var(--text);
}

.ep__quando:empty {
	display: none;
}

/* selo de estado no alto da miniatura — preenchido pelo JS */
.ep__selo {
	position: absolute;
	top: 10px;
	left: 10px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 10px;
	border-radius: 3px;
	background: rgba(0, 0, 0, .74);
	border: 1px solid var(--line-strong);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text);
	backdrop-filter: blur(3px);
}

.ep__selo:empty {
	display: none;
}

/* ao vivo: fundo vermelho e ponto pulsando */
.ep--live .ep__selo {
	background: var(--red);
	border-color: var(--red);
	color: var(--white);
}

.ep--live .ep__selo::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--white);
	animation: pulsa 1.4s ease-in-out infinite;
}

@keyframes pulsa {

	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: .35;
		transform: scale(.7);
	}
}

/* play x sino, conforme a aula já esteja liberada ou não */
.ico--sino {
	display: none;
}

.ep--breve .ico--play {
	display: none;
}

.ep--breve .ico--sino {
	display: block;
}

.ep--live .ep__caixa {
	border-color: rgba(229, 9, 20, .5);
}

.ep--live .ep__play {
	background: var(--red);
	border-color: var(--red);
}

.ep__corpo {
	flex: 1;
	padding: 18px 20px 16px;
}

/* Botão de compra no rodapé de cada card.

   A frase é longa para a largura de um card, e precisa caber em UMA linha.
   Em vez de só encolher a fonte, o espaço vem de três lugares: a seta sai
   (custava ~30px e não faz falta aqui), o respiro lateral encolhe e o texto
   fecha um pouco o entreletras. A fonte só então baixa para 13px. */
.ep__acoes {
	padding: 0 16px 18px;
}

.ep__cta {
	width: 100%;
	padding: 13px 10px;
	font-size: 13px;
	letter-spacing: -.012em;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
}

.ep__titulo {
	text-wrap: balance;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.015em;
	color: var(--white);
}

.ep__desc {
	margin-top: 8px;
	font-size: 14.5px;
	color: var(--text-2);
}

/* aula ainda não liberada: véu por cima e play sem destaque */
.ep--breve .ep__thumb::after,
.ep--bloq .ep__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
}

.ep--breve .ep__play,
.ep--bloq .ep__play {
	background: rgba(0, 0, 0, .7);
	border-color: rgba(255, 255, 255, .55);
	color: var(--text-2);
}

.ep--breve .ep__caixa:hover .ep__play,
.ep--bloq .ep__caixa:hover .ep__play {
	background: rgba(0, 0, 0, .82);
	border-color: rgba(255, 255, 255, .8);
	color: var(--white);
	transform: none;
}

/* aviso curto no rodapé da tela (link copiado) */
.aviso {
	position: fixed;
	left: 50%;
	bottom: 26px;
	z-index: 95;
	translate: -50% 12px;
	padding: 12px 20px;
	border-radius: 4px;
	background: rgba(18, 18, 18, .97);
	border: 1px solid var(--line-strong);
	font-size: 14px;
	font-weight: 600;
	color: var(--white);
	box-shadow: 0 20px 46px -22px #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity .22s var(--ease), translate .22s var(--ease);
}

.aviso.is-visivel {
	opacity: 1;
	translate: -50% 0;
}

/* ============================================================
   9. PLAYER (LIGHTBOX)
============================================================ */
.player[hidden] {
	display: none;
}

.player {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: grid;
	place-items: center;
	padding: 24px;
}

.player__fundo {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .92);
	backdrop-filter: blur(6px);
	animation: surge .2s var(--ease);
}

.player__caixa {
	position: relative;
	width: min(100%, 1080px);
	animation: surge .28s var(--ease);
}

.player__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: 0 40px 90px -40px #000;
}

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

/* CTA fixo abaixo do vídeo — o mesmo nas três aulas */
.player__acoes {
	display: flex;
	justify-content: center;
	margin-top: 18px;
}

.player__cta {
	/* acompanha a largura do vídeo */
	width: 100%;
	padding: 17px 30px;
	font-size: 17px;
	text-align: center;
}

.player__cta .ico {
	width: 18px;
	height: 18px;
	transition: transform .18s var(--ease);
}

.player__cta:hover .ico {
	transform: translateX(3px);
}

.player__x {
	position: absolute;
	top: -48px;
	right: 0;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: var(--white);
	cursor: pointer;
	transition: background-color .18s var(--ease);
}

.player__x:hover {
	background: var(--red);
}

.player__x svg {
	width: 20px;
	height: 20px;
}

@keyframes surge {
	from {
		opacity: 0;
		transform: scale(.985);
	}
}

/* trava o scroll do fundo com o player aberto */
body.trava {
	overflow: hidden;
}

/* ============================================================
   10. O MÉTODO
============================================================ */
.metodo {
	position: relative;
	border-top: 1px solid var(--line);
	overflow: hidden;
}

/* brilho verde discreto atrás do retrato, para a dobra não ficar chapada */
.metodo::before {
	content: "";
	position: absolute;
	left: 8%;
	top: 12%;
	width: 42vw;
	max-width: 620px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(47, 201, 123, .14) 0%, transparent 68%);
	pointer-events: none;
}

.metodo__grade {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
}

.metodo__foto img {
	width: 100%;
	border-radius: var(--radius-card);
	/* o retrato é de estúdio, com fundo claro: sobre a página preta ele vira
	   um bloco luminoso, então o acabamento vem do raio e de uma sombra
	   ampla em vez de borda, que sumiria dentro da foto */
	box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08);
}

.selo-verde {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 11px;
	border-radius: 3px;
	background: rgba(47, 201, 123, .14);
	border: 1px solid rgba(47, 201, 123, .4);
	color: var(--verde-claro);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.selo-verde::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--verde);
}

/* mesmo peso leve da H1 do topo, para as duas dobras conversarem */
.metodo__titulo {
	margin-top: 18px;
	font-size: clamp(25px, 2.8vw, 40px);
	line-height: 1.16;
	letter-spacing: -.015em;
	font-weight: 300;
	color: var(--white);
	text-wrap: balance;
}

.metodo__sub {
	margin-top: 14px;
	font-size: clamp(16px, 1.5vw, 20px);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -.015em;
	color: var(--white);
}

.metodo__desc {
	margin-top: 14px;
	max-width: 56ch;
	font-size: clamp(15px, 1.35vw, 17px);
	line-height: 1.55;
	color: var(--text-2);
}

.metodo__cta {
	margin-top: 28px;
}

.metodo__nota {
	margin-top: 14px;
	font-size: 13px;
	color: var(--muted);
}

/* ============================================================
   11. RODAPÉ
============================================================ */
.rodape {
	border-top: 1px solid var(--line);
	background: var(--bg-2);
	padding-block: 34px;
}

.rodape__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}

.rodape__legal {
	font-size: 13px;
	color: var(--muted);
}

/* ============================================================
   12. EFEITOS DE ENTRADA

   Dois momentos, o mesmo gesto (desfoca → nítido, subindo um pouco):
   a) ao abrir a página, o hero entra escalonado;
   b) ao rolar, cada bloco entra quando encosta na tela.

   Quem pediu menos movimento não vê nada disso — o conteúdo
   simplesmente já está lá, nítido e parado.
============================================================ */
@keyframes entrada-blur {
	from {
		opacity: 0;
		filter: blur(10px);
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		filter: blur(0);
		transform: none;
	}
}

/* a arte de fundo entra mais devagar e mais aberta, para o hero parecer
   que "assenta" em vez de piscar na tela */
@keyframes entrada-fundo {
	from {
		opacity: 0;
		filter: blur(18px);
		transform: scale(1.05);
	}

	to {
		opacity: 1;
		filter: blur(0);
		transform: none;
	}
}

/* Entrada do vídeo: SÓ opacidade, sem blur nem scale.

   O Safari do iOS não compõe camada de vídeo quando um ancestral tem
   `filter` ou `transform`: o elemento fica transparente e some o vídeo E o
   poster junto — no iPhone a dobra aparecia só com o degradê de trás.
   O `entrada-fundo`, que tem blur e scale, fica restrito ao .hero__bg, que
   é um div de degradê e não tem esse problema. */
@keyframes entrada-filme {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.hero__bg {
		animation: entrada-fundo 1.6s var(--ease) both;
	}

	.hero__filme {
		animation: entrada-filme 1.2s var(--ease) both;
	}

	.hero__inner>* {
		animation: entrada-blur .9s var(--ease) both;
	}

	.hero__inner> :nth-child(1) {
		animation-delay: .22s;
	}

	.hero__inner> :nth-child(2) {
		animation-delay: .34s;
	}

	.hero__inner> :nth-child(3) {
		animation-delay: .46s;
	}

	.hero__inner> :nth-child(4) {
		animation-delay: .58s;
	}

	.hero__inner> :nth-child(5) {
		animation-delay: .7s;
	}
}

/* entrada por rolagem — o JS só liga e desliga a classe */
.reveal {
	opacity: 0;
	filter: blur(8px);
	transform: translateY(16px);
	transition: opacity .85s var(--ease), filter .85s var(--ease), transform .85s var(--ease);
}

.reveal.is-visivel {
	opacity: 1;
	filter: blur(0);
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	.hero__bg,
	.hero__filme,
	.hero__inner>* {
		animation: none;
	}

	.hero__filme {
		display: none;
	}

	/* Sem vídeo, a hero volta a ser a arte desenhada — e só aqui ela é baixada. */
	.hero__bg {
		background-image: var(--hero-img),
			radial-gradient(120% 90% at 72% 18%, #2A0A0D 0%, #120406 42%, #000 78%);
		background-position: 72% center;
	}

	.reveal {
		opacity: 1;
		filter: none;
		transform: none;
		transition: none;
	}

	.btn,
	.btn--verde::after,
	.ep__caixa,
	.ep__play,
	.redondo {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
	.hero__bg {
		background-image: var(--hero-img-mob),
			linear-gradient(180deg, #1C0709 0%, #0B0405 34%, #000 72%);
		background-position: top center;
	}
}

/* ============================================================
   13. RESPONSIVO
============================================================ */
@media (max-width: 980px) {
	.grade {
		grid-template-columns: repeat(2, 1fr);
	}

	.ep {
		padding-left: 56px;
	}

	.metodo__grade {
		grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	}

	.ep__num {
		font-size: clamp(180px, 27vw, 280px);
	}
}

@media (max-width: 760px) {
	:root {
		--section-y: 64px;
	}

	.container {
		width: min(100% - 32px, var(--container));
	}

	.topbar__nav {
		display: none;
	}

	.topbar__inner {
		justify-content: space-between;
	}

	/* no mobile a barra não aparece de cara: entra deslizando na rolagem */
	.topbar {
		background: transparent;
		transform: translateY(-100%);
		opacity: 0;
		pointer-events: none;
		transition: transform .32s var(--ease), opacity .32s var(--ease), background-color .32s var(--ease);
	}

	.topbar.is-fixa {
		transform: none;
		opacity: 1;
		pointer-events: auto;
	}

	/* a arte mobile manda no enquadramento: o Flipper ocupa o topo e o texto
	   começa logo abaixo dele. Como essa altura acompanha a LARGURA da tela
	   (a imagem é 864x2436), o respiro do topo é medido em vw. */
	.hero {
		min-height: 0;
		padding-block: clamp(150px, 46vw, 270px) 46px;
		align-items: flex-start;
	}

	/* O clipe é 16:9 deitado e a tela é em pé: esticar ficaria grotesco.
	   Então ele ocupa só a faixa do topo — o mesmo lugar que o Flipper
	   ocupa na arte estática — e derrete no preto logo abaixo. */
	.hero__filme {
		inset: 0 0 auto 0;
		height: 82vw;
	}

	.hero__filme::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, .5) 70%, #000 100%);
	}

	/* O rosto fica a ~63% da largura do quadro. Numa faixa estreita o corte
	   lateral é grande, então empurramos a janela para a direita para trazê-lo
	   perto do centro da tela. */
	.hero__video {
		object-position: 78% center;
	}

	.hero__bg {
		background-image: linear-gradient(180deg, #150607 0%, #090405 30%, #000 62%);
		background-position: top center;
		background-size: cover;
	}

	/* aqui o véu só protege o texto e fecha a base no preto da página */
	.hero__fade {
		background:
			linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, transparent 14%, transparent 22%,
				rgba(0, 0, 0, .55) 36%, rgba(0, 0, 0, .88) 52%, #000 68%);
	}

	.h1 {
		max-width: none;
	}

	.grade {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.metodo__grade {
		grid-template-columns: 1fr;
		gap: 28px;
		justify-items: start;
	}

	.metodo__foto img {
		max-width: 320px;
	}

	.metodo__cta {
		width: 100%;
	}

	/* no mobile o card fica centralizado: o respiro é igual dos dois lados
	   e o algarismo aparece pela esquerda sem empurrar o box. Mais apertado
	   que no desktop para o CTA caber em uma linha. */
	.ep {
		padding-inline: 24px;
	}

	.ep__num {
		font-size: 200px;
		bottom: -12px;
		-webkit-text-stroke-width: 2.5px;
	}

	.hero__acoes .btn {
		flex: 1 1 100%;
	}

	.hero__acoes .redondo {
		width: 44px;
		height: 44px;
	}

	.ep__cta {
		font-size: 12.5px;
	}

	/* aperta os vãos para a fileira de ações caber na primeira tela */
	.hero__acoes {
		margin-top: 22px;
		gap: 12px;
	}

	.hero__ficha {
		margin-top: 13px;
		gap: 8px;
		font-size: 12.5px;
	}


	.player {
		padding: 16px;
	}

	.player__x {
		top: -44px;
		right: -4px;
	}

	.player__acoes {
		margin-top: 14px;
	}

	.player__cta {
		width: 100%;
		padding: 15px 18px;
		font-size: 15px;
		line-height: 1.25;
		white-space: normal;
	}
}

@media (max-width: 420px) {
	.marca {
		font-size: 27px;
	}


	.topbar__cta {
		padding: 10px 14px;
		font-size: 13px;
	}
}

/* Último aperto, só em telas realmente estreitas.
   Fica no fim do arquivo de propósito: telas de 360px também casam com o
   bloco de 760px, e quem vem depois vence. */
@media (max-width: 370px) {
	.ep {
		padding-inline: 20px;
	}

	.ep__cta {
		font-size: 12px;
	}
}