/* ===== Traventia — Página "Sobre Nós" (Redesign Premium) ===== */

/* Mesma causa raiz já documentada em assets/css/pages/auth.css: esta
   página é uma Page WP "pura" (sem Elementor) — o tema renderiza o
   próprio título nativo em H1 por cima do nosso Hero (duplicado, o Hero
   já tem o título). Mesma técnica de :has() já usada lá. */
body:has(.tv-about-hero) {
	background: var(--tv-bg);
}

body:has(.tv-about-hero) .wp-block-post-title {
	display: none;
}

/* Causa raiz do menu/rodapé "espremidos" e desalinhados nesta página: como
   é uma Page WP "pura" (sem Elementor), cada shortcode ([traventia_navbar],
   [traventia_sobre_nos], [traventia_footer]) vira um bloco filho direto de
   um container ".is-layout-constrained" do tema — e o WordPress aplica
   `max-width: 700px` (var --wp--style--global--content-size) a QUALQUER
   filho direto que não tenha a classe alignwide/alignfull, encolhendo e
   centralizando navbar/hero/rodapé para uma coluna de 700px. As páginas
   Elementor Canvas (Home, Cadastro, Planos) nunca tiveram esse problema
   porque não passam por esse container do tema. Neutraliza a regra do
   tema só nesta página, restaurando a largura cheia igual às demais. */
body:has(.tv-about-hero) .entry-content.is-layout-constrained > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ===== Hero — apresentação institucional ===== */

.tv-about-hero {
	position: relative;
	overflow: hidden;
	padding: var(--tv-space-24) 0 var(--tv-space-20);
	background: radial-gradient(ellipse 900px 500px at 15% 20%, rgba(201, 162, 122, 0.08), transparent 60%);
}

.tv-about-hero-fx {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.tv-about-hero-orb {
	position: absolute;
	border-radius: var(--tv-radius-full);
	filter: blur(90px);
	opacity: 0.5;
}

.tv-about-hero-orb-1 {
	width: 420px;
	height: 420px;
	top: -140px;
	right: -100px;
	background: radial-gradient(circle, rgba(201, 162, 122, 0.22) 0%, transparent 70%);
}

.tv-about-hero-orb-2 {
	width: 340px;
	height: 340px;
	bottom: -160px;
	left: -80px;
	background: radial-gradient(circle, rgba(125, 184, 245, 0.12) 0%, transparent 70%);
}

.tv-about-hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--tv-space-12);
	align-items: center;
}

.tv-about-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--tv-space-2);
	font-size: var(--tv-text-xs);
	font-weight: var(--tv-font-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tv-primary);
	margin-bottom: var(--tv-space-5);
}

.tv-about-hero-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--tv-primary);
	border-radius: var(--tv-radius-full);
}

.tv-about-hero-titulo {
	font-size: var(--tv-text-4xl);
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin-bottom: var(--tv-space-5);
}

