/* Fonte base: Poppins. Paleta: azul escuro, cinza claro, branco. Acento: turquesa. */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, 'Open Sans', Arial, sans-serif;
	color: #0f1b2d;
	background: #0b1220;
	line-height: 1.45;
}

.pressel { height: 100%; }
.slides { height: 100%; position: relative; overflow: hidden; }

/* Crédito estático (apenas última dobra) */
.site-credit-inline { 
	margin-top: 16px; 
	text-align: center;
	line-height: 1.5;
}
.site-credit-inline a {
	font-size: 12px;
	color: rgba(233, 240, 255, .82);
	text-decoration: none;
	background: rgba(0,0,0,.18);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 10px;
	padding: 6px 12px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 6px 16px rgba(0,0,0,.25);
	display: inline-block;
	word-wrap: break-word;
	max-width: 90%;
	line-height: 1.6;
}
.site-credit-inline a:hover { color: #fff; background: rgba(0,0,0,.25); }

/* Cada slide ocupa 100vh */

.slide {
	min-height: 100vh;
	height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 56px 24px 120px;
	color: #fff;
	/* ajuda o alinhamento quando houver scroll snapping */
	scroll-snap-align: start;
}

/* Fade de base para dar contraste à seta e evitar leitura do próximo título por baixo */
.slide::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(env(safe-area-inset-bottom, 0px) + 140px);
	background: linear-gradient(to bottom, rgba(11,18,32,0) 0%, rgba(11,18,32,.42) 45%, rgba(11,18,32,.72) 75%, rgba(11,18,32,1) 100%);
	pointer-events: none;
	z-index: 1;
}

