/* --- 1. CONFIGURAÇÕES GLOBAIS E VARIÁVEIS --- */
:root {
	--azul-oxford: #1b263b;
	--dourado: #b89a67;
	--dourado-soft: rgba(184, 154, 103, 0.25);
	--dourado-glow: rgba(184, 154, 103, 0.4);
	--branco: #ffffff;
	--off-white: #faf9f6;
	--cinza-suave: #f8f9fa;
	--texto: #2d2d2d;
	--whatsapp: #25d366;
	--fonte-serif: 'Cormorant Garamond', serif;
	--fonte-sans: 'Montserrat', sans-serif;
	--radius: 0.8rem;
	font-size: 62.5%; /* 1rem = 10px */
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: var(--fonte-sans);
	font-size: 1.6rem;
	color: var(--texto);
	line-height: 1.6;
	background-color: var(--branco);
	overflow-x: hidden;
}

.padding-bottom-lg {
	padding-bottom: 8rem;
}

.padding-bottom-md {
	padding-bottom: 4rem;
}

.padding-bottom-sm {
	margin-bottom: 2rem;
}

.padding-top-lg {
	padding-top: 8rem;
}

.padding-top-md {
	padding-top: 4rem;
}

.padding-top-sm {
	padding-top: 2rem;
}

/* --- 2. TIPOGRAFIA E ELEMENTOS BASE --- */
h1,
h2,
h3,
.section-title {
	font-family: var(--fonte-serif);
	font-style: italic;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.1;
	color: var(--dourado);
	font-size: 4rem;
	text-align: center;
}

h4 {
	font-family: var(--fonte-sans);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.1;
	color: var(--dourado);
	font-size: 2.3rem;
	margin-bottom: 1.5rem;
}

p {
	text-align: justify;
	/* Nota: Cores e tamanhos definidos aqui podem ser sobrescritos por classes específicas abaixo (ex: .hero p, .service-card p) */
}

/* --- ACESSIBILIDADE (SKIP LINK & FOCUS) --- */
.skip-link {
	position: absolute;
	top: -40rem;
	left: 0;
	background: var(--dourado);
	color: var(--azul-oxford);
	padding: 1rem 2rem;
	z-index: 10000;
	font-weight: bold;
	text-decoration: none;
	transition: top 0.3s;
}

.skip-link:focus {
	top: 0;
}

/* Foco visível e elegante para navegação por teclado */
:focus-visible {
	outline: 0.2rem solid var(--dourado);
	outline-offset: 0.4rem;
}

.language-switcher-fixed {
	position: fixed;
	top: 2rem;
	right: 5%; /* Alinhado à direita para não bater no logo */
	z-index: 9999; /* Garante que fique acima de tudo */
	background: rgba(10, 20, 32, 0.7); /* Azul Oxford transparente */
	backdrop-filter: blur(1rem);
	padding: 0.8rem 1.5rem;
	border-radius: 5rem;
	border: 0.1rem solid rgba(184, 154, 103, 0.3);
	display: flex;
	align-items: center;
	gap: 1rem;
}

.lang-btn {
	background: none;
	border: none;
	color: var(--branco);
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 1.2rem;
	cursor: pointer;
	transition: color 0.3s ease;
	padding: 0;
}

.lang-btn:hover {
	color: var(--dourado);
}

.separator {
	color: var(--dourado);
	opacity: 0.5;
	font-size: 1.2rem;
}

/* Estilo para o botão da língua que está ativa */
.lang-btn.active {
	color: var(--dourado);
	text-decoration: underline;
}

.container {
	width: 100%;
	max-width: 115rem;
	margin: 0 auto;
	padding: 0 5%;
}

/* --- 3. COMPONENTES REUTILIZÁVEIS --- */
.reveal {
	opacity: 0;
	transform: translateY(3rem);
	transition: 1s all ease;
}

.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

/* --- 4. HERO SECTION --- */
.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	z-index: 1;
}

