/* =============================================================================
   LP Footure Insights V2 — Assinatura
   Mobile-first. Escopo em .lp-footure-insights-v2, independente da v1
   (.lp-footure-insights, em lps/footure-insights/) — as duas nunca carregam
   juntas, mas cada uma se vira sozinha (ver README.md do plugin).

   Mesma identidade editorial preto-e-branco da v1: Bebas Neue nos títulos,
   Lexend no corpo, um único verde de sinalização (--fi2-signal).
   ========================================================================== */

:root {
	--fi2-black: #0a0a0a;
	--fi2-ink: #111312;
	--fi2-card: #141716;
	--fi2-card-line: #1d211f;
	--fi2-offwhite: #eceff0;
	--fi2-muted: #9aa0a1;        /* texto secundário sobre fundo escuro — 7.5:1 */
	--fi2-muted-ink: #4a4e50;    /* texto secundário sobre fundo claro — 7.3:1 */
	--fi2-line: rgba(236, 239, 240, .14);
	--fi2-line-ink: rgba(17, 19, 18, .14);
	--fi2-signal: #4ade80;
	--fi2-signal-ink: #1f7a44;   /* verde escurecido: 4.6:1 sobre --fi2-offwhite */
	--fi2-gold: #f2c94c;         /* selo "recomendado" do plano anual */

	--fi2-font-head: "Bebas Neue", "Arial Narrow", sans-serif;
	--fi2-font-body: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;

	--fi2-container: 1180px;
	--fi2-radius: 14px;
	--fi2-radius-lg: 24px;
	--fi2-radius-pill: 100px;
	--fi2-header-h: 72px;
	--fi2-section-y: clamp(64px, 9vw, 120px);
	--fi2-sticky-espaco: 0px;
}

/* ------------------------------------------------------------------ Base */
.lp-footure-insights-v2 {
	margin: 0;
	background-color: var(--fi2-black);
	color: var(--fi2-muted);
	font-family: var(--fi2-font-body);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	/*
	   "hidden" primeiro, como fallback: em qualquer eixo, "overflow" diferente
	   de visible faz o navegador computar o OUTRO eixo como auto — inclusive
	   quando só overflow-x é declarado. Isso transforma este wrapper num
	   contêiner de rolagem próprio, e o header com position:sticky passa a
	   ficar preso a ELE (que rola junto com a página, então nunca "gruda" de
	   verdade) em vez de ficar preso à viewport. "clip" não cria contêiner de
	   rolagem, então não sofre esse acoplamento — mas é mais recente, por
	   isso a declaração anterior fica como fallback para navegadores sem
	   suporte (valor não reconhecido é ignorado, não substitui o anterior).
	*/
	overflow-x: hidden;
	overflow-x: clip;
}

.lp-footure-insights-v2 *,
.lp-footure-insights-v2 *::before,
.lp-footure-insights-v2 *::after {
	box-sizing: border-box;
}

/*
   Seletor de html/body sem escopo, mas seguro: esta folha só é enfileirada no
   page template desta LP (ver inc/assets.php), então nunca carrega em outra
   página do site.
*/
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--fi2-header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

.lp-footure-insights-v2 img,
.lp-footure-insights-v2 picture {
	display: block;
	max-width: 100%;
}

.lp-footure-insights-v2 p {
	margin: 0 0 1em;
}

.lp-footure-insights-v2 ul,
.lp-footure-insights-v2 ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-footure-insights-v2 h1,
.lp-footure-insights-v2 h2,
.lp-footure-insights-v2 h3 {
	margin: 0 0 .4em;
	color: var(--fi2-offwhite);
	font-family: var(--fi2-font-head);
	font-weight: 400;
	line-height: .96;
	letter-spacing: .01em;
	text-transform: uppercase;
}

.lp-footure-insights-v2 button {
	font: inherit;
	color: inherit;
}

.lp-footure-insights-v2 :focus-visible {
	outline: 3px solid var(--fi2-offwhite);
	outline-offset: 3px;
	border-radius: 4px;
}

.lp-footure-insights-v2 .fi2-skip {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 400;
	padding: 12px 18px;
	background: var(--fi2-offwhite);
	color: var(--fi2-black);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--fi2-radius);
	transition: top .18s ease;
}

.lp-footure-insights-v2 .fi2-skip:focus {
	top: 12px;
}

/* -------------------------------------------------------- Blindagem de link */
.lp-footure-insights-v2 a,
.lp-footure-insights-v2 a:link,
.lp-footure-insights-v2 a:visited {
	color: var(--fi2-offwhite);
	text-decoration: none;
	background: transparent;
	border-bottom: 0;
	font-weight: inherit;
	box-shadow: none;
	outline: 0;
	transition: color .2s ease;
}

.lp-footure-insights-v2 a:hover,
.lp-footure-insights-v2 a:focus {
	color: #fff;
}

.lp-footure-insights-v2 a:focus-visible {
	outline: 2px solid var(--fi2-offwhite);
	outline-offset: 2px;
}

.lp-footure-insights-v2 a[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: .55;
}

/* ------------------------------------------------------------ Layout base */
.lp-footure-insights-v2 .fi2-container {
	width: 100%;
	max-width: var(--fi2-container);
	margin: 0 auto;
	padding: 0 20px;
}

.lp-footure-insights-v2 .fi2-container--estreito {
	max-width: 860px;
}

@media (min-width: 768px) {
	.lp-footure-insights-v2 .fi2-container {
		padding: 0 32px;
	}
}

.lp-footure-insights-v2 .fi2-secao {
	padding: var(--fi2-section-y) 0;
}

.lp-footure-insights-v2 .fi2-secao__head {
	max-width: 760px;
	margin: 0 0 40px;
}

