/* ===== Traventia — Home Pública (Sprint UI/UX) ===== */

.tv-section { padding: var(--tv-space-24) 0; }
.tv-section-alt { background: var(--tv-bg-alt); }

.tv-section-title {
	font-size: var(--tv-text-3xl);
	text-align: center;
	margin-bottom: var(--tv-space-12);
}

/* ===== Hero ===== */

.tv-hero {
	position: relative;
	overflow: hidden;
	--tv-parallax-y: 0px;
	padding: var(--tv-space-24) 0 var(--tv-space-16);
	background: linear-gradient(180deg, var(--tv-primary-light) 0%, var(--tv-bg) 100%);
	text-align: center;
}

.tv-hero::before {
	content: "";
	position: absolute;
	top: -30%;
	left: 50%;
	width: 900px;
	height: 900px;
	background: radial-gradient(circle, rgba(201, 162, 122, 0.16) 0%, transparent 70%);
	transform: translate(-50%, var(--tv-parallax-y));
	pointer-events: none;
	z-index: 0;
}

.tv-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }

.tv-hero-title {
	font-size: var(--tv-text-5xl);
	font-weight: var(--tv-font-bold);
	letter-spacing: -0.02em;
}

.tv-hero-subtitle {
	font-size: var(--tv-text-lg);
	color: var(--tv-text-muted);
	margin-bottom: var(--tv-space-8);
}

.tv-hero-busca { max-width: 640px; margin: 0 auto; }

.tv-hero-cta-secundaria {
	display: inline-block;
	margin-top: var(--tv-space-6);
	font-size: var(--tv-text-sm);
	font-weight: var(--tv-font-semibold);
	color: var(--tv-primary);
	text-decoration: none;
	border-bottom: 1px solid var(--tv-border-gold);
	padding-bottom: 2px;
	transition: color var(--tv-transition-fast), border-color var(--tv-transition-fast);
}

.tv-hero-cta-secundaria:hover { color: var(--tv-primary-dark); border-color: var(--tv-primary-dark); }

.tv-hero-scroll-indicator {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 26px;
	height: 42px;
	margin: var(--tv-space-12) auto 0;
	border: 2px solid var(--tv-border-gold);
	border-radius: var(--tv-radius-full);
}

.tv-hero-scroll-indicator-dot {
	width: 4px;
	height: 8px;
	margin-top: 6px;
	border-radius: var(--tv-radius-full);
	background: var(--tv-primary);
	animation: tv-scroll-bounce 1.6s ease-in-out infinite;
}

@keyframes tv-scroll-bounce {
	0%, 100% { transform: translateY(0); opacity: 1; }
	50% { transform: translateY(14px); opacity: 0.3; }
}

@media (max-width: 767px) {
	.tv-hero-title { font-size: var(--tv-text-3xl); }
	.tv-hero { padding: var(--tv-space-16) 0 var(--tv-space-12); }
	.tv-hero-scroll-indicator { margin-top: var(--tv-space-8); }
}

@media (min-width: 1280px) {
	.tv-hero-title { font-size: 3.75rem; }
}

@media (prefers-reduced-motion: reduce) {
	.tv-hero::before { transform: translate(-50%, 0); }
	.tv-hero-scroll-indicator-dot { animation: none; }
}

/* ===== Busca ===== */

.tv-search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tv-space-3);
	background: var(--tv-surface);
	padding: var(--tv-space-3);
	border-radius: var(--tv-radius-lg);
	box-shadow: var(--tv-shadow-lg);
}

.tv-search-form .tv-field { flex: 1 1 160px; }
.tv-search-field-keyword { flex-basis: 220px; }
.tv-search-form .tv-btn { flex-shrink: 0; }

@media (max-width: 767px) {
	.tv-search-form { flex-direction: column; box-shadow: var(--tv-shadow-md); }
}

/* ===== Slider ===== */

.tv-slider {
	display: flex;
	gap: var(--tv-space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--tv-space-4);
	padding-bottom: var(--tv-space-2);
	-webkit-overflow-scrolling: touch;
}

.tv-slider-item { flex: 0 0 260px; scroll-snap-align: start; }

/* ===== Grid de resultados ===== */

.tv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--tv-space-6);
}

/* ===== Categorias / Cidades (tags) ===== */

.tv-tags-grid { display: flex; flex-wrap: wrap; gap: var(--tv-space-3); justify-content: center; }

.tv-tag {
	display: inline-block;
	padding: 10px 20px;
	border-radius: var(--tv-radius-full);
	background: var(--tv-bg-alt);
	color: var(--tv-text);
	text-decoration: none;
	font-size: var(--tv-text-sm);
	font-weight: var(--tv-font-medium);
	border: 1px solid var(--tv-border);
	transition: background-color var(--tv-transition-fast), border-color var(--tv-transition-fast), color var(--tv-transition-fast);
}

.tv-tag:hover { background: var(--tv-primary); border-color: var(--tv-primary); color: var(--tv-primary-contrast); }

/* ===== Benefícios ===== */

.tv-benefits-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--tv-space-8);
}

.tv-benefit-card { text-align: center; }

.tv-benefit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--tv-radius-full);
	background: var(--tv-primary-light);
	color: var(--tv-primary-dark);
	margin-bottom: var(--tv-space-4);
}

.tv-benefit-icon svg { width: 26px; height: 26px; }

.tv-benefit-title { font-size: var(--tv-text-lg); margin-bottom: var(--tv-space-1); }
.tv-benefit-text { color: var(--tv-text-muted); font-size: var(--tv-text-sm); margin: 0; }

/* ===== Como funciona ===== */