.video-container {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

#heroVideo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.3) contrast(1.1);
	background-color: var(--azul-oxford);
}

.hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8rem;
	align-items: stretch;
}

.hero h1 {
	font-size: 5.4rem;
	color: var(--branco);
	text-align: left;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.hero p {
	font-size: 1.9rem;
	color: var(--off-white);
	margin: 4rem 0 3.5rem;
	text-align: left;
}

.hero-image-container {
	position: relative;
	height: 100%;
}

.hero-image-container::after {
	content: '';
	position: absolute;
	top: 2rem;
	left: -2rem;
	width: 100%;
	height: 100%;
	border: 0.3rem solid var(--dourado);
	z-index: -1;
}

.img-hero {
	width: 100%;
	height: 100%;
	/* aspect-ratio: 4/5; */
	object-fit: cover;
	box-shadow: 2rem 2rem 6rem rgba(13, 27, 42, 0.2);
}

.subtitle-badge {
	padding-bottom: 5rem;
	color: var(--dourado);
}

.subtitle-badge span {
	border-bottom: solid 0.1rem;
	color: var(--dourado);
	font-size: 2rem;
	font-weight: 600;
}

.bio-social {
	margin-top: 6rem;
	display: flex;
	gap: 3rem;
	align-items: center;
}

.social-icon {
	width: 2.4rem; /* Se não tiver largura, ele fica invisível */
	height: 2.4rem;
	stroke: #b89a67; /* A cor dourada aqui */
	stroke-width: 0.2rem;
	fill: none;
	transition: all 0.3s ease;
}

.social-link {
	display: flex;
	align-items: center;
	gap: 1rem;
	text-decoration: none;
	color: var(--texto); /* Montserrat será aplicada aqui */
	font-family: var(--fonte-sans);
	font-size: 1.4rem;
}

.social-link:hover .social-icon {
	transform: translateY(-0.3rem);
	filter: drop-shadow(0 0 0.5rem rgba(184, 154, 103, 0.5));
}

/* --- 5. PAIN & BRIDGE SECTIONS --- */
.pain-section {
	padding: 12rem 0;
	background: var(--cinza-suave);
	grid-template-columns: repeat(3, 1fr);
	gap: 4rem;
}

.pain-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4rem;
}

.pain-item {
	text-align: center;
	background: var(--branco);
	padding: 4.5rem 3.5rem;
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.05);
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
}

.pain-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0.4rem;
	background: var(--dourado);
	transform: scaleX(0);
	transition: transform 0.4s ease;
}

.pain-item:hover::before {
	transform: scaleX(1); /* A linha dourada expande no hover */
}

.pain-image {
	width: 100%;
	height: 30rem;
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 2rem;
}

.pain-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%) brightness(0.8);
	transition: 0.5s ease;
}

.pain-item:hover img {
	filter: grayscale(0%);
	transform: scale(1.05);
}

/* --- CTA FINAL DA SEÇÃO DA DOR --- */
.pain-footer-cta {
	margin-top: 10rem;
	text-align: center;
	padding: 8rem 4rem;
	background: linear-gradient(135deg, var(--azul-oxford) 0%, #0a1420 100%);
	border-radius: var(--radius);
	border: 0.1rem solid rgba(184, 154, 103, 0.2);
	box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.3);
}

.pain-footer-cta h3 {
	font-family: 'Cormorant Garamond', serif;
	font-size: 4.2rem;
	color: var(--dourado);
	margin-bottom: 2rem;
	max-width: 80rem;
	margin-inline: auto;
	line-height: 1.2;
}

.pain-footer-cta p {
	font-size: 1.9rem;
	color: var(--branco);
	opacity: 0.85;
	max-width: 70rem;
	margin: 0 auto 4.5rem auto;
	line-height: 1.6;
}