.tv-about-hero-highlight {
	color: var(--tv-primary);
	background: linear-gradient(135deg, var(--tv-primary) 0%, var(--tv-primary-dark) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.tv-about-hero-subtitulo {
	font-size: var(--tv-text-lg);
	color: var(--tv-text-muted);
	line-height: var(--tv-leading-relaxed);
	max-width: 46ch;
}

.tv-about-hero-foto-frame {
	position: relative;
	max-width: 420px;
	margin: 0 auto;
	padding: var(--tv-space-2);
	border-radius: var(--tv-radius-xl);
	background: linear-gradient(160deg, rgba(201, 162, 122, 0.35), rgba(201, 162, 122, 0.04));
	box-shadow: var(--tv-shadow-xl);
}

.tv-about-hero-foto-frame img {
	width: 100%;
	border-radius: calc(var(--tv-radius-xl) - 6px);
	display: block;
}

@media (min-width: 900px) {
	.tv-about-hero {
		padding: var(--tv-space-24) 0;
	}

	.tv-about-hero-grid { grid-template-columns: 1.15fr 0.85fr; }
	.tv-about-hero-titulo { font-size: var(--tv-text-5xl); }
}

/* ===== Corpo de texto ("Quem somos") — mesma largura de leitura
   confortável já usada no artigo de blog (Sprint Blog). ===== */

.tv-about-texto {
	max-width: 720px;
	margin: 0 auto;
	font-size: var(--tv-text-lg);
	line-height: var(--tv-leading-relaxed);
}

.tv-about-texto p + p { margin-top: var(--tv-space-6); }

/* ===== Missão / Visão — secções dedicadas, mesmo padrão ===== */

.tv-about-pilar {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.tv-about-pilar-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: var(--tv-radius-full);
	background: linear-gradient(135deg, var(--tv-primary) 0%, var(--tv-primary-dark) 100%);
	color: var(--tv-primary-contrast);
	box-shadow: 0 0 0 8px var(--tv-primary-light), var(--tv-shadow-md);
	margin-bottom: var(--tv-space-6);
}

.tv-about-pilar-icone svg { width: 32px; height: 32px; }

.tv-about-pilar-titulo {
	font-size: var(--tv-text-3xl);
	margin-bottom: var(--tv-space-4);
}

.tv-about-pilar-texto {
	font-size: var(--tv-text-xl);
	color: var(--tv-text-muted);
	line-height: var(--tv-leading-relaxed);
}

@media (min-width: 768px) {
	.tv-about-pilar-titulo { font-size: var(--tv-text-4xl); }
}

/* ===== Números da plataforma — valores vêm do PHP (Templates/about.php +
   Languages/pt.php), nunca fixos aqui no CSS. ===== */

.tv-about-numeros {
	position: relative;
	overflow: hidden;
}

.tv-about-numeros-fx {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 900px;
	height: 900px;
	background: radial-gradient(circle, rgba(201, 162, 122, 0.1) 0%, transparent 70%);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.tv-about-numeros-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--tv-space-6);
}

.tv-about-numero-card {
	text-align: center;
	padding: var(--tv-space-8) var(--tv-space-4);
	border-radius: var(--tv-radius-lg);
	background: var(--tv-surface);
	border: 1px solid var(--tv-border);
	transition: transform var(--tv-transition-slow), box-shadow var(--tv-transition-slow), border-color var(--tv-transition-slow);
}

.tv-about-numero-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--tv-shadow-glow);
	border-color: var(--tv-border-gold);
}

.tv-about-numero-valor {
	display: block;
	font-size: var(--tv-text-4xl);
	font-weight: var(--tv-font-bold);
	color: var(--tv-primary);
	margin-bottom: var(--tv-space-2);
}

.tv-about-numero-label {
	display: block;
	font-size: var(--tv-text-sm);
	color: var(--tv-text-muted);
}

@media (min-width: 768px) {
	.tv-about-numeros-grid { grid-template-columns: repeat(4, 1fr); }
	.tv-about-numero-valor { font-size: var(--tv-text-5xl); }
}

/* ===== Timeline — horizontal no desktop, vertical no mobile (mesma
   linguagem visual de .tv-timeline em home.css, adaptada a 5 passos). ===== */

.tv-about-timeline {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--tv-space-8);
}

.tv-about-timeline-step { position: relative; text-align: center; }

.tv-about-timeline-number {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--tv-radius-full);
	background: linear-gradient(135deg, var(--tv-primary) 0%, var(--tv-primary-dark) 100%);
	color: var(--tv-primary-contrast);
	font-weight: var(--tv-font-bold);
	font-size: var(--tv-text-lg);
	margin-bottom: var(--tv-space-4);
	box-shadow: 0 0 0 6px var(--tv-primary-light);
	transition: transform var(--tv-transition-slow), box-shadow var(--tv-transition-slow);
}

.tv-about-timeline-step:hover .tv-about-timeline-number {
	transform: scale(1.08);
	box-shadow: 0 0 0 6px var(--tv-primary-light), var(--tv-shadow-glow);
}

.tv-about-timeline-number-objetivo {
	background: var(--tv-surface);
	border: 1.5px solid var(--tv-border-gold);
	color: var(--tv-primary);
	box-shadow: 0 0 0 6px var(--tv-primary-light), var(--tv-shadow-glow);
}

