/*
 * Projeto gerado por Edu Santana (ES Solucoes Web e MKT LTDA) | oedusantana.com
 * CT Guto Dulinski, Design System V2 (areia + roxo, tipografia fina, sem trilha linear)
 * Fonte de verdade dos tokens: 15-ESTUDO-DE-CASO-DIRECAO-DE-ARTE.md (secao "Revisao V2"), nao inventar valor fora daqui.
 */

/* ---------- Fontes (self-hosted) ---------- */

@font-face {
	font-family: "Inter Tight";
	src: url("../fonts/InterTight-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "General Sans";
	src: url("../fonts/GeneralSans-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "General Sans";
	src: url("../fonts/GeneralSans-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
	/* Paleta V2.1: areia clara + Roxo Imperial da marca (ver Estudo de Caso, Revisao V2.1) */
	--cor-areia: #fffaf2;
	--cor-areia-escura: #ecdfc4;
	--cor-roxo: #5a0087;
	--cor-roxo-escuro: #37014f;
	--cor-tinta: #2a2019;
	--cor-dourado: #d4af37;
	/* Verde dos botoes (pedido do operador, 2026-09-10) — nao confundir com
	   --cor-sucesso (usado em mensagens de estado, semantica diferente). */
	--cor-cta: #00850d;
	--cor-cta-escuro: #006b0a;
	--cor-sucesso: #5b7a4c;
	--cor-erro: #b23b3b;
	--cor-aviso: #c58a2e;

	/* Tipografia */
	--fonte-heading: "Inter Tight", -apple-system, sans-serif;
	--fonte-corpo: "General Sans", -apple-system, sans-serif;

	--fs-100: 0.875rem;
	--fs-200: 1rem;
	--fs-300: 1.35rem;
	--fs-400: 1.9rem;
	--fs-500: 2.75rem;
	--fs-600: 4.25rem;
	--fs-700: 6rem;

	/* Espacamento */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 1rem;
	--sp-4: 1.5rem;
	--sp-5: 2rem;
	--sp-6: 3rem;
	--sp-7: 4rem;
	--sp-8: 5rem;
	--sp-9: 7rem;

	/* Layout */
	--largura-max: 1320px;
	--gutter: 24px;

	/* Efeitos */
	--raio: 20px;
	--raio-pill: 999px;
	--sombra: 0 4px 16px rgba(55, 1, 79, 0.1);
	--sombra-flutuante: 0 10px 28px rgba(55, 1, 79, 0.22);
	--dur-entrada: 260ms;
	--easing: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset minimo ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--cor-areia);
	color: var(--cor-tinta);
	font-family: var(--fonte-corpo);
	font-size: var(--fs-200);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
}

h1,
h2,
h3,
h4 {
	font-family: var(--fonte-heading);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0 0 var(--sp-3);
	color: var(--cor-roxo-escuro);
}

h1 {
	font-size: var(--fs-600);
}

h2 {
	font-size: var(--fs-500);
}

h3 {
	font-size: var(--fs-400);
}

p {
	margin: 0 0 var(--sp-3);
}

/* ---------- Layout base ---------- */

.ctgd-container {
	max-width: var(--largura-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.ctgd-secao {
	padding-block: var(--sp-8);
	position: relative;
}

.ctgd-secao--roxo {
	background: var(--cor-roxo);
	color: var(--cor-areia);
}

.ctgd-secao--roxo h1,
.ctgd-secao--roxo h2,
.ctgd-secao--roxo h3 {
	color: var(--cor-areia);
}

.ctgd-secao--crua {
	background: var(--cor-areia-escura);
}

/* Roxo bem suave (degrade sutil), pra separar visualmente uma secao da
   branca/areia acima/abaixo sem pesar como .ctgd-secao--roxo (solido, usado em
   blocos de destaque/CTA). Mesmo hue da marca, so com opacidade bem baixa. */
.ctgd-secao--roxo-suave {
	background: linear-gradient(135deg, rgba(90, 0, 135, 0.05) 0%, rgba(90, 0, 135, 0.13) 100%);
}

/* ---------- Banner de topo das paginas internas (foto 1920x600) ---------- */

.ctgd-page-banner {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: 340px;
	background: var(--cor-roxo);
}

.ctgd-page-banner__midia {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.ctgd-page-banner__midia img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ctgd-page-banner__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg, rgba(55, 1, 79, 0.93) 0%, rgba(55, 1, 79, 0.78) 42%, rgba(55, 1, 79, 0.4) 100%);
}

.ctgd-page-banner__conteudo {
	position: relative;
	z-index: 2;
	padding-block: var(--sp-7) var(--sp-6);
	color: var(--cor-areia);
}

.ctgd-page-banner__conteudo h1 {
	color: var(--cor-areia);
}

@media (max-width: 640px) {
	.ctgd-page-banner {
		min-height: 240px;
	}
}

.ctgd-split {
	display: grid;
	gap: var(--sp-6);
	align-items: center;
}

@media (min-width: 900px) {
	.ctgd-split--7-5 {
		grid-template-columns: 7fr 5fr;
	}

	/* Usar quando a coluna vem invertida via `order` (ex: paginas com linhas em
	   zigue-zague): o CSS Grid reposiciona os itens pela ordem "modificada por
	   order", entao so trocar order sem trocar o template faz o item que virou
	   "primeiro" herdar o tamanho da 1a faixa (7fr) em vez do seu tamanho de
	   sempre (5fr) — essa variante mantem os tamanhos de coluna consistentes
	   independente do lado visual (achado real, pagina /turmas/, 2026-09-10). */
	.ctgd-split--5-7 {
		grid-template-columns: 5fr 7fr;
	}

	.ctgd-split--8-4 {
		grid-template-columns: 8fr 4fr;
	}
}

/* Empilhado (<900px, mesmo breakpoint onde as colunas do .ctgd-split acima
   somem): imagem SEMPRE antes do texto (regra permanente de Hero, secao 4 —
   "resto da pagina mobile"), independente do `order`/posicao no HTML usados
   pra montar o zigue-zague no desktop. Achado real, 2026-09-10: metade dos
   blocos zigue-zague de /turmas/ (indices pares, sem `order` inline) e os 2
   blocos de /quem-somos/ (um sem `order`, outro com `order:1` no texto)
   mostravam o texto antes da foto no mobile — `!important` necessario pra
   vencer o `order` inline usado no desktop. */
@media (max-width: 899px) {
	.ctgd-split .ctgd-card__midia {
		order: -1 !important;
	}
}

/* ---------- Onda (divisor decorativo, substitui o corte diagonal como assinatura) ---------- */

.ctgd-onda {
	display: block;
	width: 100%;
	line-height: 0;
}

.ctgd-onda svg {
	width: 100%;
	height: auto;
	display: block;
}

/* ---------- Header ---------- */

.ctgd-site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: #fff;
	border-bottom: 1px solid rgba(90, 0, 135, 0.14);
}

.ctgd-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	max-width: var(--largura-max);
	margin-inline: auto;
	padding: var(--sp-3) var(--gutter);
}

.ctgd-site-header .ctgd-botao--principal {
	padding: 0.6em 1.3em;
}

.ctgd-site-header__logo {
	flex-shrink: 0;
}

.ctgd-site-header__logo img {
	height: 44px;
	width: auto;
}

.ctgd-nav {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--sp-4);
}

.ctgd-nav ul {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-100);
	font-weight: 500;
}

.ctgd-nav ul li {
	flex-shrink: 0;
}

.ctgd-nav ul a {
	position: relative;
	display: inline-block;
	padding-bottom: 4px;
	text-decoration: none;
	color: var(--cor-roxo-escuro);
	white-space: nowrap;
	transition: color 0.2s var(--easing);
}

.ctgd-nav ul a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--cor-roxo);
	border-radius: var(--raio-pill);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s var(--easing);
}

.ctgd-nav ul a:hover,
.ctgd-nav ul a:focus-visible {
	color: var(--cor-roxo);
}

.ctgd-nav ul a:hover::after,
.ctgd-nav ul a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Submenu (dropdown ao passar o mouse) */
.ctgd-nav ul li.menu-item-has-children {
	position: relative;
}

/* Botao da setinha do acordeao: so existe no mobile (injetado via JS em
   main.js), escondido aqui no desktop pra nao aparecer fora do lugar. */
.ctgd-nav__acordeao {
	display: none;
}

.ctgd-nav ul li.menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
}

/* ::before (nao ::after) de proposito: o link ja usa ::after pra sublinhado
   no hover (.ctgd-nav ul a::after), entao usar ::after aqui de novo colidiria
   com as duas regras no MESMO pseudo-elemento. "order:1" dentro do flex do <a>
   joga essa seta pra depois do texto (direita) mesmo sendo ::before no DOM. */