/* Botão Gold com efeito de brilho */
.btn-gold {
	display: inline-block;
	padding: 1.8rem 4rem;
	background: var(--dourado);
	color: var(--azul-oxford) !important; /* Garante que o texto seja legível */
	font-weight: 700;
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	border-radius: 0.4rem;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-gold:hover {
	background: var(--branco);
	color: var(--azul-oxford) !important;
	transform: translateY(-0.5rem) scale(1.05); /* Sobe e cresce levemente */
	box-shadow: 0 1rem 3rem rgba(184, 154, 103, 0.4); /* O brilho dourado (glow) */
}

.btn-gold:active {
	transform: translateY(-0.2rem) scale(0.98); /* Efeito de clique */
}

.bridge-section {
	position: relative;
	width: 100%;
	/* Reduzimos a altura: de 60vh para 35vh para não ficar 'alta' demais */
	min-height: 55vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: var(--branco);
}

.video-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%; /* Garante que o container ocupe tudo */
	height: 100%;
	z-index: 1;
}

.video-background video {
	width: 100% !important; /* Força a largura total */
	height: 100% !important; /* Força a altura total */
	object-fit: cover; /* O SEGREDO: faz o vídeo preencher tudo sem distorcer */
	display: block;
}

.video-overlay {
	position: absolute;
	inset: 0;
	background: rgba(13, 27, 42, 0.7); /* Azul escuro com transparência */
	z-index: 2;
}

.bridge-content {
	position: relative;
	z-index: 3;
	text-align: center;
	padding: 4rem 0; /* Dá um respiro interno */
}

.bridge-content h3 {
	font-size: 5rem;
}

/* --- 6. BIO SECTION --- */
.bio-section {
	padding: 10rem 0;
}

.subtitle-text {
	font-size: 2rem;
	color: var(--dourado);
	margin-bottom: 4rem;
	font-weight: 400;
}

.grid-bio {
	display: grid;
	grid-template-columns: 1.2fr 1.5fr;
	gap: 8rem;
	align-items: stretch;
}

.profile-frame {
	position: relative;
	height: 100%;
}

.profile-frame::after {
	content: '';
	position: absolute;
	top: 2rem;
	left: -2rem;
	width: 100%;
	height: 100%;
	border: 0.3rem solid var(--dourado);
	z-index: -1;
}

.bio-slideshow {
	height: 100%;
	position: relative;
	overflow: hidden;
	box-shadow: 2rem 2rem 6rem rgba(13, 27, 42, 0.2);
}

.bio-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: 1.5s ease;
}

.bio-img.active {
	opacity: 1;
	z-index: 2;
}

.main-description {
	font-size: 1.8rem;
	text-align: justify;
	line-height: 1.8;
	margin-bottom: 4rem;
}

/* --- 7. TESTIMONIALS & EVIDENCE --- */
.testimonials-section {
	padding: 10rem 0;
	background: var(--cinza-suave);
}

.testimonials-split-wrapper {
	display: grid;
	grid-template-columns: 1fr 1.618fr;
	gap: 8rem;
	align-items: center;
}

.video-frame {
	width: 100%;
	aspect-ratio: 9/16;
	border: 3px solid var(--dourado);
	border-radius: 2rem;
	overflow: hidden;
}

.video-frame video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stories-section {
	padding: 10rem 0;
	background-color: var(--azul-oxford);
}

.story-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 9 / 16; /* Formato Story/Telemóvel */
	border-radius: 2.4rem;
	border: 0.1rem solid rgba(184, 154, 103, 0.15);
	overflow: hidden;
	transition: all 0.3s ease;
}

.story-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Garante que a foto preencha o espaço sem distorcer */
}

.swiper-wrapper {
	display: flex !important;
	flex-direction: row !important;
}

.swiper-slide {
	flex-shrink: 0; /* Impede que os slides esmaguem */
	width: 28rem; /* Largura fixa para teste */
}

.story-swiper {
	width: 100%;
	overflow: visible !important;
	padding: 2rem 0;
}