/* Temas/gradientes suaves */
.theme-1 {
	background: linear-gradient(160deg, #0b1220 0%, #132a4a 60%, #1c3c6b 100%);
}
.theme-2 {
	background: linear-gradient(160deg, #0b1220 0%, #1d2538 50%, #2a4266 100%);
}
.theme-3 {
	background: linear-gradient(160deg, #0b1220 0%, #123252 50%, #056a7c 100%);
}
.theme-4 {
	background: linear-gradient(160deg, #0b1220 0%, #1d2b40 50%, #2f5a88 100%);
}
.theme-5 {
	background: linear-gradient(160deg, #0b1220 0%, #1c2b45 50%, #0f866f 100%);
}

.slide .title,
.slide .subtitle,
.slide .lead,
.slide .bullets li,
.slide .timeline__item,
.slide .promo-box,
.slide .actions,
.slide .avatar {
	opacity: 0;
	transform: translateY(12px);
	will-change: opacity, transform;
}

.slide .avatar {
	transform: translateY(12px) scale(0.98);
	will-change: opacity, transform;
}

.slide .promo-box {
	transform: translateY(16px) scale(0.96);
}

.slide .nav-hint { opacity: 0; }

/* Dobra 3: bullets iniciam levemente à esquerda para animar lateralmente */
.theme-3 .bullets li { transform: translateX(-16px); }

.container {
	max-width: 1120px;
	width: 100%;
	margin: 0 auto;
	display: grid;
	gap: 24px;
	align-items: center;
}
.container.narrow { max-width: 800px; }

.hero {
	display: grid;
	grid-template-columns: 1.1fr 1.4fr;
	gap: 40px;
	align-items: center;
}
.hero__media { display: flex; justify-content: center; }
.avatar {
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: radial-gradient( circle at 30% 30%, #ffffff22 0%, #ffffff10 40%, #00000020 100% ),
		linear-gradient(135deg, #0f866f, #2dbfb0);
	box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 0 0 6px rgba(255,255,255,.08);
	overflow: hidden;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.title { font-size: clamp(28px, 4vw, 44px); margin: 0; font-weight: 700; }
.subtitle, .lead { font-size: clamp(16px, 2.2vw, 20px); color: #e7edf7; opacity: .92; margin: 0; }
.lead { margin-top: 8px; }

.bullets { margin: 8px 0 0; padding: 0 0 0 18px; }
.bullets li { margin: 10px 0; color: #eef5ff; }

.timeline { display: grid; gap: 16px; margin-top: 8px; }
.timeline__item { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 16px 18px; }
.timeline__item h3 { margin: 0 0 4px; font-size: 18px; }
.timeline__item p { margin: 0; color: #e7edf7; }

.actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.hero .actions { margin-bottom: 12px; }
.actions--stack { flex-direction: column; align-items: stretch; }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	transition: .35s ease;
	will-change: transform, box-shadow, background, color;
	border: 2px solid transparent;
}
.btn-primary { background: linear-gradient(135deg, #1bb2a5, #0f866f); color: #07121f; box-shadow: 0 10px 24px rgba(0, 193, 175, .35); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 193, 175, .45); filter: saturate(1.05); }

.btn-outline { background: transparent; color: #e9f0ff; border-color: rgba(255,255,255,.35); }
.btn-outline:hover { background: rgba(255,255,255,.09); color: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.25); transform: translateY(-2px); }

.btn-whatsapp { background: linear-gradient(135deg, #25D366, #128C7E); color: #07121f; box-shadow: 0 10px 24px rgba(37, 211, 102, .35); }
.btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(37, 211, 102, .45); }

.disclaimer { margin-top: 16px; font-size: 12px; color: #dbe6f7; opacity: .75; }

/* Caixa de Promoção */
.promo-box {
	display: block;
	background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 165, 0, 0.12) 100%);
	border: 2px solid rgba(255, 215, 0, 0.4);
	border-radius: 16px;
	padding: 20px 24px;
	margin: 20px 0;
	text-align: center;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 8px 32px rgba(255, 215, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	animation: promoGlow 3s ease-in-out infinite;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.4s ease;
	will-change: transform, box-shadow;
}

.promo-box:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 12px 40px rgba(255, 215, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 215, 0, 0.7);
}

.promo-badge {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: #FFD700;
	text-shadow: 0 2px 8px rgba(255, 215, 0, 0.5);
	letter-spacing: 1.2px;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.promo-text {
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	margin: 8px 0;
	line-height: 1.3;
}

.promo-savings {
	font-size: 15px;
	font-weight: 600;
	color: #FFD700;
	margin: 8px 0 12px;
	line-height: 1.4;
}

.promo-cta {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
	margin-top: 8px;
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	transition: all 0.3s ease;
}

.promo-box:hover .promo-cta {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

@keyframes promoGlow {
	0%, 100% {
		box-shadow: 0 8px 32px rgba(255, 215, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
		border-color: rgba(255, 215, 0, 0.4);
	}
	50% {
		box-shadow: 0 12px 40px rgba(255, 215, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
		border-color: rgba(255, 215, 0, 0.6);
	}
}

/* Seta inferior */
.arrow-next {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
	width: 56px;
	height: 56px;
	border-radius: 999px;
	border: 2px solid rgba(255,255,255,.25);
	background: linear-gradient(135deg, rgba(27, 178, 165, 0.3), rgba(15, 134, 111, 0.2));
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 8px 24px rgba(27, 178, 165, .4), 0 0 20px rgba(27, 178, 165, .2);
	transition: all .35s ease;
	animation: arrowBounce 2s ease-in-out infinite, arrowGlow 2s ease-in-out infinite;
	z-index: 2;
}

.arrow-next:hover { 
	background: linear-gradient(135deg, rgba(27, 178, 165, 0.5), rgba(15, 134, 111, 0.4));
	border-color: rgba(255,255,255,.5);
	transform: translateX(-50%) translateY(-4px) scale(1.1);
	box-shadow: 0 12px 32px rgba(27, 178, 165, .6), 0 0 30px rgba(27, 178, 165, .4);
}

.arrow-next:active {
	transform: translateX(-50%) translateY(-1px) scale(1.05);
}

.arrow-next svg { 
	display: block; 
	margin: 0 auto;
	animation: arrowMove 2s ease-in-out infinite;
}

.arrow-next.is-hidden { display: none; }

/* Rótulo acima da seta */
.nav-hint {
	position: absolute;
	left: calc(50% - 120px);
	bottom: calc(env(safe-area-inset-bottom, 0px) + 18px + 56px + 14px);
	font-size: 12.5px;
	letter-spacing: .3px;
	color: #fff;
	font-weight: 600;
	opacity: .95;
	background: linear-gradient(135deg, rgba(27, 178, 165, 0.25), rgba(15, 134, 111, 0.2));
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 999px;
	padding: 8px 14px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 6px 20px rgba(0,0,0,.3);
	transition: all .35s ease;
	pointer-events: none;
	z-index: 2;
	animation: hintPulse 2s ease-in-out infinite;
}

.nav-hint:hover { opacity: 1; }

/* Animações para a seta */
@keyframes arrowBounce {
	0%, 100% { 
		transform: translateX(-50%) translateY(0);
	}
	50% { 
		transform: translateX(-50%) translateY(-8px);
	}
}

@keyframes arrowGlow {
	0%, 100% { 
		box-shadow: 0 8px 24px rgba(27, 178, 165, .4), 0 0 20px rgba(27, 178, 165, .2);
		border-color: rgba(255,255,255,.25);
	}
	50% { 
		box-shadow: 0 12px 32px rgba(27, 178, 165, .6), 0 0 35px rgba(27, 178, 165, .4);
		border-color: rgba(255,255,255,.4);
	}
}

@keyframes arrowMove {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(4px);
	}
}

@keyframes hintPulse {
	0%, 100% {
		opacity: .95;
		transform: scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.02);
	}
}

.audio-toggle {
	position: fixed;
	bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
	right: calc(env(safe-area-inset-right, 0px) + 20px);
	z-index: 10;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.16);
	background: rgba(0,0,0,.24);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #e9f0ff;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(0,0,0,.35);
	transition: .35s ease;
}
.audio-toggle:hover { background: rgba(255,255,255,.1); color: #fff; transform: translateY(-1px); }
.audio-toggle:active { transform: translateY(0); }
.audio-toggle[aria-pressed="true"] { background: rgba(0,0,0,.34); }

/* Indicador de carregamento do áudio */
.audio-toggle.loading {
	background: rgba(0, 123, 255, 0.3);
	border-color: rgba(0, 123, 255, 0.5);
	animation: audioLoading 2s ease-in-out infinite;
}

@keyframes audioLoading {
	0%, 100% { 
		background: rgba(0, 123, 255, 0.3);
		transform: scale(1);
	}
	50% { 
		background: rgba(0, 123, 255, 0.6);
		transform: scale(1.05);
	}
}

/* Tooltip para o botão de áudio */
.audio-toggle::before {
	content: attr(data-tooltip);
	position: absolute;
	right: 50px;
	bottom: 50%;
	transform: translateY(50%);
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 12px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 11;
}

.audio-toggle:hover::before {
	opacity: 1;
}

/* Responsividade */
@media (max-width: 980px) {
	.hero { grid-template-columns: 1fr; text-align: center; }
	.hero__media { order: -1; }
	.avatar { width: 180px; height: 180px; }
	.hero .actions { margin-bottom: 18px; }
}

@media (max-width: 560px) {
	.slide { padding: 40px 18px 130px; }
	.title { font-size: clamp(24px, 7vw, 36px); }
	.subtitle, .lead { font-size: 16px; }
	.actions--stack .btn { width: 100%; }
	.avatar { width: 160px; height: 160px; }
	.hero .actions { margin-bottom: 22px; }
	.container { justify-items: center; text-align: center; }
	.timeline { justify-items: center; }
	.timeline__item { text-align: center; }
	.bullets { margin-top: 6px; padding-left: 0; list-style-position: inside; text-align: center; }
	.bullets li { margin: 6px 0; font-size: 15px; line-height: 1.45; }
	.actions .btn { padding: 13px 18px; font-size: 15px; }
	.theme-3 .actions { margin-bottom: 26px; }
	.site-credit-inline { margin-top: 20px; }

	/* Dobra 3: bullets recuados/alinhados à esquerda */
	.theme-3 .bullets { justify-self: start; text-align: left; list-style-position: outside; padding-left: 18px; }
	.theme-3 .bullets li { text-align: left; }
	
	/* Promoção responsiva */
	.promo-box { padding: 16px 20px; margin: 16px 0; }
	.promo-badge { font-size: 13px; }
	.promo-text { font-size: 19px; }
	.promo-savings { font-size: 14px; }
	.promo-cta { font-size: 13px; padding: 6px 14px; }
	
	/* Crédito responsivo */
	.site-credit-inline { margin-top: 20px; }
	.site-credit-inline a {
		font-size: 10px;
		padding: 5px 10px;
		max-width: 95%;
	}
}

/* Otimizações específicas para mobile na primeira dobra */
@media (max-width: 480px) {
	.slide { padding: 32px 16px 120px; }
	
	/* Hero específico para mobile */
	.hero { 
		gap: 24px; 
		grid-template-columns: 1fr; 
		text-align: center; 
	}
	
	.hero__media { 
		order: -1; 
		margin-bottom: 8px; 
	}
	
	.avatar { 
		width: 140px; 
		height: 140px; 
		box-shadow: 0 16px 48px rgba(0,0,0,.35), inset 0 0 0 4px rgba(255,255,255,.08);
	}
	
	/* Títulos otimizados para mobile */
	.title { 
		font-size: clamp(22px, 6.5vw, 32px); 
		line-height: 1.2;
		margin-bottom: 12px;
	}
	
	.subtitle { 
		font-size: 15px; 
		line-height: 1.5;
		margin-bottom: 20px;
	}
	
	/* Botões otimizados para mobile */
	.hero .actions { 
		margin-bottom: 16px; 
		gap: 0;
		flex-direction: column;
		align-items: stretch;
	}
	
	.actions .btn { 
		padding: 16px 24px; 
		font-size: 16px; 
		border-radius: 50px;
		min-height: 52px;
	}
	
	/* Esconder o botão principal na primeira dobra no mobile */
	.hero .actions .btn-primary {
		display: none;
	}
	
	/* Ajustar o botão secundário quando o principal estiver escondido */
	.hero .actions .btn-outline {
		margin: 0 auto;
		max-width: 320px;
		width: 100%;
	}
	
	/* Container otimizado para mobile */
	.container { 
		justify-items: center; 
		text-align: center; 
		gap: 20px;
	}
	
	/* Nav hint otimizado para mobile */
	.nav-hint {
		font-size: 11px;
		padding: 4px 10px;
		bottom: calc(env(safe-area-inset-bottom, 0px) + 16px + 56px + 12px);
		left: calc(50% - 100px);
	}
	
	/* Seta otimizada para mobile */
	.arrow-next {
		bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
		width: 52px;
		height: 52px;
	}
	
	/* Crédito extra small mobile */
	.site-credit-inline a {
		font-size: 9px;
		padding: 4px 8px;
		max-width: 100%;
	}
	
	/* Manter animação suave em mobile */
	@keyframes arrowBounce {
		0%, 100% { 
			transform: translateX(-50%) translateY(0);
		}
		50% { 
			transform: translateX(-50%) translateY(-6px);
		}
	}
}

/* Otimizações para telas muito pequenas */
@media (max-width: 360px) {
	.slide { padding: 28px 14px 110px; }
	
	.avatar { 
		width: 120px; 
		height: 120px; 
	}
	
	.title { 
		font-size: clamp(20px, 6vw, 28px); 
	}
	
	.subtitle { 
		font-size: 14px; 
	}
	
	.actions .btn { 
		padding: 14px 18px; 
		font-size: 15px; 
		min-height: 48px;
	}
	
	/* Botão de áudio otimizado para mobile */
	.audio-toggle {
		bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
		right: calc(env(safe-area-inset-right, 0px) + 16px);
		width: 38px;
		height: 38px;
	}
	
	.audio-toggle::before {
		font-size: 11px;
		padding: 6px 10px;
		right: 45px;
	}
	
	/* Nav hint para telas muito pequenas */
	.nav-hint {
		left: calc(50% - 80px);
		font-size: 10px;
		padding: 3px 8px;
	}
	
	/* Seta para telas muito pequenas */
	.arrow-next {
		width: 48px;
		height: 48px;
	}
	
	/* Crédito para telas muito pequenas */
	.site-credit-inline a {
		font-size: 8.5px;
		padding: 4px 6px;
	}
}

/* Estilos para a dobra final - Logotipo e Slogan */
.final-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	text-align: center;
}

.logo-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	max-width: 400px;
}

.logo {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.slogan {
	font-size: 2.5rem;
	font-weight: 700;
	color: #fff;
	margin: 0;
	text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	letter-spacing: -0.5px;
}

.tagline {
	font-size: 1.2rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.9);
	margin: 0;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.countdown {
	margin-top: 16px;
	padding: 16px 24px;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 16px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.countdown p {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
	font-weight: 500;
}

#timer {
	font-weight: 700;
	color: #fff;
	font-size: 1.1rem;
}

/* Link de cancelamento */
.cancel-redirect {
	margin-top: 12px;
}

.cancel-link {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 400;
	padding: 8px 16px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	cursor: pointer;
	font-family: inherit;
	display: inline-block;
}

.cancel-link:hover {
	color: rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
	transform: translateY(-1px);
}

/* Responsividade para a dobra final */
@media (max-width: 560px) {
	.logo { width: 100px; height: 100px; }
	.slogan { font-size: 2rem; }
	.tagline { font-size: 1rem; }
	.countdown { padding: 12px 20px; }
	.countdown p { font-size: 0.9rem; }
	
	/* Link de cancelamento responsivo */
	.cancel-link {
		font-size: 0.85rem;
		padding: 6px 14px;
	}
}