.ctgd-nav ul li.menu-item-has-children > a::before {
	content: "";
	order: 1;
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 8px;
	margin-bottom: 2px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.55;
	transition: transform 0.25s var(--easing), margin 0.25s var(--easing);
}

.ctgd-nav ul li.menu-item-has-children:hover > a::before,
.ctgd-nav ul li.menu-item-has-children:focus-within > a::before {
	transform: rotate(225deg);
	margin-bottom: -3px;
}

/* Sem gap entre o link e o menu (isso criava uma "zona morta": ao mover o mouse
   na diagonal pro submenu, ele saia do :hover do <li> antes de chegar la e o
   menu fechava). O respiro visual vem de padding-top (fica dentro da propria
   caixa hover-avel), nao de margin (que ficaria fora dela). */
.ctgd-nav ul .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	min-width: 210px;
	margin: 0;
	padding: calc(var(--sp-2) + 6px) var(--sp-2) var(--sp-2);
	/* Branco puro (igual ao .ctgd-site-header), nao a areia/creme dos tokens: a
	   diferenca de tom contra o cabecalho branco e que deixava a caixa "bege"
	   destoando, em vez de parecer uma continuacao do menu. */
	background: #fff;
	border: 1px solid rgba(90, 0, 135, 0.14);
	border-radius: 14px;
	box-shadow: 0 12px 24px rgba(55, 1, 79, 0.14);
	z-index: 20;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.22s var(--easing), transform 0.22s var(--easing), visibility 0.22s;
}

.ctgd-nav ul li.menu-item-has-children:hover > .sub-menu,
.ctgd-nav ul li.menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ctgd-nav ul .sub-menu li {
	padding: 0;
}

.ctgd-nav ul .sub-menu a {
	display: block;
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--raio);
	transition: background-color 0.2s var(--easing), color 0.2s var(--easing);
}

.ctgd-nav ul .sub-menu a::after {
	content: none;
}

.ctgd-nav ul .sub-menu a:hover,
.ctgd-nav ul .sub-menu a:focus-visible {
	background: rgba(90, 0, 135, 0.08);
	color: var(--cor-roxo);
}

/* "Minha conta" virou um <details> (menu suspenso): so um elemento compacto
   no cabecalho, em vez de "Ola, Nome" + botao + link "Sair" lado a lado, que
   nao cabiam nem no desktop largo (E-147) nem no mobile (achado real,
   2026-09-13: cortava/apertava a barra do topo no celular). */
.ctgd-nav__conta {
	position: relative;
	flex-shrink: 0;
}

.ctgd-nav__conta summary {
	cursor: pointer;
	list-style: none;
}

.ctgd-nav__conta summary::-webkit-details-marker {
	display: none;
}

.ctgd-nav__conta-menu {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 8px;
	min-width: 180px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--sp-2);
	background: #fff;
	border: 1px solid rgba(90, 0, 135, 0.14);
	border-radius: 14px;
	box-shadow: 0 12px 24px rgba(55, 1, 79, 0.14);
	z-index: 30;
}

.ctgd-nav__conta-menu a {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--raio);
	color: var(--cor-tinta);
	text-decoration: none;
	font-size: var(--fs-100);
	font-weight: 600;
	white-space: nowrap;
}

.ctgd-nav__conta-menu a:hover {
	background: rgba(90, 0, 135, 0.08);
	color: var(--cor-roxo);
}

.ctgd-nav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 1px solid rgba(90, 0, 135, 0.3);
	border-radius: var(--raio-pill);
	color: var(--cor-roxo-escuro);
	cursor: pointer;
}

@media (max-width: 860px) {
	.ctgd-site-header__inner {
		gap: var(--sp-2);
		padding-block: var(--sp-2);
	}

	.ctgd-site-header__logo img {
		height: 34px;
	}

	.ctgd-nav {
		gap: var(--sp-2);
	}

	.ctgd-nav__conta summary {
		padding: 0.5em 0.9em;
		font-size: 13px;
	}

	.ctgd-nav ul {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		gap: 0;
		background: var(--cor-areia);
		border-bottom: 1px solid rgba(90, 0, 135, 0.14);
		padding: var(--sp-3) var(--gutter);
	}

	.ctgd-nav ul li {
		padding: var(--sp-2) 0;
	}

	.ctgd-nav.is-aberto ul {
		display: flex;
	}

	.ctgd-nav__toggle {
		display: inline-flex;
	}

	/* So o CTA do CABECALHO some no mobile (ja tem "Agendar aula experimental"
	   repetido no Hero/rodape/fim de secao logo abaixo, nao precisa duplicar
	   junto do hamburguer, que fica espremido). Bug real corrigido aqui: antes
	   este seletor era global (`.ctgd-botao--principal`) e escondia TODOS os
	   botoes verdes principais do site no mobile — Hero, Planos, Turmas, ate o
	   "Enviar" do formulario de Contato — sem ninguem perceber. */
	.ctgd-site-header .ctgd-botao--principal {
		display: none;
	}

	/* Submenu no mobile: acordeao fechado por padrao (a setinha injetada via JS
	   em main.js abre/fecha so aquele item, sem depender de hover, que nao
	   existe em touch) — antes ficava tudo sempre aberto de uma vez, comprido
	   e "estranho" (feedback real do operador). */
	.ctgd-nav ul li.menu-item-has-children > a::before {
		display: none;
	}

	.ctgd-nav ul li.menu-item-has-children {
		padding-right: 44px;
	}

	.ctgd-nav__acordeao {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		right: 0;
		width: 44px;
		height: 44px;
		padding: 0;
		background: transparent;
		border: none;
		cursor: pointer;
	}

	.ctgd-nav__acordeao::before {
		content: "";
		width: 8px;
		height: 8px;
		border-right: 1.5px solid var(--cor-roxo);
		border-bottom: 1.5px solid var(--cor-roxo);
		transform: rotate(45deg);
		transition: transform 0.25s var(--easing);
	}

	.ctgd-nav ul li.menu-item-has-children.is-aberto > .ctgd-nav__acordeao::before {
		transform: rotate(225deg);
		margin-top: -4px;
	}

	.ctgd-nav ul .sub-menu {
		display: none;
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		flex-direction: column;
		margin-top: var(--sp-2);
		margin-left: var(--sp-4);
		padding: 0;
		background: transparent;
		border: none;
		box-shadow: none;
	}

	.ctgd-nav ul li.menu-item-has-children.is-aberto > .sub-menu {
		display: flex;
	}
}

/* ---------- Botoes (V2: arredondados, roxo, delicados) ---------- */

.ctgd-botao {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	gap: var(--sp-2);
	padding: 0.8em 1.8em;
	font-family: var(--fonte-corpo);
	font-weight: 500;
	font-size: var(--fs-100);
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	border: 1.5px solid transparent;
	border-radius: var(--raio-pill);
	cursor: pointer;
	transition: background-color 0.2s var(--easing), color 0.2s var(--easing), border-color 0.2s var(--easing), box-shadow 0.2s var(--easing), transform 0.15s var(--easing);
}

.ctgd-botao:hover {
	transform: translateY(-1px);
	box-shadow: var(--sombra);
}

.ctgd-botao--principal {
	background: var(--cor-cta);
	border-color: var(--cor-cta);
	color: var(--cor-areia);
}

.ctgd-botao--principal:hover {
	background: var(--cor-cta-escuro);
	border-color: var(--cor-cta-escuro);
}

.ctgd-botao--contorno {
	background: transparent;
	color: var(--cor-cta);
	border-color: var(--cor-cta);
}

.ctgd-botao--contorno:hover {
	background: var(--cor-cta);
	color: var(--cor-areia);
}

.ctgd-botao--sm {
	padding: 0.5em 1.1em;
	font-size: 0.8125rem;
}

/* Contorno sobre fundo roxo (secoes --roxo) precisa de borda clara */
.ctgd-secao--roxo .ctgd-botao--contorno {
	color: var(--cor-areia);
	border-color: rgba(248, 241, 228, 0.55);
}

.ctgd-secao--roxo .ctgd-botao--contorno:hover {
	background: var(--cor-areia);
	color: var(--cor-roxo-escuro);
	border-color: var(--cor-areia);
}

/* ---------- Hero (Home): ilustrado, sem foto escura ---------- */

.ctgd-hero {
	position: relative;
	overflow: hidden;
	min-height: 92vh;
	display: flex;
	align-items: center;
	background: linear-gradient(180deg, var(--cor-roxo-escuro) 0%, var(--cor-areia-escura) 100%);
}