.story-swiper .swiper-slide {
	width: 25rem !important; /* Largura de um "celular" médio */
	height: auto;
	display: flex;
	justify-content: center;
	transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
	filter: sepia(100%) hue-rotate(190deg) saturate(150%) brightness(0.8);
}

.story-swiper .swiper-slide:hover {
	filter: sepia(0%) hue-rotate(0deg) saturate(100%) brightness(1);
}

.play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(184, 154, 103, 0.9);
	color: white;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	padding-left: 0.4rem; /* Ajuste para centralizar o triângulo */
	box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.5);
	z-index: 2;
}

.story-frame {
	position: relative; /* Necessário para o play-button ficar por cima */
}

#insta-wrapper {
	display: flex !important;
}

.story-caption {
	font-family: var(--fonte-sans);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--dourado);
	text-transform: uppercase;
}
/* Efeito de zoom ao passar o rato */
.story-link:hover .story-frame {
	transform: translateY(-1rem);
	box-shadow: 0 1rem 2rem rgba(184, 154, 103, 0.3);
	border-color: rgba(184, 154, 103, 0.6);
}

.story-card:hover {
	transform: scale(1.05);
}

/* Garante que o widget não estoure a largura da página */
#insta-stories-widget {
	width: 100%;
	max-width: 110rem;
	margin: 0 auto;
	border-radius: 1.5rem;
	overflow: hidden; /* Corta bordas extras do widget se necessário */
}

@keyframes scroll-infinite {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(calc(-31rem * 7));
	}
}

/* --- 8. SERVICES & EXA --- */

.category-title {
	font-size: 2.8rem;
	color: var(--azul-dark);
	padding-left: 2rem;
}

.category-description {
	font-family: var(--fonte-sans);
	font-size: 1.6rem;
	color: var(--texto);
	margin: 1rem 0 4rem 2rem; /* Alinhado com o padding do título */
	max-width: 90rem;
	line-height: 1.8;
}

.category-description strong {
	color: var(--dourado);
}

/* Reutilizando seu overlay com o Azul Dark */
.service-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		var(--azul-dark) 0%,
		rgba(13, 27, 42, 0.75) 50%,
		rgba(13, 27, 42, 0.2) 100%
	);
	display: flex;
	align-items: flex-end;
	padding: 3.5rem;
}

.service-content h4 {
	font-family: var(--fonte-serif);
	font-size: 2.2rem;
	color: var(--branco);
	margin: 1rem 0;
}

/* Grid específico para 4 colunas */
.grid-4-cols {
	grid-template-columns: repeat(4, 1fr) !important;
}

/* Card Verticalizado */
.tall-card {
	height: 55rem !important; /* Mais alto que o padrão de 40rem-45rem */
}

/* Ajuste fino para o conteúdo em cards estreitos */
.tall-card .service-content h4 {
	line-height: 1.3;
}

.tall-card .service-overlay {
	padding: 2.5rem; /* Menos respiro lateral para cards mais finos */
}

/* Responsividade: No tablet vira 2 e no mobile vira 1 */
@media (max-width: 1024px) {
	.grid-4-cols {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 600px) {
	.grid-4-cols {
		grid-template-columns: 1fr !important;
	}
	.tall-card {
		height: 45rem !important; /* No mobile volta a uma altura normal */
	}
}

.badge {
	font-family: var(--fonte-sans);
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	padding: 0.5rem 1.2rem;
	background-color: var(--dourado-soft);
	color: var(--dourado);
	border: 0.1rem solid rgba(184, 154, 103, 0.3);
	border-radius: 5rem; /* Formato pílula */
	white-space: nowrap;
	transition: all 0.3s ease;
}

.scroll-reveal {
	opacity: 0;
	transform: translateY(5rem);
	transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Estado quando visível */
.scroll-reveal.active {
	opacity: 1;
	transform: translateY(0);
}

.service-cta {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--fonte-sans);
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--dourado); /* Cor principal do CTA */
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	transition: all 0.3s ease;
	position: relative;
}