.tv-steps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--tv-space-8);
}

.tv-step-card { text-align: center; }

.tv-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--tv-radius-full);
	background: var(--tv-primary);
	color: var(--tv-primary-contrast);
	font-weight: var(--tv-font-bold);
	font-size: var(--tv-text-lg);
	margin-bottom: var(--tv-space-4);
}

.tv-step-title { font-size: var(--tv-text-lg); margin-bottom: var(--tv-space-1); }
.tv-step-text { color: var(--tv-text-muted); font-size: var(--tv-text-sm); margin: 0; }

/* ===== FAQ ===== */

.tv-faq { max-width: 720px; }

.tv-faq-item {
	border-bottom: 1px solid var(--tv-border);
	padding: var(--tv-space-4) 0;
}

.tv-faq-question {
	cursor: pointer;
	font-weight: var(--tv-font-semibold);
	list-style: none;
}

.tv-faq-question::-webkit-details-marker { display: none; }

.tv-faq-question::after {
	content: "+";
	float: right;
	font-weight: var(--tv-font-normal);
	color: var(--tv-primary-dark);
}

.tv-faq-item[open] .tv-faq-question::after { content: "–"; }

.tv-faq-answer { color: var(--tv-text-muted); margin: var(--tv-space-3) 0 0; }

/* Custo de reflow de animar altura é caro — em vez disso, só o conteúdo
   revelado recebe um fade-in leve (opacity, GPU-friendly). */
.tv-faq-item[open] .tv-faq-answer { animation: tv-fade-in var(--tv-transition-slow) ease both; }

@media (prefers-reduced-motion: reduce) {
	.tv-faq-item[open] .tv-faq-answer { animation: none; }
}

/* ===== Depoimentos — carrossel (usa data-tv="carousel", ver traventia-carousel.js) ===== */

.tv-carousel { max-width: 720px; margin: 0 auto; }

.tv-carousel-track { position: relative; display: grid; }

.tv-carousel-slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--tv-transition-slow);
	pointer-events: none;
}

.tv-carousel-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

.tv-testimonial { margin: 0; text-align: center; }

.tv-testimonial-texto {
	font-size: var(--tv-text-xl);
	line-height: var(--tv-leading-relaxed);
	color: var(--tv-text-heading);
	margin: 0 0 var(--tv-space-6);
}

.tv-testimonial-autor { display: flex; align-items: center; justify-content: center; gap: var(--tv-space-3); }
.tv-testimonial-nome { display: block; font-style: normal; font-weight: var(--tv-font-semibold); color: var(--tv-text); }
.tv-testimonial-cidade { display: block; font-size: var(--tv-text-xs); color: var(--tv-text-muted); }

.tv-carousel-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--tv-space-4);
	margin-top: var(--tv-space-8);
}

.tv-carousel-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: var(--tv-radius-full);
	border: 1px solid var(--tv-border);
	background: var(--tv-surface);
	color: var(--tv-text);
	font-size: var(--tv-text-xl);
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--tv-transition-fast), color var(--tv-transition-fast);
}

.tv-carousel-arrow:hover { border-color: var(--tv-primary); color: var(--tv-primary); }

.tv-carousel-dots { display: flex; align-items: center; gap: var(--tv-space-2); }

.tv-carousel-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border-radius: var(--tv-radius-full);
	border: none;
	background: var(--tv-border-strong);
	cursor: pointer;
	transition: background-color var(--tv-transition-fast), transform var(--tv-transition-fast);
}

.tv-carousel-dot[aria-selected="true"] { background: var(--tv-primary); transform: scale(1.3); }

@media (prefers-reduced-motion: reduce) {
	.tv-carousel-slide { transition: none; }
}

/* ===== CTA ===== */

.tv-cta {
	background: var(--tv-bg-alt);
	color: var(--tv-text-heading);
	padding: var(--tv-space-16) 0;
	text-align: center;
}

.tv-cta-title { font-size: var(--tv-text-3xl); color: var(--tv-text-heading); }
.tv-cta-text { color: var(--tv-text-muted); margin-bottom: var(--tv-space-6); }

/* ===== Rodapé ===== */

.tv-footer {
	background: var(--tv-bg-alt);
	border-top: 1px solid var(--tv-border-gold);
	padding: var(--tv-space-12) 0;
}

.tv-footer-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--tv-space-4);
}

.tv-footer-brand { display: flex; flex-direction: column; gap: var(--tv-space-1); }

.tv-footer-brand-name {
	font-size: var(--tv-text-xl);
	font-weight: var(--tv-font-bold);
	color: var(--tv-text-heading);
	letter-spacing: 0.02em;
}

.tv-footer-brand-text { color: var(--tv-text-muted); font-size: var(--tv-text-sm); margin: 0; }

.tv-footer-links { display: flex; gap: var(--tv-space-6); }
.tv-footer-links a { text-decoration: none; font-size: var(--tv-text-sm); color: var(--tv-text-muted); transition: color var(--tv-transition-fast); }
.tv-footer-links a:hover { color: var(--tv-primary); }

.tv-footer-copy { font-size: var(--tv-text-xs); color: var(--tv-text-muted); width: 100%; text-align: center; margin-top: var(--tv-space-6); padding-top: var(--tv-space-6); border-top: 1px solid var(--tv-border); }

/* ===== Placeholder de mapa (preparado, sem integração real) ===== */

.tv-map-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 280px;
	border-radius: var(--tv-radius-lg);
	background: var(--tv-bg-alt);
	color: var(--tv-text-muted);
	font-size: var(--tv-text-sm);
	border: 1px dashed var(--tv-border);
}