/* Foto de fundo em tela cheia (quando ha Hero Banner ativo) */
.ctgd-hero__midia {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.ctgd-hero__midia img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Sujeito (rosto/bone) fica perto do topo da foto, mais pro lado direito: ancora
	   o corte ai em vez do centro padrao, senao o cover corta a cabeca em telas
	   mais baixas/largas. */
	object-position: top right;
}

/* Por padrao (fora do media query mobile) a foto mobile fica escondida: sem
   isso, as duas imagens (mobile + desktop) ficam empilhadas dentro do mesmo
   container position:absolute, e a mobile (primeira no DOM) e' quem aparece
   no desktop — bug real, reportado pelo operador em 2026-09-10. */
.ctgd-hero__midia-mobile {
	display: none;
}

.ctgd-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Mesmo padrao do .ctgd-page-banner__scrim: escurece o lado esquerdo (onde o texto
	   fica) de cima a baixo, clareando em direcao a foto a direita. */
	background: linear-gradient(100deg, rgba(55, 1, 79, 0.92) 0%, rgba(55, 1, 79, 0.72) 38%, rgba(55, 1, 79, 0.3) 68%, rgba(55, 1, 79, 0.05) 100%);
}

.ctgd-hero__sol {
	position: absolute;
	top: -80px;
	right: -80px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(212, 175, 55, 0.55) 0%, rgba(212, 175, 55, 0) 70%);
	z-index: 0;
}

.ctgd-hero__conteudo {
	position: relative;
	z-index: 2;
	max-width: 65%;
	/* Regra fixa de Hero (knowledge-base/hero-desktop-mobile): o wrapper de texto do
	   Hero nunca fica dentro do .ctgd-container centralizado, para grudar na margem
	   esquerda real da tela em vez de parecer centralizado em telas largas. */
	padding-left: clamp(24px, 6vw, 96px);
	padding-right: var(--gutter);
	padding-block: var(--sp-8) var(--sp-7);
	color: var(--cor-areia);
	box-sizing: border-box;
}

