/**
 * Homepage Base & Design Tokens
 * TreinaCOM Core - Impeccable Design Standard
 */

:root {
	--tc-color-primary: #f9ae02;
	--tc-color-primary-hover: #e09d02;
	--tc-color-dark: #082c4b;
	--tc-color-dark-surface: #0f172a;
	--tc-color-text-main: #1e293b;
	--tc-color-text-muted: #64748b;
	--tc-color-bg-light: #f8fafc;
	--tc-color-border: #e2e8f0;
	--tc-color-card-bg: #ffffff;
	--tc-radius-sm: 8px;
	--tc-radius-md: 12px;
	--tc-radius-lg: 16px;
	--tc-radius-full: 9999px;
	--tc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
	--tc-shadow-md: 0 4px 12px rgba(8, 44, 75, 0.08);
	--tc-shadow-lg: 0 10px 25px -3px rgba(8, 44, 75, 0.12);
	--tc-font-display: 'Play', 'Exo 2', sans-serif;
	--tc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html,
body {
	overflow-x: hidden !important;
	max-width: 100vw !important;
}

.tc-homepage-wrapper {
	width: 100%;
	background-color: #fbfcfe;
	color: var(--tc-color-text-main);
	font-family: var(--tc-font-body);
	overflow-x: clip !important;
}

/* Blindagem total contra menus crus legados do Divi */
#main-header:not(#dct-header),
#top-header,
#et-top-navigation,
#et-secondary-nav,
.et_mobile_menu,
#mobile_menu_slide,
body.home #main-header:not(#dct-header),
body.home #top-header {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	max-height: 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.tc-container {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.tc-container {
		padding: 0 16px;
	}
}

.tc-section {
	padding: 56px 0;
	position: relative;
}

@media (max-width: 768px) {
	.tc-section {
		padding: 36px 0;
	}
}

.tc-section:nth-child(even) {
	background-color: #ffffff;
}

.tc-section:nth-child(odd) {
	background-color: #f8fafc;
}

/* Tipografia e Títulos de Seção */
.tc-section__header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 36px auto;
}

.tc-section__header-flex {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 28px;
	gap: 16px;
}

@media (max-width: 640px) {
	.tc-section__header-flex {
		display: flex !important;
		flex-direction: row !important;
		align-items: flex-end !important;
		justify-content: space-between !important;
		margin-bottom: 16px !important;
		gap: 8px !important;
	}
	.tc-subrow-title-wrap {
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}
	.tc-subrow-heading {
		font-size: 18px !important;
		line-height: 1.25 !important;
		margin: 0 !important;
	}
}

.tc-section__title {
	font-family: var(--tc-font-display);
	font-size: 32px;
	font-weight: 700;
	color: var(--tc-color-dark);
	margin: 0 0 8px 0;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

@media (max-width: 768px) {
	.tc-section__title {
		font-size: 25px;
	}
}

.tc-section__subtitle {
	font-size: 17px;
	color: var(--tc-color-text-muted);
	margin: 0;
	line-height: 1.55;
}

@media (max-width: 768px) {
	.tc-section__subtitle {
		font-size: 15px;
	}
}

.tc-section__tag {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 4px 12px;
	border-radius: var(--tc-radius-full);
	margin-bottom: 10px;
}

.tc-section__tag--promo { background: #fee2e2; color: #dc2626; }
.tc-section__tag--popular { background: #fef3c7; color: #d97706; }
.tc-section__tag--new { background: #e0e7ff; color: #4338ca; }
.tc-section__tag--pack { background: #f3e8ff; color: #7e22ce; }
.tc-section__tag--featured { background: #dcfce7; color: #15803d; }
.tc-section__tag--health { background: #ccfbf1; color: #0f766e; }

.tc-section__kicker-clean {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--tc-color-primary);
	letter-spacing: 0.06em;
	margin-bottom: 8px;
}

/* ==========================================================================
   Animações de Scroll Reveal em Cascata Rápida (Stagger Effect 1 por 1)
   ========================================================================== */
.tc-section:not(#tc-hero-slider-wrap) {
	content-visibility: auto;
	contain-intrinsic-size: 1px 600px;
}

.tc-reveal-header,
.tc-reveal-item {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.tc-revealed.tc-reveal-header,
.tc-revealed.tc-reveal-item,
.tc-revealed .tc-reveal-header,
.tc-revealed .tc-reveal-item {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

/* Cards individuais - Revelação 1 por 1 rápida e fluida */
.tc-reveal-card,
.tc-product-card,
.tc-photo-card,
.tc-routine-card,
.tc-rental-card,
.tc-bento-card,
.tc-flash-hero-card,
.tc-training-hero-card {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1), transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
	will-change: opacity, transform;
}

.tc-reveal-card.tc-revealed,
.tc-product-card.tc-revealed,
.tc-photo-card.tc-revealed,
.tc-routine-card.tc-revealed,
.tc-rental-card.tc-revealed,
.tc-bento-card.tc-revealed,
.tc-flash-hero-card.tc-revealed,
.tc-training-hero-card.tc-revealed {
	opacity: 1 !important;
	transform: translateY(0) !important;
}