/* Seta do ícone com movimento */
.service-cta i {
	font-size: 1.2rem;
	transition: transform 0.3s ease;
}

/* Linha decorativa discreta que cresce no hover */
.service-cta::after {
	content: '';
	position: absolute;
	bottom: -0.5rem;
	left: 0;
	width: 3rem; /* Começa pequena */
	height: 0.1rem;
	background-color: var(--dourado);
	transition: width 0.3s ease;
}

.service-cta:hover {
	color: var(
		--azul-oxford
	); /* Troca suave de cor ou mantém o dourado mais intenso */
}

.service-cta:hover i {
	transform: translateX(0.5rem); /* Seta "foge" levemente para a direita */
}

.service-cta:hover::after {
	width: 100%; /* Linha preenche toda a largura */
}

.pedagogical-approach {
	margin-top: 10rem;
	padding: 6rem;
	background-color: var(
		--azul-oxford
	); /* Fundo escuro para destacar a abordagem */
	border-radius: var(--radius);
	border: 0.1rem solid var(--dourado-soft);
	text-align: center;
}

.approach-header h3 {
	font-family: var(--fonte-serif);
	font-size: 3.6rem;
	color: var(--dourado);
	margin-bottom: 1.5rem;
}

.approach-header p {
	font-family: var(--fonte-sans);
	font-size: 1.6rem;
	color: var(--cinza-suave);
	margin-bottom: 5rem;
}

.approach-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
	gap: 4rem;
	margin-bottom: 5rem;
}

.approach-item {
	padding: 2rem;
	border-left: 0.2rem solid var(--dourado-soft);
	text-align: left;
	transition: all 0.3s ease;
}

.approach-item:hover {
	border-left-color: var(--dourado);
	background: rgba(184, 154, 103, 0.05);
}

.approach-item h4 {
	font-family: var(--fonte-serif);
	font-size: 2.2rem;
	color: var(--branco);
	margin-bottom: 1rem;
}

.approach-item p {
	font-family: var(--fonte-sans);
	font-size: 1.4rem;
	color: var(--cinza-suave);
	line-height: 1.6;
}

.approach-footer {
	font-family: var(--fonte-sans);
	font-size: 1.4rem;
	font-style: italic;
	color: var(--dourado);
	opacity: 0.9;
	border-top: 0.1rem solid var(--dourado-soft);
	padding-top: 3rem;
}

@media (max-width: 768px) {
	.pedagogical-approach {
		padding: 4rem 2rem;
	}
}

.services-section {
	padding: 10rem 0;
	background-color: var(--off-white);
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 3rem;
	margin-top: 6rem;
}

.service-card {
	height: 48rem;
	border-radius: 2.4rem;
	background-size: cover;
	background-position: center;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	/* Borda mais sutil e elegante */
	border: 0.1rem solid rgba(184, 154, 103, 0.15);
	box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.4);
	transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	cursor: pointer;
}

/* Overlay mais elegante: do transparente para o dourado/escuro */
.service-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		to top,
		var(--azul-oxford) 0%,
		rgba(10, 10, 10, 0.4) 50%,
		rgba(184, 154, 103, 0.05) 100%
	);
	transition: opacity 0.5s ease;
}

.service-content {
	position: relative;
	z-index: 2;
	width: 100%;
}

.service-card p {
	color: #d1d1d1;
	font-size: 1.2rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

/* Efeito de Interatividade */
.service-card:hover {
	transform: scale(1.02); /* Zoom muito sutil (respiração) */
	border-color: var(--dourado);
	box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.5), 0 0 3rem rgba(184, 154, 103, 0.2); /* Sombra com brilho dourado */
}

/* Anima o botão "Saiba mais" quando o mouse está sobre o card */
.service-card:hover .service-cta i {
	transform: translateX(0.5rem);
}