.ctgd-hero__conteudo h1 {
	font-size: clamp(2rem, 3.4vw, 3.25rem);
	background: linear-gradient(135deg, var(--cor-areia) 0%, var(--cor-areia) 55%, var(--cor-dourado) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Titulo com degrade, reutilizavel em qualquer secao de fundo claro (a versao
   do Hero acima usa areia->dourado porque fica sobre foto escura; esta usa
   roxo->dourado, legivel sobre o fundo claro padrao do site). */
.ctgd-titulo-degrade {
	display: inline-block;
	background: linear-gradient(135deg, var(--cor-roxo) 0%, var(--cor-roxo) 55%, var(--cor-dourado) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ctgd-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--cor-dourado);
	font-size: var(--fs-100);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--sp-3);
}

.ctgd-hero__subtitulo {
	font-size: var(--fs-300);
	max-width: 100%;
	color: rgba(248, 241, 228, .9);
}

.ctgd-hero__acoes {
	display: flex;
	gap: var(--sp-3);
	margin-top: var(--sp-5);
	flex-wrap: wrap;
}

.ctgd-hero .ctgd-botao--contorno {
	color: var(--cor-areia);
	border-color: rgba(248, 241, 228, 0.6);
}

.ctgd-hero .ctgd-botao--contorno:hover {
	background: var(--cor-areia);
	color: var(--cor-roxo-escuro);
	border-color: var(--cor-areia);
}

.ctgd-hero__ilustracao {
	position: relative;
	z-index: 1;
	margin-top: var(--sp-7);
}

/* ---------- Hero mobile (regra permanente: knowledge-base/hero-desktop-mobile) ----------
   So ativa de verdade quando existe imagem mobile dedicada 700x600 no Hero Banner
   (`.ctgd-hero__midia--tem-mobile`, aplicada em front-page.php quando
   `_ctgd_imagem_mobile` existe). SEM ela, nao muda nada — mantem o fallback atual
   (foto desktop em cover, absoluta, min-height:92vh). Isso e proposital: a regra
   probe gerar substituto/redimensionar a foto desktop como gambiarra. Cobrar do
   operador a imagem 700x600 antes do go-live pra este tratamento entrar no ar. */
@media (max-width: 640px) {
	.ctgd-hero:has(.ctgd-hero__midia--tem-mobile) {
		display: block;
		min-height: auto;
		/* Preto solido (pedido do operador, 2026-09-10, vendo a foto real no
		   celular): o fundo da foto mobile ja e bem escuro/preto, entao preto
		   solido emenda sem costura — nao mais o roxo da marca. */
		background: #000;
	}

	.ctgd-hero__midia--tem-mobile {
		position: static;
		inset: auto;
	}

	.ctgd-hero__midia--tem-mobile .ctgd-hero__midia-desktop {
		display: none;
	}

	/* .ctgd-hero__midia-mobile ja fica display:none por padrao (regra fora do
	   media query, la em cima) — aqui so precisa REexibir quando o container
	   tem a foto mobile de verdade. */
	.ctgd-hero__midia--tem-mobile .ctgd-hero__midia-mobile {
		display: block;
		width: 100%;
		height: auto;
		/* Largura total, proporcao real da foto, sem crop forcado (nunca cover aqui). */
	}

	.ctgd-hero__midia--tem-mobile + .ctgd-hero__scrim {
		display: none;
	}

	/* Grupo colado (regra item 4): padding-top curto empurrando o conteudo pra
	   logo abaixo da foto, gaps apertados entre kicker/h1/subtitulo/botoes —
	   tudo calibrado (e medido de verdade via getBoundingClientRect() na foto
	   real, attachment 162) pra caber no orcamento duro de 667px do item 5. */
	.ctgd-hero:has(.ctgd-hero__midia--tem-mobile) .ctgd-hero__conteudo {
		max-width: 100%;
		/* padding-top reduzido de 16px pra 8px, depois mais 50px de
		   margin-top negativo (pedido do operador, 2026-09-10, vendo num
		   celular real): sobe o kicker "LEME, RIO DE JANEIRO", agora
		   sobrepondo a parte de baixo da foto (fundo ja e escuro/preto ali,
		   emenda sem costura — mesma logica do fundo solido preto do bloco
		   inteiro). `position:relative;z-index:2` (regra base, fora do
		   media query) garante que o texto fica por cima da foto. */
		margin-top: -50px;
		padding: 8px var(--gutter) var(--sp-5);
	}

	.ctgd-hero:has(.ctgd-hero__midia--tem-mobile) .ctgd-hero__kicker {
		margin-bottom: 6px;
	}

	.ctgd-hero:has(.ctgd-hero__midia--tem-mobile) .ctgd-hero__conteudo h1 {
		/* Valor fixo em px, nao clamp — medido via getBoundingClientRect() contra
		   a foto/H1 reais (regra item 6): 3 linhas a 22px/1.15 cabem no orcamento. */
		font-size: 22px;
		line-height: 1.15;
		margin-bottom: 8px;
	}

	.ctgd-hero:has(.ctgd-hero__midia--tem-mobile) .ctgd-hero__subtitulo {
		font-size: 14px;
		line-height: 1.35;
		margin: 0;
		/* Clamp em 2 linhas: orcamento de altura fixo, nao cresce com o tamanho
		   real do texto (o copy completo continua visivel no desktop). */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		max-height: calc(14px * 1.35 * 2);
	}

	.ctgd-hero:has(.ctgd-hero__midia--tem-mobile) .ctgd-hero__acoes {
		flex-direction: column;
		margin-top: 10px;
		gap: var(--sp-2);
	}

	.ctgd-hero:has(.ctgd-hero__midia--tem-mobile) .ctgd-hero__acoes .ctgd-botao {
		width: 100%;
		justify-content: center;
	}
}

/* ---------- Cards ---------- */

.ctgd-grid-cards {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Variante centralizada: usa largura maxima fixa (nao 1fr) pra as faixas nao
   esticarem preenchendo o container inteiro quando sobra faixa vazia (ex:
   3 cards numa grade que cabe 4) — so assim justify-content:center tem
   espaco sobrando pra centralizar o conjunto. */
.ctgd-grid-cards--centro {
	grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
	justify-content: center;
}

.ctgd-grid-cards--centro .ctgd-card__titulo {
	font-size: var(--fs-300);
}

/* Sessao "Nossos parceiros" da Home (2026-09-14, ajustada em seguida a
   pedido do operador): grade de banners verticais dos parceiros de banner
   grande (ate 8), controlados pelo checkbox "Mostrar na Home" no CPT
   Parceiro. Usa a MESMA base `.ctgd-grid-cards` dos outros carrosseis do
   site (Turmas/Servicos/Professores) de proposito — ganha de graca o
   comportamento de carrossel com setas no mobile (`main.js`,
   `ctgdInicializarCarrosseis`), sem duplicar logica. No desktop, 4 colunas
   fixas (pedido explicito do operador); se sobrar mais de 4 parceiros, so
   quebra pra 2a linha, sem virar carrossel (isso so acontece no mobile). A
   pagina /parceiros/ completa continua com o layout proprio dela (secoes
   Master/Ouro/Apoiadores), sem alteracao. */
.ctgd-grid-cards--parceiros-home {
	grid-template-columns: repeat(4, 1fr);
}

@media (min-width: 641px) and (max-width: 900px) {
	.ctgd-grid-cards--parceiros-home {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Imagem pura do banner, sem card branco/padding/sombra e SEM CORTAR nada
   (pedido explicito do operador, corrigido em 2026-09-14 depois de ver a
   imagem cortada/espremida em quadrado: "nao esta o tamanho exato da
   imagem, e so colocar largura total que ele vai abracar tudo"). Largura
   total da coluna, altura automatica pra manter a proporcao real de cada
   banner enviado — sem `aspect-ratio` fixo nem `object-fit:cover` (isso
   cortava banners que nao vinham exatamente 4:5). */
.ctgd-parceiro-home-card {
	display: block;
	border-radius: 9px;
	overflow: hidden;
	transition: transform .15s ease;
}

.ctgd-parceiro-home-card:hover {
	transform: translateY(-4px);
}

/* Margem lateral maior no mobile, so na pagina /parceiros/ (pedido do
   operador, 2026-09-14: "abre mais a margem lateral"). Nao mexe no
   `--gutter` global (24px) pra nao afetar as outras paginas do site. */
@media (max-width: 640px) {
	.ctgd-pagina-parceiros .ctgd-container {
		padding-inline: 36px;
	}
}

/* Fileira de logos em /parceiros/ (por formato: Master/Ouro/Apoiadores).
   Usa a MESMA base `.ctgd-grid-cards` do carrossel da Home — no mobile,
   vira carrossel com largura total e setas automaticamente (pedido do
   operador, 2026-09-14, depois de ver no celular real que nao tinha ficado
   nem em largura total nem virado carrossel). No desktop, sobrescrito de
   volta pro layout original (fileira flex centralizada, tamanho natural
   de cada logo — nao faz sentido usar grid de colunas iguais aqui).
   Escopado com `min-width:641px` (NAO um selector generico sem media
   query): um `flex-wrap:wrap` sem media query aqui sobrevivia no mobile
   (a regra do carrossel mobile abaixo nunca reseta `flex-wrap`), fazendo
   os itens quebrarem linha em vez de ficar lado a lado no scroll
   horizontal — bug real reportado pelo operador ("o carrossel ainda ta
   mostrando duas imagens uma embaixo da outra"), corrigido restringindo
   este bloco inteiro ao desktop. */
@media (min-width: 641px) {
	.ctgd-grid-cards--parceiros {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-5);
		align-items: center;
		justify-content: center;
	}
}

/* Tamanho maximo do logo/banner em /parceiros/, por formato (desktop). O
   valor era inline (`max-width` no proprio `<a>`), mas isso tem prioridade
   sobre qualquer regra do CSS externo. Migrado pra classe. No mobile, o
   carrossel (regra generica de `.ctgd-grid-cards` acima) ja forca cada
   item a ocupar a largura total do slide (`flex:0 0 100%`) — o max-width
   e liberado aqui pra nao brigar com isso e cortar essa largura total. */
.ctgd-parceiro-logo--grande {
	max-width: 260px;
}

.ctgd-parceiro-logo--intermediario {
	max-width: 180px;
}

.ctgd-parceiro-logo--pequeno {
	max-width: 120px;
}

@media (max-width: 640px) {
	.ctgd-parceiro-logo--grande,
	.ctgd-parceiro-logo--intermediario,
	.ctgd-parceiro-logo--pequeno {
		max-width: none;
	}
}

.ctgd-parceiro-home-card img {
	width: 100%;
	height: auto;
	display: block;
}

.ctgd-carrossel {
	position: relative;
}

/* Base (fora de media query, escondida por padrao): so aparece dentro do
   @media (max-width:640px) abaixo. Tem que vir ANTES desse media query no
   arquivo — regra de especificidade igual, quem vier DEPOIS no cascade
   vence mesmo com media query nao batendo, entao colocar essa "escondida"
   depois do "display:flex" mobile anularia o carrossel inteiro (bug real
   encontrado e corrigido em 2026-09-10). */
.ctgd-carrossel__seta {
	display: none;
}

/* Carrossel no mobile (pedido do operador, 2026-09-10): em vez de empilhar
   todos os cards verticalmente (muita rolagem quando sao 7+, ex: Turmas),
   vira scroll horizontal com snap, mostrando um pedaco do proximo card pra
   sinalizar que da pra arrastar. Sem JS, so CSS (scroll-snap nativo). */
@media (max-width: 640px) {
	.ctgd-grid-cards {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: var(--sp-4);
		margin-inline: calc(var(--gutter) * -1);
		/* Card em largura total (pedido do operador, 2026-09-10, depois de
		   ver num celular real: a "espiada" do card vizinho ficava
		   espremida e a seta sobrava em cima da divisa entre os 2 cards).
		   Card ocupa 100% da faixa util (so o gutter padrao do site dos 2
		   lados, sem peek de vizinho) — 1 card por vez, como deslizar
		   entre "paginas". */
		padding-inline: var(--gutter);
		padding-bottom: var(--sp-3);
		scroll-padding-inline: var(--gutter);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* Bug real (2026-09-10): `.ctgd-grid-cards--centro` (variante do
		   desktop, ver acima) tambem seta justify-content:center, e isso
		   vazava pro carrossel mobile — um flex container com overflow e
		   justify-content:center/flex-end trava o scroll no inicio (o
		   navegador nao deixa chegar no comeco real do conteudo), cortando
		   o primeiro card e escondendo a "espiada" do proximo. Resetado
		   aqui, depois da regra --centro no CSS, pra sempre vencer. */
		justify-content: flex-start;
	}

	.ctgd-grid-cards::-webkit-scrollbar {
		display: none;
	}

	.ctgd-grid-cards > * {
		flex: 0 0 100%;
		scroll-snap-align: center;
	}

	/* Bug real (2026-09-10, "carrossel dancando"): os cards tambem levam a
	   classe `.ctgd-entra` (fade+sobe ao entrar no viewport, ver JS em
	   main.js), pensada pra revelar em scroll VERTICAL da pagina. Como o
	   IntersectionObserver considera o recorte de containers com overflow,
	   um card ainda fora da area visivel do carrossel (a direita, clipado)
	   pode nunca cruzar o threshold — e so "revelar" (disparando a mesma
	   animacao de fade/translateY) bem no meio do gesto de arrastar
	   horizontal, quando ele finalmente fica visivel. Resultado: o card
	   pula/sobe sozinho enquanto o usuario arrasta, parecendo "dancar" em
	   vez de deslizar normal. Corrigido desligando essa animacao so pros
	   cards de dentro de um carrossel — eles ja aparecem prontos. */
	.ctgd-grid-cards > .ctgd-entra {
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* Setas de navegacao do carrossel (pedido do operador, 2026-09-10):
	   wrapper e botoes injetados via JS em main.js (ctgdInicializarCarrosseis),
	   so aparecem no mobile. */
	.ctgd-carrossel__seta {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 36px;
		height: 36px;
		padding: 0;
		border: none;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.92);
		color: var(--cor-roxo);
		font-size: 20px;
		line-height: 1;
		box-shadow: 0 4px 12px rgba(55, 1, 79, 0.18);
		cursor: pointer;
		z-index: 5;
		transition: opacity 0.2s var(--easing);
	}

	.ctgd-carrossel__seta:disabled {
		opacity: 0;
		pointer-events: none;
	}

	.ctgd-carrossel__seta--esq {
		left: 4px;
	}

	.ctgd-carrossel__seta--dir {
		right: 4px;
	}
}

.ctgd-card {
	background: #fff;
	border-radius: var(--raio);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--sombra);
}

.ctgd-card__midia {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cor-areia-escura);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cor-roxo);
	border-radius: var(--raio);
}

/* Utilitario: cantos arredondados generosos (substitui o antigo corte diagonal) */
.ctgd-cortado {
	border-radius: var(--raio);
	overflow: hidden;
}

.ctgd-card__midia img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Variante quadrada (preview de Equipe na Home): a foto de perfil e sempre
   retrato, e o recorte 4/3 padrao dos outros cards (Turmas/Servicos, que
   usam foto na horizontal) cortava demais dos lados. */
.ctgd-card__midia--quadrado {
	aspect-ratio: 1 / 1;
}

.ctgd-card__corpo {
	padding: var(--sp-4);
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	flex: 1;
}

.ctgd-card__titulo {
	font-family: var(--fonte-heading);
	font-size: var(--fs-400);
	color: var(--cor-roxo-escuro);
	margin: 0;
}

.ctgd-card__texto {
	font-size: var(--fs-100);
	color: rgba(42, 32, 25, 0.75);
	margin: 0;
	flex: 1;
}

.ctgd-card__texto p {
	margin: 0 0 var(--sp-2);
}

.ctgd-card__texto p:last-child {
	margin-bottom: 0;
}

.ctgd-secao--roxo .ctgd-card {
	background: rgba(248, 241, 228, 0.06);
	box-shadow: none;
	border: 1px solid rgba(248, 241, 228, 0.16);
}

.ctgd-secao--roxo .ctgd-card__titulo {
	color: var(--cor-areia);
}

.ctgd-secao--roxo .ctgd-card__texto {
	color: rgba(248, 241, 228, 0.78);
}

/* ---------- Equipe (card largo, foto + texto completo lado a lado) ---------- */

.ctgd-equipe-lista {
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
}

.ctgd-equipe-card {
	display: grid;
	grid-template-columns: minmax(240px, 340px) 1fr;
	gap: var(--sp-6);
	background: #fff;
	border-radius: var(--raio);
	overflow: hidden;
	box-shadow: var(--sombra);
}

.ctgd-equipe-card__midia {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--cor-areia-escura);
}