.lp-footure-insights-v2 .fi2-secao__head--centro {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.lp-footure-insights-v2 .fi2-kicker {
	margin: 0 0 14px;
	color: var(--fi2-signal);
	font-family: var(--fi2-font-body);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.lp-footure-insights-v2 .fi2-kicker--centro {
	text-align: center;
}

.lp-footure-insights-v2 .fi2-titulo {
	font-size: clamp(2rem, 4.4vw, 3rem);
}

.lp-footure-insights-v2 .fi2-titulo--centro {
	text-align: center;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.lp-footure-insights-v2 .fi2-lead {
	max-width: 620px;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.lp-footure-insights-v2 .fi2-lead--centro {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.lp-footure-insights-v2 .fi2-muted {
	color: var(--fi2-muted);
}

.lp-footure-insights-v2 .fi2-prosa {
	max-width: 680px;
	margin-bottom: 8px;
}

.lp-footure-insights-v2 .fi2-prosa p:last-child {
	margin-bottom: 0;
}

.lp-footure-insights-v2 .fi2-frase-forte {
	max-width: 920px;
	margin: 0 0 44px;
	font-family: var(--fi2-font-head);
	font-size: clamp(1.5rem, 3.4vw, 2.25rem);
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--fi2-offwhite);
}

.lp-footure-insights-v2 .fi2-citacao {
	margin: 28px 0 0;
	padding: 4px 0 4px 22px;
	border-left: 2px solid var(--fi2-signal);
	max-width: 640px;
}

.lp-footure-insights-v2 .fi2-citacao p {
	margin: 0;
	color: var(--fi2-offwhite);
	font-family: var(--fi2-font-head);
	font-size: clamp(1.375rem, 2.6vw, 1.75rem);
	line-height: 1.25;
	text-transform: uppercase;
}

/* ----------------------------------------------------- Animações de entrada */
.no-js .lp-footure-insights-v2 .fi2-reveal {
	opacity: 1;
}

.lp-anima .fi2-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}

.lp-anima .fi2-reveal.is-visivel {
	opacity: 1;
	transform: translateY(0);
}

@keyframes fi2-girar {
	to { transform: rotate(360deg); }
}

.lp-footure-insights-v2 .fi2-star {
	color: var(--fi2-offwhite);
}

.lp-anima .fi2-star--rotativa {
	animation: fi2-girar 90s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.lp-anima .fi2-star--rotativa {
		animation: none;
	}
}

/* ============================================================= COMPONENTES */

/* Botões: um único estilo, três variantes. */
.lp-footure-insights-v2 .fi2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 30px;
	border: 1px solid transparent;
	border-radius: var(--fi2-radius-pill);
	font-family: var(--fi2-font-body);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}

/*
   A "blindagem de link" lá em cima (.lp-footure-insights-v2 a:link,
   a:visited) soma um pseudo-classe + o elemento "a" à especificidade dela —
   (0,2,1) —, que empata e VENCE o (0,2,0) de .fi2-btn na guerra de
   especificidade, porque no empate quem tem mais seletores de tipo (o "a")
   ganha o desempate. Resultado prático: todo <a class="fi2-btn"> renderizava
   com o font-weight:300 herdado do corpo do texto, enquanto os <button
   class="fi2-btn"> (não afetados pela blindagem, que só mira em "a") saíam
   corretamente em 600 — os dois deveriam ser idênticos. Esta regra bate de
   frente com a blindagem na mesma especificidade e vence por estar depois no
   arquivo.
*/
.lp-footure-insights-v2 a.fi2-btn:link,
.lp-footure-insights-v2 a.fi2-btn:visited {
	font-weight: 600;
}

.lp-footure-insights-v2 .fi2-btn--primary,
.lp-footure-insights-v2 .fi2-btn--primary:link,
.lp-footure-insights-v2 .fi2-btn--primary:visited {
	background: var(--fi2-offwhite);
	color: var(--fi2-black);
}

.lp-footure-insights-v2 .fi2-btn--primary:hover,
.lp-footure-insights-v2 .fi2-btn--primary:focus-visible {
	color: var(--fi2-black);
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(236, 239, 240, .22);
}

.lp-footure-insights-v2 .fi2-btn--primary[aria-disabled="true"]:hover {
	transform: none;
	box-shadow: none;
}

/* Contorno via box-shadow inset (mesma razão da v1): border de 1px sobre
   border-radius pílula soma no box-sizing e fecha o arco em pixel
   fracionado — box-shadow inset não participa dessa conta. */
.lp-footure-insights-v2 .fi2-btn--ghost,
.lp-footure-insights-v2 .fi2-btn--ghost:link,
.lp-footure-insights-v2 .fi2-btn--ghost:visited {
	background: transparent;
	color: var(--fi2-offwhite);
	box-shadow: inset 0 0 0 1px var(--fi2-line);
}

.lp-footure-insights-v2 .fi2-btn--ghost:hover,
.lp-footure-insights-v2 .fi2-btn--ghost:focus-visible {
	color: #fff;
	box-shadow: inset 0 0 0 1px var(--fi2-offwhite);
	transform: translateY(-2px);
}

.lp-footure-insights-v2 .fi2-btn--sm {
	padding: 11px 22px;
	font-size: .8125rem;
}

.lp-footure-insights-v2 .fi2-btn--lg {
	padding: 18px 34px;
	font-size: 1rem;
}

.lp-footure-insights-v2 .fi2-btn:focus-visible {
	border-radius: var(--fi2-radius-pill);
}

/* Placeholder de imagem ausente, impresso por footure_lp_img()/picture(). */
.lp-footure-insights-v2 .lp-img-falta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	padding: 20px;
	background: var(--fi2-card);
	border: 1px dashed var(--fi2-line);
	border-radius: var(--fi2-radius-lg);
	color: var(--fi2-muted);
	font-size: .8125rem;
	text-align: center;
}

/* Selo de dado pendente de validação (link de checkout / URL de login). */
.lp-footure-insights-v2 .lp-validar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 8px 14px;
	background: rgba(74, 222, 128, .08);
	border: 1px dashed var(--fi2-signal);
	border-radius: 10px;
	color: var(--fi2-signal);
	font-size: .75rem;
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
}

.lp-footure-insights-v2 .lp-validar__ico {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
}

/* Selo genérico ("Case 001 · Biblioteca", posters). */
.lp-footure-insights-v2 .fi2-selo {
	display: inline-block;
	margin: 0 0 12px;
	padding: 6px 14px;
	border-radius: var(--fi2-radius-pill);
	box-shadow: inset 0 0 0 1px var(--fi2-line);
	color: var(--fi2-muted);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Selo/pôster: moldura com a proporção real da capa (1785:2523), para o
   navegador nunca cortar nem esticar o layout do case. */
.lp-footure-insights-v2 .fi2-poster {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1785 / 2523;
	overflow: hidden;
	border-radius: var(--fi2-radius-lg);
	border: 1px solid var(--fi2-card-line);
	background: var(--fi2-card);
	box-shadow: 0 24px 48px rgba(0, 0, 0, .4);
}

.lp-footure-insights-v2 .fi2-poster__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lp-footure-insights-v2 .fi2-poster--vazio {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--fi2-muted);
	box-shadow: none;
	border-style: dashed;
}

.lp-footure-insights-v2 .fi2-poster--vazio .lp-icon {
	width: 30px;
	height: 30px;
}

/* ================================================================ HEADER */
.lp-footure-insights-v2 .fi2-header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--fi2-header-h);
	display: flex;
	align-items: center;
	background: rgba(10, 10, 10, .82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease, background-color .2s ease;
}

.lp-footure-insights-v2 .fi2-header.is-solido {
	border-bottom-color: var(--fi2-line);
}

.lp-footure-insights-v2 .fi2-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.lp-footure-insights-v2 .fi2-header__logo,
.lp-footure-insights-v2 .fi2-footer__logo {
	display: inline-flex;
	flex-shrink: 0;
}

.lp-footure-insights-v2 .fi2-header__logo-img {
	height: 30px;
	width: auto;
}

@media (min-width: 560px) {
	.lp-footure-insights-v2 .fi2-header__logo-img {
		height: 38px;
	}
}

/* --------------------------------------------------------------- Nav (desktop) */
.lp-footure-insights-v2 .fi2-nav {
	display: flex;
	align-items: center;
	gap: 28px;
}

