/*
 * Fernanda Fenelon — estilos complementares ao Elementor.
 *
 * Cores, tipografia, espaçamentos e fundos ficam nos próprios widgets/containers
 * do Elementor (editáveis no painel). Aqui ficam só os detalhes visuais que o
 * Elementor não oferece nativamente: pílulas, marcadores, toggles "ON", linha do
 * tempo do método, mockups dos bônus e o acabamento do FAQ.
 */

:root {
	--ff-wine: #661014;
	--ff-wine-deep: #48080e;
	--ff-ink: #0b0b0f;
	--ff-text: #3f3f46;
	--ff-muted: #6b7280;
	--ff-bg: #f8fafc;
	--ff-line: #e8eaef;
	--ff-soft: #f4f5f8;
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--ff-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--ff-wine);
	color: #fff;
}

/* Trecho de título em vinho: <span class="ff-accent">…</span> */
.ff-accent {
	color: var(--ff-wine);
}

.elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

.elementor-widget-text-editor strong {
	color: var(--ff-ink);
	font-weight: 600;
}

/* ---------- Pílula (rótulo de seção) ---------- */
.ff-pill .elementor-heading-title {
	display: inline-block;
	padding: 8px 18px;
	border: 1px solid var(--ff-line);
	border-radius: 999px;
	background: #fff;
	line-height: 1.2;
}

/* ---------- Botões ---------- */
.ff-btn .elementor-button {
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.ff-btn .elementor-button:hover,
.ff-btn .elementor-button:focus-visible {
	transform: translateY(-2px);
}

.ff-btn .elementor-button:focus-visible {
	outline: 2px solid var(--ff-wine);
	outline-offset: 3px;
}

/* ---------- Hero: chips com ponto vinho ---------- */
.ff-chips .elementor-icon-list-items {
	gap: 12px;
	justify-content: center;
}

.ff-chips .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
	margin: 0 !important;
	padding: 10px 18px;
	background: #fff;
	border: 1px solid var(--ff-line);
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.ff-chips .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item::after {
	display: none;
}

/* ---------- Listas com marcador discreto ---------- */
.ff-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ff-list li {
	position: relative;
	padding-left: 16px;
	margin: 0 0 2px;
}

.ff-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.8em;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.8;
}

.ff-list p {
	margin: 0 0 1.1em;
}

.ff-list ul + p {
	margin-top: 1.1em;
}

/* ---------- Para quem é: card com toggle "ON" ---------- */
.ff-check {
	position: relative;
}