.ctgd-equipe-card__midia img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ctgd-equipe-card__corpo {
	padding: var(--sp-5) var(--sp-5) var(--sp-5) 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--sp-2);
}

.ctgd-equipe-card__texto {
	font-size: var(--fs-100);
	color: rgba(42, 32, 25, 0.75);
}

.ctgd-equipe-card__texto p {
	margin: 0 0 var(--sp-2);
}

.ctgd-equipe-card__texto p:last-child {
	margin-bottom: 0;
}

@media (max-width: 720px) {
	.ctgd-equipe-card {
		grid-template-columns: 1fr;
	}

	.ctgd-equipe-card__midia {
		aspect-ratio: 4 / 3;
	}

	.ctgd-equipe-card__corpo {
		padding: var(--sp-4);
	}
}

/* ---------- Precos por frequencia, na pagina de Turmas (por cima do CTA) ---------- */

.ctgd-turma-precos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: var(--sp-3) 0 var(--sp-5);
}

.ctgd-turma-precos__item {
	display: inline-flex;
	align-items: center;
	padding: 0.4em 0.7em;
	border-radius: 8px;
	font-size: 0.78rem;
	font-weight: 700;
	background: rgba(90, 0, 135, 0.08);
	border: 1px solid rgba(90, 0, 135, 0.14);
	color: var(--cor-roxo-escuro);
	white-space: nowrap;
}

/* ---------- Card de turma (substitui a trilha linear) ---------- */

.ctgd-turma-card__faixa {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 0.3em 0.9em;
	border-radius: var(--raio-pill);
	font-size: var(--fs-100);
	font-weight: 600;
	background: rgba(90, 0, 135, 0.1);
	color: var(--cor-roxo);
}

/* ---------- Badges (status de turma, mantidos com hues distintos) ---------- */

.ctgd-badge-turma {
	display: inline-flex;
	align-items: center;
	padding: 0.25em 0.85em;
	font-size: var(--fs-100);
	font-weight: 600;
	border-radius: var(--raio-pill);
}

.ctgd-badge-turma--verde { background: rgba(91, 122, 76, 0.14); color: #43602f; }
.ctgd-badge-turma--azul { background: rgba(59, 108, 130, 0.14); color: #2c5a6e; }
.ctgd-badge-turma--azul-escuro { background: rgba(37, 79, 99, 0.16); color: #1f4a5c; }
.ctgd-badge-turma--dourado { background: rgba(212, 175, 55, 0.22); color: #8a6a1a; }
.ctgd-badge-turma--laranja { background: rgba(196, 120, 42, 0.18); color: #8a4d16; }
.ctgd-badge-turma--roxo { background: rgba(90, 0, 135, 0.14); color: var(--cor-roxo); }
.ctgd-badge-turma--oliva { background: rgba(120, 113, 34, 0.16); color: #6b6420; }

/* ---------- Calendario / Grade de horarios ---------- */

.ctgd-calendario {
	display: grid;
	grid-template-columns: 64px repeat(7, minmax(90px, 1fr));
	border: 1px solid rgba(90, 0, 135, 0.14);
	border-radius: var(--raio);
	overflow: hidden;
	background: #fff;
}

.ctgd-calendario__cabecalho {
	background: var(--cor-roxo);
	color: var(--cor-areia);
	padding: 0.5em 0.35em;
	font-size: 0.78rem;
	font-weight: 600;
	text-align: center;
	position: sticky;
	top: 0;
}

.ctgd-calendario__hora {
	padding: 0.4em;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--cor-roxo);
	background: var(--cor-areia-escura);
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.ctgd-calendario__celula {
	padding: 3px;
	border-top: 1px solid rgba(90, 0, 135, 0.08);
	border-left: 1px solid rgba(90, 0, 135, 0.08);
	min-height: 46px;
}

.ctgd-calendario__aula {
	background: rgba(90, 0, 135, 0.08);
	border-left: 2px solid var(--cor-roxo);
	border-radius: 5px;
	padding: 3px 5px;
	font-size: 10px;
	line-height: 1.3;
	margin-bottom: 3px;
}

.ctgd-calendario__aula strong {
	display: block;
	color: var(--cor-roxo-escuro);
}

@media (max-width: 900px) {
	.ctgd-calendario {
		display: none;
	}

	.ctgd-calendario-mobile {
		display: block;
	}
}

.ctgd-calendario-mobile {
	display: none;
}

/* ---------- WhatsApp flutuante ---------- */

.ctgd-whatsapp-flutuante {
	position: fixed;
	right: var(--sp-4);
	bottom: var(--sp-4);
	z-index: 50;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--cor-cta);
	color: var(--cor-areia);
	display: grid;
	place-items: center;
	box-shadow: var(--sombra-flutuante);
	transition: transform 0.15s var(--easing);
}

.ctgd-whatsapp-flutuante:hover {
	transform: scale(1.06);
}

/* ---------- Footer ---------- */

.ctgd-site-footer {
	position: relative;
	/* Sem overflow:hidden de proposito: o selo (.ctgd-site-footer__selo) precisa
	   estourar pra cima da borda do footer (metade sobre a secao anterior); com
	   overflow:hidden essa metade de cima ficava cortada. */
	background: var(--cor-roxo-escuro);
	color: rgba(248, 241, 228, 0.85);
	padding: 0 0 var(--sp-5);
	font-size: var(--fs-100);
}

/* O padding de cima mora no container, nao no footer: assim a onda decorativa
   (.ctgd-onda, o filho anterior a este container) fica colada na borda real
   do topo do rodape, onde o selo (.ctgd-site-footer__selo) se sobrepoe. Com o
   padding no footer, a onda desenhava 80px mais abaixo, criando uma "linha
   dupla" (borda reta do footer + a onda de verdade, mais embaixo). */
.ctgd-site-footer .ctgd-container {
	padding-top: var(--sp-8);
}

.ctgd-site-footer__midia {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.ctgd-site-footer__midia img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ctgd-site-footer__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(55, 1, 79, 0.94) 0%, rgba(55, 1, 79, 0.9) 100%);
}

.ctgd-site-footer > .ctgd-container {
	position: relative;
	z-index: 2;
}

/* A onda decorativa (.ctgd-onda) e o primeiro filho do footer, sem position:
   sem isso ela pintaria ATRAS do scrim/foto de fundo (z-index 0/1), sumindo. */
.ctgd-site-footer > .ctgd-onda {
	position: relative;
	z-index: 2;
}

/* Selo/logo do rodape sobreposto bem em cima da divisa com a secao anterior:
   translateY(-50%) centraliza o selo NA linha top:0 do footer, metade pra
   cima (sobre a secao de cima), metade pra baixo (sobre a onda/foto). */
.ctgd-site-footer__selo {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	line-height: 0;
}

.ctgd-site-footer__selo img {
	display: block;
	width: 165px;
	height: 165px;
	border-radius: 50%;
	box-shadow: var(--sombra-flutuante);
}

.ctgd-site-footer a {
	color: var(--cor-areia);
}

.ctgd-footer__colunas {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	margin-bottom: var(--sp-6);
}

.ctgd-footer__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--sp-3);
}

.ctgd-footer__cta-texto {
	margin: 0;
	color: rgba(248, 241, 228, 0.85);
}

.ctgd-footer__lista--icones a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
}

.ctgd-footer__lista--icones {
	gap: var(--sp-3);
}

.ctgd-footer__titulo {
	font-family: var(--fonte-heading);
	font-size: var(--fs-300);
	color: var(--cor-areia);
	margin-bottom: var(--sp-3);
}

.ctgd-footer__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.ctgd-footer__lista a {
	transition: color 0.2s var(--easing);
}

.ctgd-footer__lista a:hover,
.ctgd-footer__lista a:focus-visible {
	color: var(--cor-dourado);
}

.ctgd-footer__redes {
	display: flex;
	gap: var(--sp-3);
	margin-top: var(--sp-3);
}

.ctgd-footer__rede {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(248, 241, 228, 0.1);
	transition: background-color 0.15s;
}

.ctgd-footer__rede:hover {
	background: var(--cor-dourado);
	color: var(--cor-roxo-escuro);
}

.ctgd-footer__base {
	border-top: 1px solid rgba(248, 241, 228, 0.14);
	padding-top: var(--sp-4);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--sp-2);
}