.service-card:hover .service-cta::after {
	width: 100%;
}

/* --- DETALHES EXPANSÍVEIS DOS SERVIÇOS --- */
.details-container {
	width: 100%;
	background: var(--azul-oxford);
	color: var(--branco);
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	border-radius: var(--radius);
	margin-top: 0;
	border: 0 solid var(--dourado);
	grid-column: 1 / -1; /* Garante largura total se movido para dentro do grid */
}

.details-container.active {
	margin-top: 2rem;
	padding: 4rem;
	max-height: 100rem; /* Altura máxima segura para animação */
	opacity: 1;
	border: 0.1rem solid var(--dourado);
	box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.3);
}

.details-content {
	position: relative;
}

.details-content h3 {
	font-family: var(--fonte-serif);
	font-size: 3rem;
	color: var(--dourado);
	margin-bottom: 2rem;
	padding-right: 4rem; /* Espaço para o X não ficar em cima do texto em mobile */
}

.details-content ul {
	list-style: none;
	margin-top: 2rem;
}

.details-content li {
	margin-bottom: 1rem;
	padding-left: 2rem;
	position: relative;
	font-size: 1.6rem;
	color: var(--off-white);
}

.details-content li::before {
	content: '•';
	color: var(--dourado);
	position: absolute;
	left: 0;
	font-weight: bold;
}

.close-details {
	position: absolute;
	top: -2rem; /* Sobe para a área de padding do container */
	right: -1rem;
	background: transparent;
	border: none;
	color: var(--dourado);
	font-size: 2.4rem;
	cursor: pointer;
	padding: 1rem;
	transition: all 0.3s ease;
	z-index: 10;
}

.close-details:hover {
	color: var(--branco);
	transform: rotate(90deg); /* Efeito elegante de rotação */
}

/*--- EXA ---*/
.exa-manifesto {
	padding: 15rem 0;
	background-color: var(--azul-oxford);
	color: var(--branco);
	position: relative;
}

.manifesto-header {
	text-align: center;
	margin-bottom: 8rem;
}

.label-dourado {
	color: var(--dourado);
	text-transform: uppercase;
	letter-spacing: 0.8rem;
	font-size: 1.2rem;
	display: block;
	margin-bottom: 2rem;
}

.exa-title {
	font-family: var(--fonte-serif);
	font-size: clamp(3.5rem, 6vw, 6.5rem);
	font-weight: 300;
	line-height: 1.1;
}

/* O Grid de Comparação - Visual e Moderno */
.comparison-grid {
	display: grid;
	grid-template-columns: 1fr 100px 1fr;
	align-items: center;
	max-width: 100rem;
	margin: 0 auto 8rem;
}

.comparison-item {
	padding: 2rem;
}

.comparison-item h3 {
	font-size: 1.8rem;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	margin-bottom: 1.5rem;
	color: var(--dourado-soft);
}

.comparison-item.right h3 {
	color: var(--dourado);
}

.comparison-item p {
	font-size: 1.8rem;
	line-height: 1.6;
	opacity: 0.7;
}

.comparison-item.highlight p {
	font-size: 2.2rem;
	opacity: 1;
	font-weight: 500;
}

/* Divisor Minimalista Vertical */
.comparison-divider {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
}

.comparison-divider .line {
	width: 1px;
	height: 100%;
	background: linear-gradient(
		to bottom,
		transparent,
		var(--dourado),
		transparent
	);
}

.comparison-divider .diamond {
	width: 8px;
	height: 8px;
	background: var(--dourado);
	transform: rotate(45deg);
	margin: 1.5rem 0;
}

/* Botão Minimalista */
.btn-minimal {
	display: inline-block;
	padding: 2rem 4rem;
	border: 1px solid var(--dourado);
	color: var(--dourado);
	text-decoration: none;
	letter-spacing: 0.3rem;
	font-weight: 600;
	transition: all 0.4s ease;
}