.ff-check::after {
	content: "ON";
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	width: 72px;
	height: 36px;
	padding-left: 13px;
	box-sizing: border-box;
	border-radius: 999px;
	background-color: var(--ff-wine);
	background-image: radial-gradient(circle, #fff 0 13px, transparent 14px);
	background-size: 36px 36px;
	background-repeat: no-repeat;
	background-position: right center;
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
	transition: background-color 0.45s ease, background-position 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
	transition-delay: 0.55s;
}

/* ---------- Método Colmeia: linha do tempo ---------- */
.ff-steps {
	position: relative;
}

.ff-steps::before {
	content: "";
	position: absolute;
	top: 36px;
	bottom: 36px;
	left: 17px;
	width: 3px;
	border-radius: 3px;
	/* --ff-progress (0–1) é atualizado pelo site.js conforme a rolagem */
	background: linear-gradient(to bottom, var(--ff-wine) 0 calc(var(--ff-progress, 1) * 100%), #eadfe0 0);
}

.ff-step-num {
	position: relative;
	z-index: 1;
}

.ff-step-num .elementor-heading-title {
	transition: background-color 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ff-wine);
	box-shadow: 0 0 0 6px var(--ff-bg);
}

/* ---------- O que está incluído ---------- */
.ff-included .elementor-icon {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.ff-included .elementor-icon svg {
	width: 1em;
	height: 1em;
}

.ff-included .elementor-icon svg * {
	fill: none !important;
	stroke: var(--ff-wine);
}

/* ---------- Bônus: mockups ilustrativos ---------- */
.ff-mock {
	padding: 18px;
	border: 1px solid var(--ff-line);
	border-radius: 16px;
	background: var(--ff-soft);
}

.ff-mock-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.ff-mock-grid span {
	height: 22px;
	border: 1px solid var(--ff-line);
	border-radius: 6px;
	background: #fff;
}

.ff-mock-grid span.is-on {
	border-color: transparent;
	background: var(--ff-wine);
}

.ff-mock-bars {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 6px 0;
}

.ff-mock-bars span {
	display: block;
	height: 8px;
	border-radius: 8px;
	background: var(--ff-wine);
}

.ff-mock-bars span.is-light {
	height: 6px;
	border: 1px solid var(--ff-line);
	background: #fff;
}

/* ---------- FAQ ---------- */
.ff-faq .e-n-accordion-item {
	margin: 0;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--ff-line);
	border-radius: 20px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ff-faq .e-n-accordion-item:hover,
.ff-faq .e-n-accordion-item[open] {
	border-color: #dcdfe6;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.ff-faq .e-n-accordion-item-title,
.ff-faq .e-n-accordion-item > .e-con {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
}

.ff-faq .e-n-accordion-item-title {
	align-items: center;
	cursor: pointer;
}

.ff-faq .e-n-accordion-item-title-header {
	flex: 1 1 auto;
}

.ff-faq .ff-faq-num {
	display: inline-block;
	min-width: 26px;
	margin-right: 14px;
	color: var(--ff-muted);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.04em;
}

.ff-faq .e-n-accordion-item-title-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 30px;
	width: 30px !important;
	min-width: 30px;
	height: 30px;
	border: 1px solid #eadfe0;
	border-radius: 50%;
	background: #fff;
}

.ff-faq .e-n-accordion-item-title-icon span > svg,
.ff-faq .e-n-accordion-item-title-icon span > i {
	width: 11px;
	height: 11px;
	font-size: 11px;
}

.ff-faq details[open] > .e-n-accordion-item-title {
	padding-bottom: 12px;
}

/* ---------- Rodapé ---------- */
.ff-social .elementor-icon-list-items {
	justify-content: center;
	gap: 28px;
}

.ff-social .elementor-icon-list-item {
	margin: 0 !important;
}

.ff-social .elementor-icon-list-item::after {
	display: none;
}

.ff-social a {
	transition: opacity 0.2s ease;
}

.ff-social a:hover {
	opacity: 0.75;
}

/* ---------- Responsivo ---------- */
@media (max-width: 767px) {
	.ff-chips .elementor-icon-list-items {
		gap: 8px;
	}

	.ff-chips .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
		padding: 8px 14px;
	}

	.ff-check::after {
		width: 58px;
		height: 30px;
		padding-left: 10px;
		font-size: 8px;
		background-size: 30px 30px;
		background-image: radial-gradient(circle, #fff 0 10.5px, transparent 11.5px);
	}

	.ff-faq .ff-faq-num {
		display: block;
		margin: 0 0 4px;
	}
}

/* =====================================================================
 * Movimento
 * ===================================================================== */

/* Nada "vaza" para os lados durante as animações de entrada. */
body {
	overflow-x: clip;
}

/*
 * Animações de entrada do Elementor, mais suaves: deslocamento curto e
 * desaceleração natural (o padrão do Elementor desloca 100% do elemento).
 */
.elementor-element.animated.animated-fast {
	animation-duration: 0.9s;
	animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.elementor-element.animated.fadeInUp {
	animation-name: ffFadeInUp;
}

.elementor-element.animated.fadeInLeft {
	animation-name: ffFadeInLeft;
}

.elementor-element.animated.fadeInRight {
	animation-name: ffFadeInRight;
}

.elementor-element.animated.zoomIn {
	animation-name: ffZoomIn;
}

@keyframes ffFadeInUp {
	from { opacity: 0; transform: translate3d(0, 32px, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes ffFadeInLeft {
	from { opacity: 0; transform: translate3d(-32px, 0, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes ffFadeInRight {
	from { opacity: 0; transform: translate3d(32px, 0, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes ffZoomIn {
	from { opacity: 0; transform: scale(0.94); }
	to { opacity: 1; transform: none; }
}

/* ---------- Hover dos cards (usa `translate`, que não briga com as animações) ---------- */
.ff-card {
	transition: translate 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.ff-card:hover {
	translate: 0 -4px;
	box-shadow: 0 18px 44px rgba(15, 23, 42, 0.09) !important;
	border-color: #dcdfe6 !important;
}

.ff-included-card {
	transition: translate 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.35s ease;
}

.ff-included-card:hover {
	translate: 0 -4px;
	background-color: #741319 !important;
}

.ff-included .elementor-icon {
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ff-included-card:hover .elementor-icon {
	transform: rotate(-6deg) scale(1.08);
}

/* ---------- Imagens: zoom lento no hover ---------- */
.ff-zoom {
	overflow: hidden;
}

.ff-zoom img {
	transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ff-zoom:hover img {
	transform: scale(1.025);
}

/* ---------- Botões: brilho que atravessa no hover ---------- */
.ff-btn .elementor-button {
	position: relative;
	overflow: hidden;
}

.ff-btn .elementor-button::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
	transform: skewX(-20deg);
	pointer-events: none;
}

.ff-btn .elementor-button:hover::after {
	animation: ffShine 0.9s ease;
}

@keyframes ffShine {
	to { left: 130%; }
}

/* ---------- FAQ: resposta desliza ao abrir ---------- */
.ff-faq details[open] > .e-con {
	animation: ffFadeInUp 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ff-faq .e-n-accordion-item-title-icon {
	transition: transform 0.35s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.ff-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon {
	border-color: var(--ff-wine);
}

.ff-faq details[open] .e-n-accordion-item-title-icon {
	transform: rotate(180deg);
}

/*
 * Estados iniciais dos efeitos com JS. Só valem com a classe .ff-motion no
 * <html> (colocada pelo tema quando o visitante não pediu "reduzir movimento");
 * sem ela, tudo aparece no estado final.
 */
.ff-motion .ff-check:not(.is-inview)::after {
	background-color: #d9dce3;
	background-position: left center;
	color: transparent;
	transition-delay: 0s;
}

.ff-motion .ff-steps .ff-step-num:not(.is-reached) .elementor-heading-title {
	background-color: #d9c5c7;
	transform: scale(0.86);
}

.ff-motion .ff-chips .elementor-icon-list-item {
	transition: opacity 0.5s ease, translate 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ff-motion .ff-chips:not(.is-inview) .elementor-icon-list-item {
	opacity: 0;
	translate: 0 12px;
}

.ff-chips .elementor-icon-list-item:nth-child(1) { transition-delay: 0.45s; }
.ff-chips .elementor-icon-list-item:nth-child(2) { transition-delay: 0.55s; }
.ff-chips .elementor-icon-list-item:nth-child(3) { transition-delay: 0.65s; }
.ff-chips .elementor-icon-list-item:nth-child(4) { transition-delay: 0.75s; }
.ff-chips .elementor-icon-list-item:nth-child(5) { transition-delay: 0.85s; }

.ff-mock-bars span {
	transition: width 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ff-motion .ff-mock:not(.is-inview) .ff-mock-bars span {
	width: 0 !important;
}

.ff-mock-bars span:nth-child(2) { transition-delay: 0.15s; }
.ff-mock-bars span:nth-child(3) { transition-delay: 0.3s; }
.ff-mock-bars span:nth-child(4) { transition-delay: 0.45s; }

.ff-mock-grid span {
	transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ff-motion .ff-mock:not(.is-inview) .ff-mock-grid span.is-on {
	border-color: var(--ff-line);
	background: #fff;
	transform: scale(0.9);
}

.ff-mock-grid span.is-on:nth-child(1) { transition-delay: 0.3s; }
.ff-mock-grid span.is-on:nth-child(6) { transition-delay: 0.7s; }

/* Parallax leve da foto do hero (valor definido pelo site.js). */
.ff-hero-img img {
	translate: 0 var(--ff-parallax, 0);
	scale: 1.06;
}

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

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.ff-card:hover,
	.ff-included-card:hover {
		translate: none;
	}

	.ff-hero-img img {
		translate: none;
		scale: none;
	}
}