.ctgd-footer__base p {
	margin: 0;
}

/* ---------- Entrada em scroll ---------- */

.ctgd-entra {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--dur-entrada) var(--easing), transform var(--dur-entrada) var(--easing);
}

.ctgd-entra.is-visivel {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ctgd-entra,
	.ctgd-botao,
	.ctgd-whatsapp-flutuante {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}

/* ---------- Acessibilidade: foco visivel ---------- */

a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--cor-roxo);
	outline-offset: 2px;
}

/* ---------- Formularios publicos (matricula, checkout, painel do aluno) ---------- */

.ctgd-form__bloco {
	background: #fff;
	border-radius: var(--raio);
	padding: var(--sp-5);
	margin-bottom: var(--sp-4);
	box-shadow: var(--sombra);
}

.ctgd-form__bloco h3 {
	margin-top: 0;
	color: var(--cor-roxo-escuro);
	font-size: var(--fs-300);
}

.ctgd-form__grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--sp-3);
}

.ctgd-form__campo {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}

.ctgd-form__campo--largo {
	grid-column: 1 / -1;
}

.ctgd-form__campo label {
	font-weight: 600;
	font-size: var(--fs-100);
	color: var(--cor-tinta);
}

.ctgd-form__campo input[type="text"],
.ctgd-form__campo input[type="email"],
.ctgd-form__campo input[type="tel"],
.ctgd-form__campo input[type="date"],
.ctgd-form__campo input[type="password"],
.ctgd-form__campo input[type="number"],
.ctgd-form__campo select,
.ctgd-form__campo textarea {
	font-family: var(--fonte-corpo);
	font-size: var(--fs-200);
	padding: var(--sp-2) var(--sp-3);
	border: 2px solid var(--cor-areia-escura);
	border-radius: 12px;
	background: var(--cor-areia);
	color: var(--cor-tinta);
}

.ctgd-form__campo input:focus,
.ctgd-form__campo select:focus,
.ctgd-form__campo textarea:focus {
	outline: none;
	border-color: var(--cor-roxo);
}

.ctgd-form__checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	font-size: var(--fs-100);
}

.ctgd-form__checkbox input {
	margin-top: 4px;
}

.ctgd-form__aviso {
	border-radius: 12px;
	padding: var(--sp-3);
	margin-bottom: var(--sp-4);
	font-weight: 600;
}

.ctgd-form__aviso--erro {
	background: rgba(178, 59, 59, 0.12);
	color: var(--cor-erro);
}

.ctgd-form__aviso--sucesso {
	background: rgba(91, 122, 76, 0.14);
	color: var(--cor-sucesso);
}

/* ---------- Compra de pacote avulso (ex: aulas particulares via Pix) ---------- */

.ctgd-pacote {
	margin-top: var(--sp-3);
}

.ctgd-pacote summary {
	cursor: pointer;
	list-style: none;
}

.ctgd-pacote summary::-webkit-details-marker {
	display: none;
}

.ctgd-pacote__form {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin-top: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: 1px solid rgba(90, 0, 135, 0.12);
}

.ctgd-pacote__total {
	margin: 0;
	font-size: var(--fs-200);
	color: var(--cor-roxo-escuro);
}

/* ---------- Painel do Aluno: menu lateral + abas ---------- */

.ctgd-painel {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--sp-5);
	align-items: start;
}

.ctgd-painel__menu {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ctgd-painel__item {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 0.7em 0.9em;
	border: none;
	border-radius: var(--raio);
	background: transparent;
	color: var(--cor-tinta);
	font-family: var(--fonte-corpo);
	font-size: var(--fs-100);
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.ctgd-painel__item:hover {
	background: rgba(90, 0, 135, 0.06);
}

.ctgd-painel__item.is-ativo {
	background: rgba(110, 30, 46, 0.1);
	color: #6e1e2e;
}

.ctgd-painel__conteudo {
	min-width: 0;
}

.ctgd-painel__aba {
	display: none;
}

.ctgd-painel__aba.is-ativa {
	display: block;
}

@media (max-width: 720px) {
	.ctgd-painel {
		grid-template-columns: 1fr;
	}

	/* flex-wrap (nao scroll horizontal) de proposito: um scroll escondido sem
	   nenhuma pista visual fazia a ultima aba ("Minha conta") parecer que
	   tinha sumido (achado real, 2026-09-13) - com wrap, todas ficam sempre
	   visiveis, só quebrando pra 2 linhas se nao couber numa so. */
	.ctgd-painel__menu {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 6px;
	}

	.ctgd-painel__item {
		flex-shrink: 0;
		white-space: nowrap;
		padding: 0.5em 0.7em;
		font-size: 0.78rem;
		gap: 6px;
	}

	.ctgd-painel__item svg {
		width: 15px;
		height: 15px;
	}
}

/* Painel do Aluno: secao curta (so o menu+conteudo, sem CTA extra depois) fazia
   o selo do rodape (.ctgd-site-footer__selo, sobreposto na divisa) quase
   encostar no card de baixo, com padding-bottom padrao da .ctgd-secao (achado
   real, 2026-09-13). Reforca so aqui, mais ainda no mobile onde o card some
   antes e sobra menos espaco natural.
   Especificidade dobrada (.ctgd-secao.ctgd-painel-secao) de proposito: a regra
   generica `@media (max-width:640px) .ctgd-secao { padding-block: ... }` mais
   abaixo neste arquivo tem a MESMA especificidade que `.ctgd-painel-secao`
   sozinho e vence por ordem de chegada, zerando esse reforco em celular de
   verdade (achado real, 2026-09-13 — via inspecao do CSS servido em producao,
   o ajuste "funcionava" so entre 641-720px, nunca em telefone). */
.ctgd-secao.ctgd-painel-secao {
	padding-bottom: 130px;
}

@media (max-width: 720px) {
	.ctgd-secao.ctgd-painel-secao {
		padding-bottom: 600px;
	}
}

/* ---------- Chamada / presenca por link (page-chamada.php) ---------- */

.ctgd-chamada-lista {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.ctgd-chamada-aluno {
	border: 1px solid var(--cor-areia-escura);
	border-radius: 12px;
	padding: var(--sp-3);
	background: #fff;
}

.ctgd-chamada-aluno__nome {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	cursor: pointer;
}

.ctgd-chamada-aluno__nome input[type="checkbox"] {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	accent-color: var(--cor-roxo);
}

.ctgd-chamada-aluno__obs {
	display: block;
	width: 100%;
	margin-top: var(--sp-2);
	padding: 8px 10px;
	border: 1px solid var(--cor-areia-escura);
	border-radius: 8px;
	font-size: 13px;
	font-family: var(--fonte-corpo);
}

/* ---------- Contato: formulario + info + mapa ---------- */

.ctgd-contato-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: var(--sp-5);
	align-items: start;
}

@media (max-width: 860px) {
	.ctgd-contato-grid {
		grid-template-columns: 1fr;
	}
}

.ctgd-contato-info {
	background: var(--cor-areia-escura);
	border-radius: var(--raio);
	padding: var(--sp-5);
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.ctgd-contato-info-bloco h3 {
	font-family: var(--fonte-heading);
	font-size: var(--fs-300);
	color: var(--cor-roxo-escuro);
	margin: 0 0 var(--sp-2);
}

.ctgd-contato-info-item {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	text-decoration: none;
	color: var(--cor-tinta);
	word-break: break-word;
}

.ctgd-contato-info-item:hover {
	color: var(--cor-cta);
}

.ctgd-contato-mapa {
	width: 100%;
	height: 420px;
	line-height: 0;
}

.ctgd-contato-mapa iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

@media (max-width: 640px) {
	.ctgd-contato-mapa {
		height: 300px;
	}
}

.ctgd-pix__caixa {
	background: #fff;
	border-radius: var(--raio);
	padding: var(--sp-5);
	box-shadow: var(--sombra);
	text-align: center;
	max-width: 420px;
	margin-inline: auto;
}

.ctgd-pix__qrcode {
	width: 220px;
	height: 220px;
	margin-inline: auto;
	border-radius: 12px;
	border: 2px solid var(--cor-areia-escura);
}

.ctgd-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: var(--raio-pill);
	font-size: 11.5px;
	font-weight: 600;
}

.ctgd-badge--pago {
	background: rgba(31, 157, 107, 0.12);
	color: #1f9d6b;
}

.ctgd-badge--pendente {
	background: rgba(212, 138, 31, 0.14);
	color: #a5680f;
}

.ctgd-badge--vencido {
	background: rgba(194, 59, 59, 0.12);
	color: #c23b3b;
}

.ctgd-badge--inativo {
	background: rgba(107, 114, 128, 0.14);
	color: #6b7280;
}

/* ---------- Grafico de evolucao mensal (Painel do Aluno) ---------- */

.ctgd-grafico-evolucao {
	width: 100%;
	height: auto;
	overflow: visible;
}

.ctgd-grafico-evolucao__guia {
	stroke: var(--cor-areia-escura);
	stroke-width: 1;
}

.ctgd-grafico-evolucao__eixo {
	font-size: 11px;
	fill: var(--cor-tinta);
	text-anchor: end;
	opacity: 0.6;
}

.ctgd-grafico-evolucao__linha {
	fill: none;
	stroke: var(--cor-roxo);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ctgd-grafico-evolucao__ponto {
	fill: var(--cor-roxo);
	stroke: #fff;
	stroke-width: 2;
}

.ctgd-grafico-evolucao__barra {
	transition: opacity 0.2s var(--easing);
}

.ctgd-grafico-evolucao__barra:hover {
	opacity: 0.85;
}

.ctgd-grafico-evolucao__nota {
	font-size: 12px;
	font-weight: 700;
	fill: var(--cor-roxo-escuro);
	text-anchor: middle;
}

.ctgd-grafico-evolucao__mes {
	font-size: 11px;
	fill: var(--cor-tinta);
	text-anchor: middle;
	opacity: 0.7;
}

.ctgd-evolucao-legenda {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-3);
	font-size: 12px;
	color: var(--cor-tinta);
}

.ctgd-evolucao-legenda span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ctgd-evolucao-legenda i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}

.ctgd-evolucao-fundamentos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--sp-2);
	margin-top: var(--sp-3);
}