.lp-footure-insights-v2 .fi2-nav__lista {
	display: none;
}

.lp-footure-insights-v2 .fi2-nav__acoes {
	display: none;
	align-items: center;
	gap: 16px;
}

@media (min-width: 980px) {
	.lp-footure-insights-v2 .fi2-nav__lista {
		display: flex;
		align-items: center;
		gap: 26px;
	}

	.lp-footure-insights-v2 .fi2-nav__lista a {
		font-size: .875rem;
		font-weight: 500;
		color: var(--fi2-muted);
		white-space: nowrap;
	}

	.lp-footure-insights-v2 .fi2-nav__lista a:hover,
	.lp-footure-insights-v2 .fi2-nav__lista a:focus {
		color: var(--fi2-offwhite);
	}

	.lp-footure-insights-v2 .fi2-nav__acoes {
		display: flex;
	}
}

/* Hambúrguer: só existe abaixo do breakpoint em que o nav completo aparece. */
.lp-footure-insights-v2 .fi2-header__burger {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.lp-footure-insights-v2 .fi2-header__burger span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--fi2-offwhite);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease, width .2s ease;
}

.lp-footure-insights-v2 .fi2-header__burger span:nth-child(2) {
	width: 18px;
}

.lp-footure-insights-v2 .fi2-header__burger:hover span {
	width: 24px;
}

.lp-footure-insights-v2 .fi2-header__burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
	width: 24px;
}

.lp-footure-insights-v2 .fi2-header__burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.lp-footure-insights-v2 .fi2-header__burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
	width: 24px;
}

.lp-footure-insights-v2 .fi2-header__burger-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (min-width: 980px) {
	.lp-footure-insights-v2 .fi2-header__burger {
		display: none;
	}
}

/* --------------------------------------------------------------- Drawer (mobile) */
.lp-footure-insights-v2 .fi2-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	justify-content: flex-end;
}

.lp-footure-insights-v2 .fi2-drawer[hidden] {
	display: none;
}

.lp-footure-insights-v2 .fi2-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, .78);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.lp-footure-insights-v2 .fi2-drawer__painel {
	position: relative;
	z-index: 1;
	width: min(340px, 84vw);
	height: 100%;
	padding: 96px 28px 32px;
	background: var(--fi2-ink);
	border-left: 1px solid var(--fi2-card-line);
	display: flex;
	flex-direction: column;
	gap: 26px;
	animation: fi2-drawer-entrar .25s cubic-bezier(.16, 1, .3, 1);
}