.btn-minimal:hover {
	background: var(--dourado);
	color: var(--azul-oxford);
	box-shadow: 0 0 20px var(--dourado-glow);
}

.final-call {
	font-size: 2.4rem;
	margin-bottom: 4rem;
	font-family: var(--fonte-serif);
	font-style: italic;
}

@media (max-width: 768px) {
	.comparison-grid {
		grid-template-columns: 1fr;
		gap: 4rem;
	}
	.comparison-divider {
		display: none;
	}
	.exa-title {
		font-size: 4rem;
	}
}

.final-invitation {
	padding: 10rem 0;
	background-color: var(
		--off-white
	); /* Muda para um tom claro para separar do Azul da EXA */
	text-align: center;
}

.invitation-content h3 {
	font-family: var(--fonte-serif);
	font-size: 4rem;
	color: var(--azul-oxford);
	margin-bottom: 2rem;
}

.invitation-content p {
	font-size: 2rem;
	color: var(--texto);
	max-width: 70rem;
	margin: 0 auto 4rem;
	opacity: 0.8;
}

.direct-call {
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: 0.3rem;
	color: var(--dourado);
	margin-bottom: 2rem;
	font-weight: 700;
}

.button-group {
	display: flex;
	gap: 2rem;
	justify-content: center;
	align-items: center;
}

.btn-whatsapp-minimal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 1.8rem 4rem; /* Mesma dimensão do btn-gold */
	background: transparent;
	border: 1px solid #25d366;
	color: #25d366;
	text-decoration: none;
	font-weight: 700;
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	border-radius: 0.4rem; /* Mesmo radius do btn-gold */
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-whatsapp-minimal:hover {
	background-color: #25d366;
	color: #ffffff;
	transform: translateY(-0.5rem) scale(1.05); /* Mesmo efeito de hover */
	box-shadow: 0 1rem 3rem rgba(37, 211, 102, 0.4); /* Glow verde */
}