/* Sao sempre 5 fundamentos (impar): sem isso, quando a grade fecha em 2 ou 4
   colunas o ultimo (Condicionamento) sobra sozinho numa linha, do tamanho de
   1 coluna so, parecendo quebrado/orfao (achado real, 2026-09-13). */
.ctgd-evolucao-fundamento:last-child {
	grid-column: 1 / -1;
}

.ctgd-evolucao-fundamento {
	border: 1px solid var(--cor-areia-escura);
	border-radius: 12px;
	padding: var(--sp-2) var(--sp-3);
	background: var(--cor-areia);
}

.ctgd-evolucao-fundamento__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	margin: 0;
	font-size: var(--fs-100);
}

.ctgd-evolucao-fundamento__topo span {
	color: var(--cor-roxo);
	font-weight: 600;
	white-space: nowrap;
}

.ctgd-evolucao-fundamento__obs {
	margin: var(--sp-1) 0 0;
	font-size: 12.5px;
	color: var(--cor-tinta);
	opacity: 0.85;
}

/* ---------- Acordeao de evolucao mensal (Painel do Aluno, so leitura) ---------- */

.ctgd-evolucao-acordeao {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
}

.ctgd-evolucao-mes {
	border: 1px solid var(--cor-areia-escura);
	border-radius: 12px;
	overflow: hidden;
}

.ctgd-evolucao-mes__cabecalho {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	width: 100%;
	padding: var(--sp-3);
	background: var(--cor-areia);
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--fonte-corpo);
}

.ctgd-evolucao-mes__nome {
	font-weight: 700;
	color: var(--cor-roxo-escuro);
}

.ctgd-evolucao-mes__resumo {
	color: var(--cor-roxo);
	font-weight: 600;
	font-size: var(--fs-100);
	margin-right: auto;
}

.ctgd-evolucao-mes__cabecalho svg {
	transition: transform 0.2s var(--easing);
	flex-shrink: 0;
}

.ctgd-evolucao-mes.is-aberto .ctgd-evolucao-mes__cabecalho svg {
	transform: rotate(180deg);
}

.ctgd-evolucao-mes__corpo {
	display: none;
	padding: var(--sp-3);
	border-top: 1px solid var(--cor-areia-escura);
}

.ctgd-evolucao-mes.is-aberto .ctgd-evolucao-mes__corpo {
	display: block;
}

/* ---------- Cursos/Aulas (Painel do Aluno, aba "Aulas") ---------- */

.ctgd-cursos-lista {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
}

.ctgd-curso-acordeao {
	border: 1px solid var(--cor-areia-escura);
	border-radius: 12px;
	overflow: hidden;
}

.ctgd-curso-acordeao__cabecalho {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	width: 100%;
	padding: var(--sp-3);
	background: linear-gradient(135deg, #6e1e2e 0%, var(--cor-roxo) 100%);
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--fonte-corpo);
	color: #fff;
	transition: filter 0.2s var(--easing);
}

.ctgd-curso-acordeao__cabecalho:hover {
	filter: brightness(1.12);
}

.ctgd-curso-acordeao__cabecalho > span {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ctgd-curso-acordeao__titulo {
	font-weight: 700;
	color: #fff;
}

.ctgd-curso-acordeao__resumo {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.8);
}

.ctgd-curso-acordeao__cabecalho svg {
	color: #fff;
	transition: transform 0.2s var(--easing);
	flex-shrink: 0;
}

.ctgd-curso-acordeao.is-aberto .ctgd-curso-acordeao__cabecalho svg {
	transform: rotate(180deg);
}

.ctgd-curso-acordeao__corpo {
	display: none;
	padding: var(--sp-3);
	border-top: 1px solid var(--cor-areia-escura);
}

.ctgd-curso-acordeao.is-aberto .ctgd-curso-acordeao__corpo {
	display: block;
}

.ctgd-curso-acordeao__descricao {
	margin: 0 0 var(--sp-3);
	color: var(--cor-tinta);
	font-size: var(--fs-100);
}

/* Grade de miniaturas das aulas (estilo Hotmart/catalogo) — antes era uma
   lista vertical com o video de cada aula ja incorporado e tocando; nao
   escalava (30 aulas = 30 iframes pesados empilhados). Agora so a miniatura
   (thumbnail real do YouTube, sem chamada de API) fica sempre visivel; o
   video/descricao/anexos so carregam no modal, ao clicar (ctgd-modal-aula
   abaixo) — pedido do operador, 2026-09-14. */
.ctgd-aulas-grade {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--sp-3);
	margin-top: var(--sp-2);
}

/* Modulo (ex: "Saque", "Bloqueio") vira um MINI ACORDEAO dentro do acordeao
   "master" do curso — agrupa aulas relacionadas e ainda economiza espaco
   fechado por padrao, pra nao virar uma grade unica gigante conforme o curso
   cresce. Pedido do operador, 2026-09-14. */
.ctgd-aulas-modulo {
	margin-top: var(--sp-3);
	border: 1px solid var(--cor-areia-escura);
	border-radius: 10px;
	overflow: hidden;
}

.ctgd-aulas-modulo__cabecalho {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	width: 100%;
	padding: 0.7em var(--sp-3);
	background: var(--cor-areia);
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--fonte-corpo);
	transition: background 0.15s var(--easing);
}

.ctgd-aulas-modulo__cabecalho:hover {
	background: var(--cor-areia-escura);
}

.ctgd-aulas-modulo__titulo {
	font-size: var(--fs-100);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
	color: #6e1e2e;
}

.ctgd-aulas-modulo__contagem {
	margin-right: auto;
	font-size: 12px;
	color: var(--cor-tinta);
	opacity: 0.7;
}