@keyframes fi2-drawer-entrar {
	from { transform: translateX(24px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

.lp-footure-insights-v2 .fi2-drawer__lista {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lp-footure-insights-v2 .fi2-drawer__lista a {
	display: block;
	padding: 14px 4px;
	border-bottom: 1px solid var(--fi2-line);
	font-family: var(--fi2-font-head);
	font-size: 1.375rem;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--fi2-offwhite);
}

.lp-footure-insights-v2 .fi2-drawer__membro {
	width: 100%;
}

.lp-footure-insights-v2 .fi2-drawer__entrar {
	/* Mesmo padrão outline do .fi2-btn--ghost, só ocupando a largura cheia do
	   drawer — como o .fi2-drawer__membro logo acima. */
	width: 100%;
}

@media (min-width: 980px) {
	.lp-footure-insights-v2 .fi2-drawer {
		display: none !important;
	}
}

/* ================================================================== HERO / CARROSSEL */
.lp-footure-insights-v2 .fi2-hero {
	position: relative;
	/*
	   Só respiro próprio: .fi2-header é sticky, não fixed, então já reserva
	   os --fi2-header-h dele no fluxo normal — somar a altura do header aqui
	   de novo empurrava o hero ~110px além do necessário e estourava a
	   primeira dobra em telas de notebook comuns.
	*/
	padding: 24px 0 28px;
	overflow: hidden;
	transform: translateZ(0); /* própria camada composta — ver comentário equivalente na v1 */
}

@media (min-width: 900px) {
	.lp-footure-insights-v2 .fi2-hero {
		/*
		   Altura própria do hero = a primeira dobra inteira, descontado só o
		   header (que já ocupa espaço no fluxo por ser sticky, não fixed).
		   display:flex + justify-content:center centraliza o carrossel +
		   pontos de paginação dentro dessa altura — em vez de "grudar" no
		   topo ou exigir que o slide em si preencha tudo.
		*/
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: calc(100vh - var(--fi2-header-h));
		/*
		   Altura-alvo da mídia do hero, compartilhada por .fi2-slide (piso) e
		   .fi2-slide__media (altura real) — ver o porquê no comentário de
		   .fi2-slide__media. Não pode depender da altura que o TEXTO acaba
		   ocupando (variável entre o slide institucional e os de case).
		*/
		--fi2-hero-media-h: clamp(360px, 52vh, 520px);
	}
}

.lp-footure-insights-v2 .fi2-hero__textura {
	position: absolute;
	inset: 0;
	opacity: .05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M6 50H94M72 11.9 28 88.1M28 11.9 72 88.1' fill='none' stroke='%23eceff0' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
	background-size: 130px 130px;
	pointer-events: none;
}

.lp-footure-insights-v2 .fi2-hero__glow {
	position: absolute;
	top: -20%;
	right: -10%;
	width: 60vw;
	height: 60vw;
	max-width: 720px;
	max-height: 720px;
	background: radial-gradient(circle, rgba(236, 239, 240, .12) 0%, rgba(236, 239, 240, 0) 68%);
	pointer-events: none;
}

.lp-footure-insights-v2 .fi2-hero__viewport {
	position: relative;
	overflow: hidden;
}

.lp-footure-insights-v2 .fi2-hero__trilho {
	display: flex;
	will-change: transform;
	transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}

.lp-anima .fi2-hero__trilho {
	transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
	.lp-footure-insights-v2 .fi2-hero__trilho {
		transition: none;
	}
}

.lp-footure-insights-v2 .fi2-slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
}

@media (min-width: 900px) {
	/*
	   A partir daqui a imagem sai do fluxo normal (position:absolute, ver
	   .fi2-slide__media) para poder sangrar até a borda direita da TELA,
	   fora do container centralizado — não só do card do texto. .fi2-slide
	   vira flex só para centralizar verticalmente o texto, que é o único
	   filho que continua em fluxo.
	*/
	.lp-footure-insights-v2 .fi2-slide {
		display: flex;
		align-items: center;
		min-height: var(--fi2-hero-media-h);
	}
}

.lp-footure-insights-v2 .fi2-slide__inner {
	display: grid;
	gap: 40px;
	align-items: center;
}

@media (min-width: 900px) {
	.lp-footure-insights-v2 .fi2-slide__inner {
		display: block;
		width: 100%;
	}
}

.lp-footure-insights-v2 .fi2-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	color: var(--fi2-signal);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.lp-footure-insights-v2 .fi2-slide__sobre {
	margin: 0 0 6px;
	color: var(--fi2-muted);
	font-size: 1rem;
	font-weight: 400;
}

/*
   font-weight:700 é um teste pedido mesmo sem uma face bold própria: o
   Google Fonts só serve a Bebas Neue em 400, então o navegador sintetiza o
   negrito (faux bold). Funciona, mas fica menos "desenhado" que o peso
   único original — se incomodar visualmente, o caminho é voltar a 400 aqui.
*/
.lp-footure-insights-v2 .fi2-slide__titulo-geral {
	font-size: clamp(2.25rem, 4.6vw, 3.75rem);
	font-weight: 700;
	margin-bottom: .25em;
}

.lp-footure-insights-v2 .fi2-slide__nome {
	font-size: clamp(2.25rem, 4.6vw, 3.5rem);
	font-weight: 700;
	margin-bottom: .12em;
}

.lp-footure-insights-v2 .fi2-slide__titulo {
	margin: 0 0 .6em;
	color: var(--fi2-offwhite);
	font-family: var(--fi2-font-body);
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.4;
}

.lp-footure-insights-v2 .fi2-slide__lead-destaque {
	max-width: 580px;
	margin: 0 0 .6em;
	color: var(--fi2-offwhite);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.5;
}

.lp-footure-insights-v2 .fi2-slide__lead {
	max-width: 540px;
	font-size: 1rem;
	line-height: 1.6;
}

.lp-footure-insights-v2 .fi2-slide__ctas {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 20px;
}

.lp-footure-insights-v2 .fi2-slide__ctas .fi2-btn {
	width: 100%;
}

@media (min-width: 900px) {
	/* No layout empilhado do mobile os botões ocupam a largura cheia do
	   container; a partir daqui (coluna de texto já estreita, lado a lado
	   com a imagem) eles voltam a ficar lado a lado, do tamanho do texto. */
	.lp-footure-insights-v2 .fi2-slide__ctas {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.lp-footure-insights-v2 .fi2-slide__ctas .fi2-btn {
		width: auto;
	}
}

@media (min-width: 900px) {
	/*
	   Trava a coluna de texto numa faixa estreita para ela nunca encostar na
	   imagem, que agora sangra a partir de 33,33vw da esquerda (ver
	   .fi2-slide__media) — independente da largura do .fi2-container, que
	   continua centralizado como o resto da página.
	*/
	.lp-footure-insights-v2 .fi2-slide__texto {
		/*
		   A imagem começa em 42vw da esquerda (ver .fi2-slide__media, agora
		   com 58vw de largura). O texto mora dentro de .fi2-container, que
		   soma 32px de padding antes do próprio conteúdo — por isso o
		   cálculo desconta 64px (os 32px do padding + ~32px de respiro), não
		   só a vw.
		*/
		max-width: max(280px, min(480px, calc(41vw - 64px)));
		/*
		   Recuo à esquerda (não margin: a caixa é box-sizing:border-box, então
		   o padding entra DENTRO do max-width acima e a borda direita do bloco
		   não se move) para afastar o texto da seta "anterior" — presa à
		   borda esquerda do carrossel (ver .fi2-hero__seta--prev). Sem isso a
		   primeira letra de cada parágrafo ficava atrás do círculo da seta.
		*/
		padding-left: 48px;
	}
}

/*
   Mídia do hero: TODOS os destaques (o institucional e os de case) usam
   artes prontas — mockups fotográficos com a própria sombra/perspectiva já
   embutida —, nunca a moldura de pôster recortada da biblioteca.

   MOBILE: a imagem vem ANTES do texto (order: -1) e ocupa a largura cheia do
   container — largura manda, altura é livre (proporção nativa da arte).

   DESKTOP (≥900px): a imagem sai do fluxo (position:absolute) e sangra da
   borda direita da TELA, ocupando a altura CHEIA do slide (que pode crescer
   além do piso definido por --fi2-hero-media-h, se o texto de um case for
   mais longo que o de outro). Ela não fica esticada a essa altura variável:
   .fi2-poster--hero (o filho de dentro) é travado numa altura FIXA
   (--fi2-hero-media-h) e centralizado aqui via flex — não via
   transform:translateY, que entraria em conflito com o transform que
   .fi2-reveal usa para a animação de entrada no mesmo elemento.
*/
.lp-footure-insights-v2 .fi2-slide__media {
	position: relative;
	order: -1;
	width: 100%;
	margin: 0 auto;
}

@media (min-width: 900px) {
	.lp-footure-insights-v2 .fi2-slide__media {
		position: absolute;
		inset: 0 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		order: 0;
		width: 58vw;
		margin: 0;
	}
}

.lp-footure-insights-v2 .fi2-poster--hero {
	display: block;
	width: 100%;
	aspect-ratio: auto;
	overflow: visible;
	border: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

.lp-footure-insights-v2 .fi2-poster--hero .fi2-poster__img {
	position: static;
	width: 100%;
	height: auto;
	object-fit: contain;
}

@media (min-width: 900px) {
	/*
	   Altura FIXA (--fi2-hero-media-h), não 100%: .fi2-slide__media (o pai)
	   pode ficar mais alto que isso quando o texto do slide precisa de mais
	   espaço, e uma altura 100% cresceria junto — a imagem mudaria de
	   tamanho de slide para slide, e um "contain" preso a uma altura maior
	   que o necessário deixa sobra vazia acima/abaixo da própria arte. Com
	   valor fixo, a imagem sai sempre do mesmo tamanho e o align-items:center
	   do pai (ver .fi2-slide__media) cuida de centralizá-la.

	   A cadeia inteira (caixa → picture → img) precisa ser flex para
	   "abraçar" o tamanho renderizado da imagem, senão o <picture>
	   (display:block) tenta preencher a largura do pai em vez de respeitar
	   essa altura.
	*/
	.lp-footure-insights-v2 .fi2-poster--hero {
		display: flex;
		width: auto;
		max-width: 100%;
		height: var(--fi2-hero-media-h);
	}

	.lp-footure-insights-v2 .fi2-poster--hero picture {
		display: flex;
		height: 100%;
		width: auto;
		max-width: 100%;
	}

	.lp-footure-insights-v2 .fi2-poster--hero .fi2-poster__img {
		height: 100%;
		width: auto;
		max-width: 100%;
	}
}

/* Setas e paginação do carrossel */
.lp-footure-insights-v2 .fi2-hero__seta {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	background: rgba(20, 23, 22, .7);
	border: 1px solid var(--fi2-line);
	border-radius: 50%;
	color: var(--fi2-offwhite);
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.lp-footure-insights-v2 .fi2-hero__seta:hover {
	background: rgba(20, 23, 22, .95);
	transform: translateY(-1px);
}

.lp-footure-insights-v2 .fi2-hero__seta--prev {
	left: 8px;
}

.lp-footure-insights-v2 .fi2-hero__seta--next {
	right: 8px;
}

.lp-footure-insights-v2 .fi2-hero__seta-ico {
	width: 18px;
	height: 18px;
}

.lp-footure-insights-v2 .fi2-hero__seta-ico--prev {
	transform: rotate(90deg);
}

.lp-footure-insights-v2 .fi2-hero__seta-ico--next {
	transform: rotate(-90deg);
}

/*
   Só a partir de 900px, junto com o layout de imagem sangrada (ver
   .fi2-slide__media): abaixo disso o conteúdo do slide continua empilhado
   (imagem, depois texto), então "centralizar verticalmente" não tem um meio
   único e as setas acabam caindo em cima do título. Nesse layout empilhado o
   visitante já troca de destaque pelos pontos ou arrastando.
*/
@media (min-width: 900px) {
	.lp-footure-insights-v2 .fi2-hero__seta {
		display: flex;
	}
}

.lp-footure-insights-v2 .fi2-hero__pontos {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}

.lp-footure-insights-v2 .fi2-hero__ponto {
	width: 8px;
	height: 8px;
	padding: 0;
	background: var(--fi2-line);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .2s ease, width .2s ease;
}

.lp-footure-insights-v2 .fi2-hero__ponto.is-ativo {
	width: 26px;
	border-radius: var(--fi2-radius-pill);
	background: var(--fi2-offwhite);
}

/* ============================================================== LISTAS (o que é, para quem é) */
.lp-footure-insights-v2 .fi2-lista-perfis {
	border-top: 1px solid var(--fi2-line);
}

.lp-footure-insights-v2 .fi2-lista-perfis__item {
	display: flex;
	gap: 20px;
	padding: 26px 0;
	border-bottom: 1px solid var(--fi2-line);
}

.lp-footure-insights-v2 .fi2-lista-perfis__indice {
	flex-shrink: 0;
	width: 48px;
	font-family: var(--fi2-font-head);
	font-size: 1.5rem;
	color: var(--fi2-muted);
}

.lp-footure-insights-v2 .fi2-lista-perfis__corpo {
	flex: 1 1 auto;
	min-width: 0;
}

.lp-footure-insights-v2 .fi2-lista-perfis__perfil {
	font-size: 1.25rem;
	margin-bottom: .25em;
}

.lp-footure-insights-v2 .fi2-lista-perfis__desc {
	margin: 0;
	font-size: .9375rem;
}

/* ============================================================== ENTREGAS */
.lp-footure-insights-v2 .fi2-cards {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.lp-footure-insights-v2 .fi2-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1020px) {
	.lp-footure-insights-v2 .fi2-cards {
		grid-template-columns: repeat(4, 1fr);
	}
}

.lp-footure-insights-v2 .fi2-cards__item {
	padding: 28px 24px;
	background: var(--fi2-card);
	border: 1px solid var(--fi2-card-line);
	border-radius: var(--fi2-radius-lg);
	transition: border-color .2s ease, transform .2s ease;
}

.lp-footure-insights-v2 .fi2-cards__item:hover {
	border-color: var(--fi2-line);
	transform: translateY(-3px);
}

.lp-footure-insights-v2 .fi2-cards__num {
	display: block;
	margin-bottom: 14px;
	color: var(--fi2-signal);
	font-family: var(--fi2-font-head);
	font-size: 1.5rem;
	letter-spacing: .04em;
}

.lp-footure-insights-v2 .fi2-cards__titulo {
	font-size: 1.375rem;
	margin-bottom: .3em;
}

.lp-footure-insights-v2 .fi2-cards__desc {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
}

.lp-footure-insights-v2 .fi2-sequencia {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 20px;
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--fi2-line);
}

@media (min-width: 780px) {
	.lp-footure-insights-v2 .fi2-sequencia {
		flex-wrap: nowrap;
		justify-content: space-between;
	}
}

.lp-footure-insights-v2 .fi2-sequencia__item {
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: var(--fi2-font-head);
	font-size: clamp(1.125rem, 2.4vw, 1.625rem);
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--fi2-offwhite);
}

@media (min-width: 780px) {
	.lp-footure-insights-v2 .fi2-sequencia__item {
		flex: 1 1 auto;
		justify-content: center;
	}

	.lp-footure-insights-v2 .fi2-sequencia__item:first-child {
		justify-content: flex-start;
	}

	.lp-footure-insights-v2 .fi2-sequencia__item:last-child {
		justify-content: flex-end;
	}
}

.lp-footure-insights-v2 .fi2-sequencia__seta {
	flex-shrink: 0;
	color: var(--fi2-signal);
	font-family: var(--fi2-font-body);
	font-size: .875rem;
}

/* ============================================================= BIBLIOTECA (posters estilo streaming) */
.lp-footure-insights-v2 .fi2-poster-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 620px) {
	.lp-footure-insights-v2 .fi2-poster-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.lp-footure-insights-v2 .fi2-poster-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0;
	background: transparent;
	border: 0;
	text-align: left;
	cursor: pointer;
}

.lp-footure-insights-v2 .fi2-poster-card:not(.fi2-poster-card--em-breve):hover .fi2-poster,
.lp-footure-insights-v2 .fi2-poster-card:not(.fi2-poster-card--em-breve):focus-visible .fi2-poster {
	transform: translateY(-6px) scale(1.015);
	border-color: var(--fi2-line);
	box-shadow: 0 32px 60px rgba(0, 0, 0, .5);
}

.lp-footure-insights-v2 .fi2-poster-card .fi2-poster {
	margin-bottom: 14px;
	transition: transform .25s cubic-bezier(.16, 1, .3, 1), border-color .25s ease, box-shadow .25s ease;
}

.lp-footure-insights-v2 .fi2-poster__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 10, 10, .55) 0%, rgba(10, 10, 10, 0) 45%);
	opacity: 0;
	transition: opacity .2s ease;
}