.tv-about-timeline-number-objetivo svg { width: 24px; height: 24px; }

.tv-about-timeline-title { font-size: var(--tv-text-lg); margin-bottom: var(--tv-space-1); }
.tv-about-timeline-text { color: var(--tv-text-muted); font-size: var(--tv-text-sm); margin: 0; max-width: 32ch; margin-inline: auto; }

.tv-about-timeline-step-objetivo .tv-about-timeline-title { color: var(--tv-primary); }

.tv-about-timeline-step:not(:last-child)::after {
	content: "↓";
	display: block;
	margin-top: var(--tv-space-4);
	font-size: var(--tv-text-xl);
	color: var(--tv-border-gold);
	line-height: 1;
}

@media (min-width: 1024px) {
	.tv-about-timeline {
		grid-template-columns: repeat(5, 1fr);
		gap: var(--tv-space-6);
		align-items: start;
	}

	.tv-about-timeline-step:not(:first-child)::before {
		content: "";
		position: absolute;
		top: 27px;
		right: 100%;
		width: var(--tv-space-6);
		height: 2px;
		background: linear-gradient(90deg, transparent, var(--tv-primary));
	}

	.tv-about-timeline-step:not(:last-child)::after {
		content: "";
		position: absolute;
		display: block;
		top: 27px;
		left: 100%;
		width: var(--tv-space-6);
		height: 2px;
		margin: 0;
		background: linear-gradient(90deg, var(--tv-primary), transparent);
	}
}

/* ===== Diferenciais — comparação em duas colunas ===== */

.tv-about-diferenciais-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--tv-space-4);
	max-width: 840px;
	margin: 0 auto;
}

.tv-about-diferenciais-col {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--tv-space-3);
}

.tv-about-diferenciais-col li {
	display: flex;
	align-items: center;
	gap: var(--tv-space-3);
	padding: var(--tv-space-4) var(--tv-space-5);
	background: var(--tv-surface);
	border: 1px solid var(--tv-border);
	border-radius: var(--tv-radius-md);
	font-size: var(--tv-text-base);
	color: var(--tv-text);
	transition: border-color var(--tv-transition-base), transform var(--tv-transition-base);
}

.tv-about-diferenciais-col li:hover {
	border-color: var(--tv-border-gold);
	transform: translateX(4px);
}

.tv-about-diferenciais-col li svg {
	width: 20px;
	height: 20px;
	color: var(--tv-primary);
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.tv-about-diferenciais-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.tv-about-numero-card,
	.tv-about-timeline-number,
	.tv-about-diferenciais-col li {
		transition: none;
	}
}

/* ===== Valores — versão premium escopada só a esta página (via :has(),
   mesma técnica do fix de título acima), sem alterar o componente
   .tv-benefit-card-premium usado também na Home/Cadastro. ===== */

body:has(.tv-about-hero) .tv-benefit-card-premium {
	padding: var(--tv-space-12) var(--tv-space-8);
	background: var(--tv-surface);
	box-shadow: var(--tv-shadow-sm);
	transition: transform var(--tv-transition-slow), box-shadow var(--tv-transition-slow), border-color var(--tv-transition-slow);
}

body:has(.tv-about-hero) .tv-benefit-card-premium:hover {
	transform: translateY(-6px);
	box-shadow: var(--tv-shadow-glow);
	border-color: var(--tv-border-gold);
}

body:has(.tv-about-hero) .tv-benefit-icon {
	width: 68px;
	height: 68px;
	background: linear-gradient(135deg, var(--tv-primary) 0%, var(--tv-primary-dark) 100%);
	color: var(--tv-primary-contrast);
}

body:has(.tv-about-hero) .tv-benefit-icon svg { width: 30px; height: 30px; }

body:has(.tv-about-hero) .tv-benefit-title { font-size: var(--tv-text-xl); }
body:has(.tv-about-hero) .tv-benefit-text { font-size: var(--tv-text-base); }

@media (prefers-reduced-motion: reduce) {
	body:has(.tv-about-hero) .tv-benefit-card-premium { transition: none; }
}