.ctgd-aulas-modulo__cabecalho svg {
	color: #6e1e2e;
	flex-shrink: 0;
	transition: transform 0.2s var(--easing);
}

.ctgd-aulas-modulo.is-aberto .ctgd-aulas-modulo__cabecalho svg {
	transform: rotate(180deg);
}

.ctgd-aulas-modulo__corpo {
	display: none;
	padding: var(--sp-3);
}

.ctgd-aulas-modulo.is-aberto .ctgd-aulas-modulo__corpo {
	display: block;
}

.ctgd-aula-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
	background: none;
	border: none;
	font-family: var(--fonte-corpo);
	text-align: left;
	cursor: pointer;
}

.ctgd-aula-card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background: var(--cor-roxo-escuro);
}

.ctgd-aula-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ctgd-aula-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(20, 5, 30, 0.25);
	transition: background 0.2s var(--easing);
}

.ctgd-aula-card:hover .ctgd-aula-card__play {
	background: rgba(20, 5, 30, 0.45);
}

.ctgd-aula-card__titulo {
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--cor-roxo-escuro);
}

/* Modal de video (aberto ao clicar numa .ctgd-aula-card) */
.ctgd-modal-aula-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(20, 5, 30, 0.78);
}

.ctgd-modal-aula-overlay.is-aberto {
	display: flex;
}

.ctgd-modal-aula {
	position: relative;
	width: 100%;
	max-width: 720px;
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 16px;
	padding: var(--sp-4);
}

.ctgd-modal-aula__fechar {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	color: var(--cor-tinta);
	cursor: pointer;
	z-index: 1;
}

.ctgd-modal-aula__video {
	position: relative;
	padding-top: 56.25%;
	border-radius: 12px;
	overflow: hidden;
	background: #000;
	margin-bottom: var(--sp-3);
}

.ctgd-modal-aula__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ctgd-modal-aula__titulo {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-200);
	color: var(--cor-roxo-escuro);
}

.ctgd-modal-aula__descricao {
	margin: 0 0 var(--sp-3);
	color: var(--cor-tinta);
	font-size: var(--fs-100);
}

.ctgd-modal-aula__descricao:empty,
.ctgd-aula-item__anexos:empty {
	display: none;
}

.ctgd-aula-item__anexos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.ctgd-aula-item__anexos a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--cor-areia-escura);
	border-radius: var(--raio-pill);
	color: var(--cor-roxo-escuro);
	text-decoration: none;
	font-size: 12.5px;
	font-weight: 600;
}

.ctgd-aula-item__anexos a:hover {
	background: var(--cor-areia);
}

.ctgd-pix__payload {
	font-family: monospace;
	font-size: var(--fs-100);
	word-break: break-all;
	background: var(--cor-areia);
	border-radius: 12px;
	padding: var(--sp-3);
	margin-block: var(--sp-3);
}

/* ---------- Tela de login (pagina standalone /entrar/) ---------- */

body.ctgd-pagina-login {
	margin: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background: var(--cor-roxo-escuro);
	overflow-x: hidden;
}

.ctgd-login-fundo {
	position: fixed;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.4;
	z-index: 0;
}

.ctgd-login-overlay {
	position: fixed;
	inset: 0;
	background: linear-gradient(160deg, rgba(55, 1, 79, 0.93) 0%, rgba(30, 1, 44, 0.96) 55%, rgba(212, 175, 55, 0.14) 100%);
	z-index: 1;
}

.ctgd-login-card {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 420px;
	margin: 40px 20px;
	background: rgba(255, 255, 255, 0.07);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--raio);
	padding: 44px 38px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.ctgd-login-logo {
	text-align: center;
	margin-bottom: var(--sp-5);
}

.ctgd-login-logo img {
	display: block;
	height: 40px;
	width: auto;
	margin: 0 auto;
}

.ctgd-login-cabecalho {
	text-align: center;
	margin-bottom: var(--sp-5);
}

.ctgd-login-cabecalho h1 {
	font-family: var(--fonte-heading);
	font-size: var(--fs-300);
	color: #fff;
	margin-bottom: 6px;
}

.ctgd-login-cabecalho p {
	color: rgba(255, 255, 255, 0.65);
	font-size: var(--fs-100);
}

.ctgd-login-campo {
	margin-bottom: var(--sp-3);
}

.ctgd-login-campo label {
	display: block;
	font-size: 0.76rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.78);
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ctgd-login-campo input {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid rgba(255, 255, 255, 0.18);
	border-radius: 9px;
	font-size: 0.92rem;
	font-family: var(--fonte-corpo);
	color: #fff;
	background: rgba(255, 255, 255, 0.07);
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.ctgd-login-campo input:focus {
	outline: none;
	border-color: var(--cor-dourado);
	background: rgba(255, 255, 255, 0.1);
	box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}

.ctgd-login-campo input::placeholder {
	color: rgba(255, 255, 255, 0.35);
}

.ctgd-login-campo__senha {
	position: relative;
}

.ctgd-login-campo__senha input {
	padding-right: 44px;
}

.ctgd-login-mostrar-senha {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 7px;
	color: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	transition: color 0.15s, background 0.15s;
}

.ctgd-login-mostrar-senha:hover,
.ctgd-login-mostrar-senha:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
}

.ctgd-login-mostrar-senha__icone-ocultar {
	display: none;
}

.ctgd-login-mostrar-senha[aria-pressed="true"] .ctgd-login-mostrar-senha__icone-mostrar {
	display: none;
}

.ctgd-login-mostrar-senha[aria-pressed="true"] .ctgd-login-mostrar-senha__icone-ocultar {
	display: flex;
}

.ctgd-login-campo__rodape {
	display: flex;
	justify-content: flex-end;
	margin-top: 7px;
}

.ctgd-login-campo__rodape a {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	font-weight: 600;
}

.ctgd-login-campo__rodape a:hover {
	color: var(--cor-dourado);
}

.ctgd-login-enviar {
	width: 100%;
	padding: 14px;
	background: var(--cor-dourado);
	color: var(--cor-roxo-escuro);
	border: none;
	border-radius: 9px;
	font-size: 0.95rem;
	font-weight: 700;
	font-family: var(--fonte-heading);
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: background 0.18s, transform 0.1s;
	margin-top: var(--sp-2);
}

.ctgd-login-enviar:hover {
	background: #e6c766;
}

.ctgd-login-enviar:active {
	transform: scale(0.99);
}

.ctgd-login-aviso {
	border-radius: 9px;
	padding: 11px 14px;
	font-size: 0.84rem;
	margin-bottom: var(--sp-3);
}

.ctgd-login-aviso--erro {
	background: rgba(220, 38, 38, 0.15);
	border: 1px solid rgba(252, 165, 165, 0.4);
	color: #fca5a5;
}

.ctgd-login-divisor {
	display: flex;
	align-items: center;
	gap: 12px;
	color: rgba(255, 255, 255, 0.35);
	font-size: 0.75rem;
	margin: var(--sp-4) 0;
}

.ctgd-login-divisor::before,
.ctgd-login-divisor::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.14);
}

.ctgd-login-rodape {
	text-align: center;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.55);
}

.ctgd-login-rodape a {
	color: var(--cor-dourado);
	font-weight: 600;
	text-decoration: none;
}

.ctgd-login-rodape a:hover {
	text-decoration: underline;
}

@media (max-width: 480px) {
	.ctgd-login-card {
		padding: 34px 26px;
	}
}

/* ---------- Responsivo ---------- */

@media (max-width: 640px) {
	h1 { font-size: var(--fs-500); }
	h2 { font-size: var(--fs-400); }
	.ctgd-secao { padding-block: var(--sp-6); }

	/* Titulo de secao sempre centraliza no mobile (regra permanente de Hero,
	   secao 4), mesmo em paginas que nunca tiveram essa regra aplicada porque
	   nao passam pelo `.ctgd-entra { text-align:center }` inline ja usado na
	   Home/Equipe. Paragrafo corrido continua a esquerda (default), so so o
	   titulo e a linha de "subtitulo" (cargo/papel logo abaixo do nome, nos
	   blocos de bio de /quem-somos/) centralizam, nunca a bio inteira. */
	.ctgd-titulo-secao,
	.ctgd-subtitulo-secao {
		text-align: center;
	}

	/* Botao de CTA "de fechamento" fora do Hero centraliza no mobile (regra
	   permanente de Hero, secao 4) — a coluna do rodape ja empilha sozinha
	   (grid auto-fit), mas ficava alinhada a esquerda como as outras 3
	   colunas de lista; aqui e uma chamada de acao, nao uma lista de links. */
	.ctgd-footer__cta {
		align-items: center;
		text-align: center;
	}
}