.lp-footure-insights-v2 .fi2-poster-card:hover .fi2-poster__overlay,
.lp-footure-insights-v2 .fi2-poster-card:focus-visible .fi2-poster__overlay {
	opacity: 1;
}

.lp-footure-insights-v2 .fi2-poster__play {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	transform: translate(-50%, -50%) scale(.8);
	background: rgba(236, 239, 240, .92);
	border-radius: 50%;
	color: var(--fi2-black);
	opacity: 0;
	transition: opacity .2s ease, transform .2s ease;
}

.lp-footure-insights-v2 .fi2-poster__play .lp-icon {
	width: 20px;
	height: 20px;
	margin-left: 2px;
}

.lp-footure-insights-v2 .fi2-poster-card:hover .fi2-poster__play,
.lp-footure-insights-v2 .fi2-poster-card:focus-visible .fi2-poster__play {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.lp-footure-insights-v2 .fi2-poster-card__rotulo {
	color: var(--fi2-signal);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.lp-footure-insights-v2 .fi2-poster-card__nome {
	display: block;
	font-family: var(--fi2-font-head);
	font-size: 1.125rem;
	line-height: 1.05;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--fi2-offwhite);
}

@media (min-width: 620px) {
	.lp-footure-insights-v2 .fi2-poster-card__nome {
		font-size: 1.375rem;
	}
}

.lp-footure-insights-v2 .fi2-poster-card__titulo {
	display: block;
	margin-top: 6px;
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--fi2-muted);
}