/* --- QR CODE CONTACT --- */
.qr-wrapper {
	margin-top: 4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.qr-label {
	font-family: var(--fonte-sans);
	font-size: 1.4rem;
	color: var(--texto);
	opacity: 0.7;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
}

.qr-box {
	background: var(--branco);
	padding: 1.5rem;
	border-radius: var(--radius);
	border: 1px solid var(--dourado);
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
}

.qr-box:hover {
	transform: scale(1.05);
	box-shadow: 0 1rem 3rem rgba(184, 154, 103, 0.3);
}

/* Ajuste para Dark Mode */
body.dark-mode .qr-label {
	color: var(--branco);
}

/* --- 9. FOOTER --- */
footer {
	background: var(--azul-oxford);
	color: var(--branco);
	padding: 8rem 0 4rem;
	border-top: 0.1rem solid rgba(197, 160, 89, 0.2);
}

.copyright p {
	text-align: center;
	font-size: 1.3rem;
	opacity: 0.5;
}

/* --- PREFERÊNCIA DE MOVIMENTO REDUZIDO --- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- 10. MEDIA QUERIES (AGRUPADOS) --- */
/* Tablets e Notebooks pequenos */
@media (max-width: 1024px) {
	html {
		font-size: 55%; /* Reduz levemente a base (1rem = 9px aprox) */
	}

	.container {
		padding: 0 3rem;
	}

	.hero h1 {
		font-size: 4.2rem;
	}
}

/* Celulares (Mobile) */
@media (max-width: 768px) {
	/* Ajustes Gerais de Espaçamento */
	.margin-bottom-lg {
		margin-bottom: 5rem;
	}
	.section-title {
		font-size: 3rem;
	}

	/* Hero Section */
	.hero {
		padding-top: 10rem; /* Espaço extra para não bater no menu de idiomas */
		padding-bottom: 5rem;
		min-height: auto;
	}

	.hero-grid {
		grid-template-columns: 1fr;
		gap: 4rem;
		text-align: center;
	}

	.hero h1 {
		font-size: 3.4rem;
		text-align: center;
	}

	.hero p {
		text-align: center;
		font-size: 1.6rem;
		margin: 2rem 0 3rem;
	}

	.hero-button {
		display: flex;
		justify-content: center;
	}

	.hero-image-container {
		height: 40rem; /* Altura fixa para a foto não ficar gigante nem sumir */
		width: 100%;
		margin-top: 2rem;
	}

	/* Vídeo Background Mobile (Desativa vídeo pesado, usa imagem) */
	#heroVideo {
		display: none;
	}
	.video-container {
		background: url('images/atom-poster.jpg') center/cover;
		filter: brightness(0.4);
	}

	/* Pain Section */
	.pain-grid {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	/* Bridge Section */
	.bridge-section {
		min-height: 40vh;
	}
	.bridge-content h3 {
		font-size: 2.8rem;
		padding: 0 2rem;
	}

	/* Bio Section */
	.grid-bio {
		grid-template-columns: 1fr;
		gap: 5rem;
		text-align: center;
	}

	.bio-slideshow {
		height: 45rem; /* Garante destaque para a foto do professor */
	}

	.bio-social {
		justify-content: center;
		flex-wrap: wrap;
	}

	.hero-image-container::after,
	.profile-frame::after {
		left: 1rem;
		top: 1rem;
		width: 100%;
		height: 100%;
	}

	/* Testimonials */
	.testimonials-split-wrapper {
		grid-template-columns: 1fr;
		gap: 4rem;
	}

	/* Services */
	.service-card {
		height: 42rem;
	}
	.tall-card {
		height: 42rem !important; /* Normaliza altura dos cards no mobile */
	}

	/* Details Container */
	.details-container.active {
		padding: 2.5rem;
	}

	.details-content h3 {
		font-size: 2.4rem;
		padding-right: 0;
		margin-top: 1.5rem; /* Espaço para o botão X */
	}

	.close-details {
		top: -1rem;
		right: -1rem;
	}

	/* Footer */
	footer {
		padding: 5rem 0 3rem;
	}
}

/* --- 11. MODO ESCURO / ALTO CONTRASTE --- */

/* Ajuste do botão de contraste (Visível em ambos os modos) */
.contrast-btn {
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	padding: 0 10px;
	font-size: 1.1rem;
	transition: transform 0.2s;
}

.contrast-btn:hover {
	transform: scale(1.1);
}

/* Variáveis e overrides para Dark Mode */
body.dark-mode {
	background-color: #080c12 !important; /* Oxford Deep */
	color: #ffffff !important;
}

body.dark-mode .hero,
body.dark-mode .pain-section,
body.dark-mode .bridge-section,
body.dark-mode .bio-section,
body.dark-mode .testimonials-section,
body.dark-mode .services-section,
body.dark-mode .exa-manifesto,
body.dark-mode footer {
	background-color: #080c12 !important;
	color: #ffffff !important;
}

body.dark-mode .service-card,
body.dark-mode .pain-item,
body.dark-mode .details-container,
body.dark-mode .testimonial-content-box {
	background-color: #131b29 !important; /* Azul noturno elegante */
	border: 1px solid #b89a67 !important; /* Dourado da marca */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
	color: #ffffff !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode strong {
	color: #ffffff !important;
}

body.dark-mode .dourado,
body.dark-mode .label-dourado,
body.dark-mode span[style*='var(--dourado)'] {
	color: #e0c090 !important; /* Dourado claro */
	text-shadow: none !important;
}

body.dark-mode p,
body.dark-mode li,
body.dark-mode a,
body.dark-mode .category-description {
	color: #ffffff !important;
	opacity: 1 !important;
}

body.dark-mode .btn-gold,
body.dark-mode .skip-link {
	color: #1b263b !important;
}