.lp-footure-insights-v2 .fi2-poster-card--em-breve {
	cursor: default;
}

.lp-footure-insights-v2 .fi2-badge-em-breve {
	position: absolute;
	left: 12px;
	bottom: 12px;
	padding: 5px 12px;
	background: var(--fi2-black);
	border: 1px solid var(--fi2-line);
	border-radius: var(--fi2-radius-pill);
	color: var(--fi2-offwhite);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.lp-footure-insights-v2 .fi2-biblioteca__nota {
	margin: 32px 0 0;
	font-size: .9375rem;
	color: var(--fi2-offwhite);
}

/* ================================================================= SEJA MEMBRO */
.lp-footure-insights-v2 .fi2-membro {
	position: relative;
	overflow: hidden;
}

.lp-footure-insights-v2 .fi2-membro__estrela {
	position: absolute;
	top: -10%;
	right: -6%;
	width: clamp(220px, 30vw, 420px);
	height: auto;
	opacity: .07;
	pointer-events: none;
}

.lp-footure-insights-v2 .fi2-membro__grid {
	position: relative;
	display: grid;
	gap: 40px;
}

@media (min-width: 940px) {
	.lp-footure-insights-v2 .fi2-membro__grid {
		grid-template-columns: .85fr 1.15fr;
		gap: 64px;
		align-items: start;
	}
}

.lp-footure-insights-v2 .fi2-membro__subtitulo {
	font-size: 1.125rem;
	margin-bottom: 20px;
}

.lp-footure-insights-v2 .fi2-beneficios {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lp-footure-insights-v2 .fi2-beneficios__item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	font-size: .9375rem;
}

.lp-footure-insights-v2 .fi2-beneficios__ico {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-top: 2px;
	background: rgba(74, 222, 128, .1);
	border-radius: 50%;
	color: var(--fi2-signal);
}

.lp-footure-insights-v2 .fi2-beneficios__ico .lp-icon {
	width: 13px;
	height: 13px;
}

.lp-footure-insights-v2 .fi2-beneficios__item strong {
	display: block;
	margin-bottom: 2px;
	color: var(--fi2-offwhite);
	font-weight: 600;
}

.lp-footure-insights-v2 .fi2-beneficios__desc {
	color: var(--fi2-muted);
	line-height: 1.55;
}

/* Planos */
.lp-footure-insights-v2 .fi2-membro__planos {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}

@media (min-width: 560px) {
	.lp-footure-insights-v2 .fi2-membro__planos {
		grid-template-columns: repeat(2, 1fr);
	}
}

.lp-footure-insights-v2 .fi2-plano {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 26px;
	background: var(--fi2-card);
	border: 1px solid var(--fi2-card-line);
	border-radius: var(--fi2-radius-lg);
}

.lp-footure-insights-v2 .fi2-plano--recomendado {
	border-color: var(--fi2-signal);
	background: linear-gradient(180deg, rgba(74, 222, 128, .08) 0%, var(--fi2-card) 30%);
}

@media (min-width: 560px) {
	.lp-footure-insights-v2 .fi2-plano--recomendado {
		transform: translateY(-10px);
	}
}

.lp-footure-insights-v2 .fi2-plano__selo {
	position: absolute;
	top: -13px;
	left: 26px;
	margin: 0;
	padding: 5px 14px;
	background: var(--fi2-signal);
	border-radius: var(--fi2-radius-pill);
	color: var(--fi2-black);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.lp-footure-insights-v2 .fi2-plano__nome {
	margin: 6px 0 14px;
	color: var(--fi2-muted);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.lp-footure-insights-v2 .fi2-plano__preco {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 6px;
}

.lp-footure-insights-v2 .fi2-plano__preco-num {
	font-family: var(--fi2-font-head);
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1;
	color: var(--fi2-offwhite);
	white-space: nowrap;
}

.lp-footure-insights-v2 .fi2-plano__preco-periodo {
	font-size: .9375rem;
	color: var(--fi2-muted);
}

.lp-footure-insights-v2 .fi2-plano__preco-original {
	margin: 0 0 2px;
	font-size: .8125rem;
	color: var(--fi2-muted);
}

.lp-footure-insights-v2 .fi2-plano__preco-original s {
	color: var(--fi2-muted);
	text-decoration-color: currentColor;
}

.lp-footure-insights-v2 .fi2-plano__parcelamento {
	margin: 0 0 4px;
	font-size: .75rem;
	color: var(--fi2-muted);
}

.lp-footure-insights-v2 .fi2-plano__parcelamento--espacado {
	margin-bottom: 20px;
}

.lp-footure-insights-v2 .fi2-plano__economia {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--fi2-signal);
}

.lp-footure-insights-v2 .fi2-plano__economia .lp-icon {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}

.lp-footure-insights-v2 .fi2-plano__forma {
	margin: 0 0 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--fi2-line);
	font-size: .875rem;
	color: var(--fi2-muted);
}

.lp-footure-insights-v2 .fi2-plano__itens {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 24px;
}

.lp-footure-insights-v2 .fi2-plano__itens li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .875rem;
	line-height: 1.5;
}

.lp-footure-insights-v2 .fi2-plano__itens .lp-icon {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	margin-top: 2px;
	color: var(--fi2-signal);
}

.lp-footure-insights-v2 .fi2-plano__cta {
	margin-top: auto;
	width: 100%;
}

.lp-footure-insights-v2 .fi2-membro__nota {
	margin: 40px 0 0;
	max-width: 640px;
	font-size: .8125rem;
	color: var(--fi2-muted);
}

.lp-footure-insights-v2 .fi2-membro__nota--compacta {
	margin-top: 8px;
}

/* ==================================================================== FAQ */
.lp-footure-insights-v2 .fi2-faq-lista {
	border-top: 1px solid var(--fi2-line);
}

.lp-footure-insights-v2 .fi2-faq-item {
	border-bottom: 1px solid var(--fi2-line);
}

.lp-footure-insights-v2 .fi2-faq-item__cabecalho {
	margin: 0;
	font-family: var(--fi2-font-body);
	text-transform: none;
}

.lp-footure-insights-v2 .fi2-faq-item__botao {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 22px 4px;
	background: transparent;
	border: 0;
	color: var(--fi2-offwhite);
	font-family: var(--fi2-font-body);
	font-size: 1.0625rem;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
}

.lp-footure-insights-v2 .fi2-faq-item__sinal {
	position: relative;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

.lp-footure-insights-v2 .fi2-faq-item__sinal::before,
.lp-footure-insights-v2 .fi2-faq-item__sinal::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--fi2-offwhite);
	transform: translate(-50%, -50%);
	transition: transform .2s ease;
}

.lp-footure-insights-v2 .fi2-faq-item__sinal::before {
	width: 14px;
	height: 2px;
}

.lp-footure-insights-v2 .fi2-faq-item__sinal::after {
	width: 2px;
	height: 14px;
}

.lp-footure-insights-v2 .fi2-faq-item__botao[aria-expanded="true"] .fi2-faq-item__sinal::after {
	transform: translate(-50%, -50%) rotate(90deg) scale(0);
}

.lp-footure-insights-v2 .fi2-faq-item__painel {
	padding: 0 4px 22px;
	max-width: 720px;
}

.lp-footure-insights-v2 .fi2-faq-item__painel p {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.65;
}

/* ================================================================== RODAPÉ */
.lp-footure-insights-v2 .fi2-footer {
	padding: 52px 0 calc(52px + var(--fi2-sticky-espaco));
	border-top: 1px solid var(--fi2-line);
}

.lp-footure-insights-v2 .fi2-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.lp-footure-insights-v2 .fi2-footer__logo-img {
	height: 26px;
	width: auto;
}

.lp-footure-insights-v2 .fi2-footer__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.lp-footure-insights-v2 .fi2-footer .fi2-footer__nav a,
.lp-footure-insights-v2 .fi2-footer .fi2-footer__nav a:link,
.lp-footure-insights-v2 .fi2-footer .fi2-footer__nav a:visited {
	font-size: .875rem;
	color: var(--fi2-muted);
}

.lp-footure-insights-v2 .fi2-footer .fi2-footer__nav a:hover,
.lp-footure-insights-v2 .fi2-footer .fi2-footer__nav a:focus {
	color: var(--fi2-offwhite);
}

.lp-footure-insights-v2 .fi2-footer__copy {
	margin: 0;
	width: 100%;
	font-size: .8125rem;
	color: var(--fi2-muted);
}

@media (min-width: 720px) {
	.lp-footure-insights-v2 .fi2-footer__copy {
		width: auto;
	}
}

/* =============================================================== BARRA FIXA */
.lp-footure-insights-v2 .fi2-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	transform: translateY(100%);
	opacity: 0;
	background: rgba(10, 10, 10, .92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top: 1px solid var(--fi2-line);
	transition: transform .25s ease, opacity .25s ease;
}

.lp-footure-insights-v2 .fi2-sticky.is-visivel {
	transform: translateY(0);
	opacity: 1;
}

.lp-footure-insights-v2 .fi2-sticky__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px;
}

.lp-footure-insights-v2 .fi2-sticky__texto {
	display: none;
	margin: 0;
	font-size: .875rem;
	color: var(--fi2-offwhite);
}

@media (min-width: 560px) {
	.lp-footure-insights-v2 .fi2-sticky__texto {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-footure-insights-v2 .fi2-sticky {
		transition: none;
	}
}

/* ============================================================= MODAL DA BIBLIOTECA */
.lp-footure-insights-v2 .fi2-modal {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: none;
	align-items: flex-start;
	justify-content: center;
	padding: 20px;
	overflow-y: auto;
}

.lp-footure-insights-v2 .fi2-modal:not([hidden]) {
	display: flex;
}

.lp-footure-insights-v2 .fi2-modal__overlay {
	position: fixed;
	inset: 0;
	background: rgba(10, 10, 10, .88);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.lp-footure-insights-v2 .fi2-modal__caixa {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 880px;
	margin: clamp(16px, 4vh, 64px) 0;
	padding: 40px 22px 32px;
	background: var(--fi2-ink);
	border: 1px solid var(--fi2-card-line);
	border-radius: var(--fi2-radius-lg);
	animation: fi2-modal-entrar .25s cubic-bezier(.16, 1, .3, 1);
}

@media (min-width: 640px) {
	.lp-footure-insights-v2 .fi2-modal__caixa {
		padding: 48px 40px 40px;
	}
}

@keyframes fi2-modal-entrar {
	from { opacity: 0; transform: translateY(14px) scale(.98); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.lp-footure-insights-v2 .fi2-modal__caixa {
		animation: none;
	}
}

.lp-footure-insights-v2 .fi2-modal__fechar {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--fi2-card);
	border: 1px solid var(--fi2-card-line);
	border-radius: 50%;
	color: var(--fi2-muted);
	cursor: pointer;
	transition: color .15s ease, background-color .15s ease;
}

.lp-footure-insights-v2 .fi2-modal__fechar:hover,
.lp-footure-insights-v2 .fi2-modal__fechar:focus-visible {
	color: var(--fi2-offwhite);
	background: var(--fi2-card-line);
}

.lp-footure-insights-v2 .fi2-modal__fechar .lp-icon {
	width: 16px;
	height: 16px;
}

.lp-footure-insights-v2 .fi2-modal__painel[hidden] {
	display: none;
}

/* Variante compacta: usada pelo modal de aviso de checkout, que não precisa
   da largura de 880px do modal de prévia da biblioteca. */
/*
   O modal da biblioteca (#fi2-modal) é fullscreen e fica align-items:
   flex-start no shell genérico porque o conteúdo pode passar da altura da
   tela (rola). O de checkout/login (#fi2-checkout-modal) é sempre curto —
   aqui faz sentido centralizar de verdade, nos dois eixos.
*/
#fi2-checkout-modal.fi2-modal {
	align-items: center;
}

.lp-footure-insights-v2 .fi2-modal__caixa--pequena {
	max-width: 440px;
	text-align: center;
}

.lp-footure-insights-v2 .fi2-modal__caixa--pequena .fi2-modal__desc {
	margin-bottom: 28px;
}

.lp-footure-insights-v2 .fi2-checkout-modal__acoes {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lp-footure-insights-v2 .fi2-checkout-modal__acoes .fi2-btn {
	width: 100%;
}

/*
   Modal da biblioteca em tela cheia (ver #fi2-modal logo abaixo): a capa não
   se repete mais aqui (a primeira página do próprio livro de prévia já É a
   capa — ver .fi2-livro), então este cabeçalho virou só a coluna de texto,
   ao lado da coluna de prévia. No mobile as duas colunas empilham, sem capa
   nenhuma.
*/
#fi2-modal.fi2-modal {
	align-items: stretch;
	padding: 0;
}

#fi2-modal .fi2-modal__caixa {
	width: 100%;
	max-width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border-radius: 0;
	overflow-y: auto;
}

#fi2-modal .fi2-modal__painel:not([hidden]) {
	display: block;
	min-height: 100%;
}

.lp-footure-insights-v2 .fi2-modal__grid {
	min-height: 100%;
}

.lp-footure-insights-v2 .fi2-modal__coluna-texto {
	padding: 72px 24px 40px;
}

@media (min-width: 560px) {
	.lp-footure-insights-v2 .fi2-modal__coluna-texto {
		padding: 80px 48px 48px;
	}
}

/* Mais distância que o padrão do .fi2-eyebrow (14px): aqui ele é o único
   elemento acima do título, sem uma imagem ao lado disputando atenção, então
   uma respiração maior ajuda a separar os dois níveis de hierarquia. */
.lp-footure-insights-v2 .fi2-modal__eyebrow {
	margin-bottom: 20px;
}

.lp-footure-insights-v2 .fi2-modal__titulo {
	font-size: clamp(1.625rem, 3vw, 2.25rem);
	margin-bottom: .25em;
}

.lp-footure-insights-v2 .fi2-modal__desc {
	font-size: 1rem;
	color: var(--fi2-offwhite);
	margin-bottom: 14px;
}

.lp-footure-insights-v2 .fi2-modal__sobre {
	font-size: .875rem;
	line-height: 1.65;
	max-width: 480px;
}

.lp-footure-insights-v2 .fi2-modal__sobre p:last-child {
	margin-bottom: 0;
}

.lp-footure-insights-v2 .fi2-modal__coluna-preview {
	padding: 8px 24px 56px;
	border-top: 1px solid var(--fi2-line);
}

@media (min-width: 560px) {
	.lp-footure-insights-v2 .fi2-modal__coluna-preview {
		padding: 8px 48px 64px;
	}
}

.lp-footure-insights-v2 .fi2-modal__preview-rotulo {
	margin: 0 0 18px;
	color: var(--fi2-muted);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
}

@media (min-width: 900px) {
	/*
	   Duas colunas ocupando a altura cheia da tela: conteúdo à esquerda
	   (rola sozinho se for mais alto que a viewport), prévia à direita —
	   nem uma nem outra dependem da altura da coluna vizinha.
	*/
	.lp-footure-insights-v2 .fi2-modal__grid {
		display: flex;
		height: 100%;
	}

	.lp-footure-insights-v2 .fi2-modal__coluna-texto {
		flex: 0 0 42%;
		max-width: 560px;
		padding: 96px 56px;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.lp-footure-insights-v2 .fi2-modal__coluna-preview {
		flex: 1 1 auto;
		padding: 40px;
		border-top: 0;
		border-left: 1px solid var(--fi2-line);
		background: var(--fi2-ink);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		overflow-y: auto;
	}
}

/* ------------------------------------------------------------------- Flipbook */
.lp-footure-insights-v2 .fi2-livro {
	width: 100%;
	max-width: 320px;
	margin: 0 auto;
}

@media (min-width: 900px) {
	/* A coluna de prévia agora ocupa a altura cheia da tela — o livro pode
	   crescer bem além dos 320px do layout empilhado do mobile. */
	.lp-footure-insights-v2 .fi2-livro {
		max-width: min(440px, 100%);
	}
}

.lp-footure-insights-v2 .fi2-livro__paginas {
	position: relative;
	width: 100%;
	aspect-ratio: 900 / 1272;
	perspective: 1800px;
	border-radius: var(--fi2-radius);
	box-shadow: 0 24px 48px rgba(0, 0, 0, .5);
}

.lp-footure-insights-v2 .fi2-pagina {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: var(--fi2-radius);
	background: var(--fi2-card);
	border: 1px solid var(--fi2-card-line);
	transform-origin: left center;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	transition: transform .65s cubic-bezier(.4, 0, .2, 1), opacity .5s ease;
}

.lp-footure-insights-v2 .fi2-pagina.is-virada {
	transform: rotateY(-155deg);
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.lp-footure-insights-v2 .fi2-pagina {
		transition: opacity .3s ease;
	}

	.lp-footure-insights-v2 .fi2-pagina.is-virada {
		transform: none;
	}
}

.lp-footure-insights-v2 .fi2-pagina__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lp-footure-insights-v2 .fi2-pagina--paywall {
	background: linear-gradient(160deg, var(--fi2-card) 0%, var(--fi2-ink) 100%);
}

.lp-footure-insights-v2 .fi2-paywall {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	height: 100%;
	padding: 24px;
	text-align: center;
}

.lp-footure-insights-v2 .fi2-paywall__estrela {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: .06;
	padding: 30px;
}

.lp-footure-insights-v2 .fi2-paywall__eyebrow {
	position: relative;
	margin: 0;
	color: var(--fi2-signal);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.lp-footure-insights-v2 .fi2-paywall__titulo {
	position: relative;
	margin: 0;
	max-width: 220px;
	font-family: var(--fi2-font-head);
	font-size: 1.375rem;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--fi2-offwhite);
}

.lp-footure-insights-v2 .fi2-paywall .fi2-btn {
	position: relative;
}

.lp-footure-insights-v2 .fi2-livro__controles {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 18px;
}

.lp-footure-insights-v2 .fi2-livro__seta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--fi2-card);
	border: 1px solid var(--fi2-card-line);
	border-radius: 50%;
	color: var(--fi2-offwhite);
	cursor: pointer;
	transition: background-color .2s ease, opacity .2s ease;
}

.lp-footure-insights-v2 .fi2-livro__seta:hover:not(:disabled) {
	background: var(--fi2-card-line);
}

.lp-footure-insights-v2 .fi2-livro__seta:disabled {
	opacity: .35;
	cursor: default;
}

.lp-footure-insights-v2 .fi2-livro__seta-ico {
	width: 16px;
	height: 16px;
}

.lp-footure-insights-v2 .fi2-livro__seta-ico--prev {
	transform: rotate(90deg);
}

.lp-footure-insights-v2 .fi2-livro__seta-ico--next {
	transform: rotate(-90deg);
}

.lp-footure-insights-v2 .fi2-livro__pontos {
	display: flex;
	gap: 7px;
}

.lp-footure-insights-v2 .fi2-livro__pontos span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--fi2-line);
	transition: background-color .2s ease, transform .2s ease;
}

.lp-footure-insights-v2 .fi2-livro__pontos span.is-ativo {
	background: var(--fi2-signal);
	transform: scale(1.3);
}

/*
   Dica de que a capa é clicável: sem ela, nada na primeira página avisa que
   dá para folhear o livro clicando nele (só os botões de seta, discretos,
   deixam isso óbvio). Fica sobre a capa (z-index mais alto que qualquer
   página), pointer-events:none para não atrapalhar o clique, e some assim
   que o visitante vira a primeira página — ver atualizar() em
   inicializarLivro(), js/main.js.
*/
.lp-footure-insights-v2 .fi2-livro__dica {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 20;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	background: rgba(10, 10, 10, .82);
	box-shadow: inset 0 0 0 1px rgba(236, 239, 240, .35), 0 12px 28px rgba(0, 0, 0, .4);
	border-radius: var(--fi2-radius-pill);
	color: var(--fi2-offwhite);
	font-size: .8125rem;
	font-weight: 600;
	white-space: nowrap;
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
}

.lp-footure-insights-v2 .fi2-livro__dica.is-oculta {
	opacity: 0;
	transform: translate(-50%, -50%) scale(.92);
}

.lp-footure-insights-v2 .fi2-livro__dica-pulso {
	position: relative;
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--fi2-signal);
}

.lp-footure-insights-v2 .fi2-livro__dica-pulso::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	background: var(--fi2-signal);
	opacity: .55;
	animation: fi2-livro-pulso 1.8s ease-out infinite;
}

@keyframes fi2-livro-pulso {
	0% { transform: scale(.5); opacity: .55; }
	100% { transform: scale(2.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.lp-footure-insights-v2 .fi2-livro__dica-pulso::before {
		animation: none;
	}
}