/*
Theme Name: CitadelaWP Child
Theme URI: https://auriculoterapia.net.br/
Description: Child theme do CitadelaWP para o site Auriculoterapia.net.br.
Author: Auriculoterapia.net.br
Template: citadelawp
Version: 1.0.0
Text Domain: citadelawp-child
*/


/* ==========================================================================
   AURICULOTERAPIA.NET.BR
   CPT PONTO
   Framework específico das páginas individuais dos pontos auriculares
   ========================================================================== */


/* ==========================================================================
   01. VARIÁVEIS
   ========================================================================== */

:root {

	--auriculo-container: 1200px;

	--auriculo-sidebar: 340px;

	--auriculo-gap: 42px;

	--auriculo-text: #333333;

	--auriculo-title: #222222;

	--auriculo-border: #e5e5e5;

	--auriculo-surface: #fafafa;

	--auriculo-white: #ffffff;

	--auriculo-transition: .25s ease;

}


/* ==========================================================================
   02. BASE
   ========================================================================== */

.single-ponto *,
.single-ponto *::before,
.single-ponto *::after {

	box-sizing: border-box;

}


/*
 * O tema já fornece as fontes configuradas no WordPress.
 * Aqui apenas definimos qual família será utilizada em cada função.
 */

.single-ponto {

	color: var(--auriculo-text);

	font-family: "Montserrat", sans-serif;

	-webkit-font-smoothing: antialiased;

	text-rendering: optimizeLegibility;

}


/*
 * Textos corridos.
 */

.single-ponto p,
.single-ponto li,
.single-ponto td,
.single-ponto th,
.single-ponto span {

	font-family: "Montserrat", sans-serif;

}


/*
 * Títulos.
 */

.single-ponto h1,
.single-ponto h2,
.single-ponto h3,
.single-ponto h4,
.single-ponto h5,
.single-ponto h6 {

	font-family: "Roboto", sans-serif;

	font-weight: 700;

	color: var(--auriculo-title);

}


/*
 * Imagens.
 */

.single-ponto img {

	display: block;

	max-width: 100%;

	height: auto;

	border: 0;

}


/*
 * Links.
 */

.single-ponto a {

	text-decoration: none;

	transition: var(--auriculo-transition);

}


/* ==========================================================================
   03. CONTAINER PRINCIPAL
   ========================================================================== */

.single-ponto {

	width: 100%;

}


/*
 * Container geral da página.
 *
 * Mantemos uma largura equivalente à lógica utilizada no RockCentral,
 * adaptada ao conteúdo do Auriculoterapia.Net.Br.
 */

.single-ponto .ponto-layout {

	width: min(
		calc(100% - 48px),
		var(--auriculo-container)
	);

	margin: 48px auto 70px;

	display: grid;

	grid-template-columns:
		var(--auriculo-sidebar)
		minmax(0, 1fr);

	gap: var(--auriculo-gap);

	align-items: start;

}


/* ==========================================================================
   04. SIDEBAR
   ========================================================================== */


/*
 * A sidebar fica deliberadamente à ESQUERDA.
 *
 * No RockCentral a estrutura equivalente fica à direita.
 * Esta é a única alteração estrutural deliberada entre os dois projetos.
 */

.single-ponto .ponto-sidebar {

	order: 1;

	width: 100%;

	min-width: 0;

	display: flex;

	flex-direction: column;

	gap: 28px;

}


/*
 * O conteúdo principal fica à direita.
 */

.single-ponto .ponto-content {

	order: 2;

	min-width: 0;

}


/* ==========================================================================
   05. IMAGEM PRINCIPAL
   ========================================================================== */


/*
 * Bloco que contém a imagem principal.
 */

.single-ponto .ponto-imagem-principal {

	width: 100%;

	margin: 0 0 28px;

}


/*
 * O link da imagem ocupa todo o bloco.
 *
 * A classe glightbox-cover é a mesma utilizada pelo RockCentral
 * para imagens individuais.
 */

.single-ponto .ponto-imagem-principal a {

	display: block;

	width: 100%;

	text-decoration: none;

}


/*
 * A imagem da sidebar deve ocupar toda a largura disponível.
 *
 * Não forçamos aqui aspect-ratio.
 *
 * A proporção definitiva será determinada pela própria imagem,
 * permitindo utilizar posteriormente a imagem quadrada que você
 * pretende adotar para os pontos auriculares.
 */

.single-ponto .ponto-imagem-principal img {

	display: block;

	width: 100%;

	height: auto;

	margin: 0;

	border: 0;

}


/*
 * Pequena interação visual apenas no estado hover.
 *
 * Não aplicamos zoom ou transformação na imagem, pois o comportamento
 * do lightbox deve permanecer independente do CSS da página.
 */

.single-ponto .ponto-imagem-principal a:hover img {

	opacity: .96;

}


/* ==========================================================================
   06. LEGENDA DA IMAGEM PRINCIPAL
   ========================================================================== */

.single-ponto .ponto-imagem-legenda {

	margin: 8px 0 0;

	font-family: "Montserrat", sans-serif;

	font-size: 12px;

	line-height: 1.5;

	text-align: center;

	color: #777777;

}


/*
 * Crédito da imagem.
 */

.single-ponto .ponto-imagem-credito {

	margin: 4px 0 0;

	font-family: "Montserrat", sans-serif;

	font-size: 11px;

	line-height: 1.4;

	text-align: center;

	color: #888888;

}


/* ==========================================================================
   07. PICTOGRAMAS — MÉTODOS DE ESTÍMULO
   ========================================================================== */


/*
 * O bloco ficará imediatamente abaixo da imagem principal.
 */

.single-ponto .ponto-estimulos {

	width: 100%;

	margin: 0 0 30px;

}


/*
 * Grade de pictogramas.
 *
 * Quatro elementos por linha no máximo.
 */

.single-ponto .ponto-estimulos-grid {

	display: grid;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	gap: 12px;

	width: 100%;

}


/*
 * Cada pictograma.
 */

.single-ponto .ponto-estimulo-item {

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: flex-start;

	min-width: 0;

	text-align: center;

}


/*
 * Ícone do método de estímulo.
 */

.single-ponto .ponto-estimulo-icone {

	display: block;

	width: 52px;

	height: 52px;

	margin: 0 auto 7px;

	object-fit: contain;

}


/*
 * Nome do método.
 */

.single-ponto .ponto-estimulo-nome {

	margin: 0;

	font-family: "Montserrat", sans-serif;

	font-size: 12px;

	font-weight: 600;

	line-height: 1.3;

	color: var(--auriculo-text);

}


/*
 * Descrição opcional.
 */

.single-ponto .ponto-estimulo-descricao {

	margin: 4px 0 0;

	font-family: "Montserrat", sans-serif;

	font-size: 11px;

	line-height: 1.35;

	color: #777777;

}


/* ==========================================================================
   08. FICHA TÉCNICA
   ========================================================================== */


/*
 * A ficha técnica vem imediatamente após os pictogramas.
 */

.single-ponto .ponto-ficha-tecnica {

	width: 100%;

	margin: 0;

	padding: 22px;

	background: var(--auriculo-surface);

	border: 1px solid var(--auriculo-border);

	border-radius: 0;

}


/*
 * Título da ficha técnica.
 */

.single-ponto .ponto-ficha-titulo {

	margin: 0 0 18px;

	font-family: "Roboto", sans-serif;

	font-size: 22px;

	font-weight: 700;

	line-height: 1.3;

	color: var(--auriculo-title);

}


/*
 * Lista de informações.
 */

.single-ponto .ponto-ficha-lista {

	display: flex;

	flex-direction: column;

	gap: 14px;

	margin: 0;

	padding: 0;

}


/*
 * Cada item da ficha.
 */

.single-ponto .ponto-ficha-item {

	display: flex;

	flex-direction: column;

	gap: 3px;

	margin: 0;

	padding: 0;

}


/*
 * Label.
 */

.single-ponto .ponto-ficha-label {

	margin: 0;

	font-family: "Montserrat", sans-serif;

	font-size: 12px;

	font-weight: 700;

	line-height: 1.3;

	color: var(--auriculo-title);

}


/*
 * Valor.
 */

.single-ponto .ponto-ficha-valor {

	margin: 0;

	font-family: "Montserrat", sans-serif;

	font-size: 14px;

	line-height: 1.5;

	color: var(--auriculo-text);

}


/* ==========================================================================
   09. CONTEÚDO PRINCIPAL
   ========================================================================== */

.single-ponto .ponto-content {

	width: 100%;

}


/*
 * Cabeçalho do ponto.
 */

.single-ponto .ponto-cabecalho {

	margin: 0 0 40px;

}


/*
 * Título principal.
 */

.single-ponto .ponto-titulo {

	margin: 0 0 12px;

	font-family: "Roboto", sans-serif;

	font-size: 42px;

	font-weight: 700;

	line-height: 1.15;

	letter-spacing: -.01em;

	color: var(--auriculo-title);

}


/*
 * Subtítulo.
 */

.single-ponto .ponto-subtitulo {

	margin: 0;

	font-family: "Montserrat", sans-serif;

	font-size: 18px;

	font-weight: 400;

	line-height: 1.5;

	color: #666666;

}


/* ==========================================================================
   10. SEÇÕES DO CONTEÚDO
   ========================================================================== */

.single-ponto .ponto-secao {

	margin: 0 0 38px;

}


/*
 * Títulos das seções.
 */

.single-ponto .ponto-secao h2 {

	margin: 0 0 16px;

	font-family: "Roboto", sans-serif;

	font-size: 28px;

	font-weight: 700;

	line-height: 1.3;

	color: var(--auriculo-title);

}


/*
 * Conteúdo textual.
 */

.single-ponto .ponto-secao-conteudo {

	font-family: "Montserrat", sans-serif;

	font-size: 16px;

	font-weight: 400;

	line-height: 1.8;

	color: var(--auriculo-text);

}


/*
 * Parágrafos.

 */

.single-ponto .ponto-secao-conteudo p {

	margin: 0 0 18px;

}


/*
 * Último parágrafo não precisa de margem inferior.
 */

.single-ponto .ponto-secao-conteudo p:last-child {

	margin-bottom: 0;

}


/*
 * Links dentro do conteúdo.
 */

.single-ponto .ponto-secao-conteudo a {

	color: inherit;

	text-decoration: underline;

}


/* ==========================================================================
   11. OBSERVAÇÃO SOBRE FONTES
   ========================================================================== */

.single-ponto .ponto-observacao-fontes {

	margin: 25px 0 0;

	padding: 20px 0 0;

	border-top: 1px solid var(--auriculo-border);

	font-family: "Montserrat", sans-serif;

	font-size: 13px;

	line-height: 1.6;

	color: #666666;

}


/* ==========================================================================
   12. GLIGHTBOX — COMPATIBILIDADE COM ROCKCENTRAL
   ========================================================================== */


/*
 * IMPORTANTE:
 *
 * O funcionamento do GLightbox não é criado pelo CSS.
 *
 * A inicialização JavaScript utiliza:
 *
 *     .glightbox-cover
 *
 * para imagens individuais/capas.
 *
 * O CSS abaixo apenas remove elementos de título/descrição que não
 * desejamos mostrar na imagem ampliada.
 *
 * A estrutura segue o padrão utilizado pelo RockCentral.
 */


/*
 * Título do slide.
 */

.glightbox-clean .gslide-title {

	display: none !important;

}


/*
 * Descrição do slide.
 */

.glightbox-clean .gslide-desc {

	display: none !important;

}


/*
 * Descrição genérica do GLightbox.
 */

.gslide-description {

	display: none !important;

}


/*
 * Título genérico do GLightbox.
 */

.gslide-title {

	display: none !important;

}


/*
 * Não reservar espaço para conteúdo textual.
 */

.gslide-inner-content {

	padding: 0 !important;

}


/*
 * Área da mídia.

 * Não adicionamos margens ou preenchimentos próprios.
 */

.gslide-media {

	margin: auto;

}


/*
 * Imagem ampliada.

 * Mantemos o comportamento nativo do GLightbox.
 */

.gslide-image img {

	display: block;

	margin: 0;

	max-width: 100%;

	height: auto;

}


/*
 * O link que dispara o lightbox não deve receber aparência de link
 * textual.
 */

.single-ponto a.glightbox-cover {

	display: block;

	text-decoration: none;

}


/* ==========================================================================
   13. DETALHES DA IMAGEM / INTERAÇÃO
   ========================================================================== */

.single-ponto .ponto-imagem-principal a.glightbox-cover {

	cursor: zoom-in;

}


/*
 * Evita que estilos genéricos do tema adicionem bordas ou efeitos
 * inesperados à imagem.
 */

.single-ponto .ponto-imagem-principal a.glightbox-cover img {

	border: 0;

	box-shadow: none;

}


/* ==========================================================================
   14. RESPONSIVIDADE — TABLET
   ========================================================================== */

@media (max-width: 1024px) {

	.single-ponto .ponto-layout {

		grid-template-columns:
			minmax(220px, 300px)
			minmax(0, 1fr);

		gap: 34px;

	}

	.single-ponto .ponto-titulo {

		font-size: 36px;

	}

}


/* ==========================================================================
   15. RESPONSIVIDADE — TABLET PEQUENO
   ========================================================================== */

@media (max-width: 900px) {

	.single-ponto .ponto-layout {

		grid-template-columns: 1fr;

		gap: 36px;

	}

	/*
	 * A sidebar continua aparecendo primeiro.
	 */

	.single-ponto .ponto-sidebar {

		order: 1;

	}

	.single-ponto .ponto-content {

		order: 2;

	}

	/*
	 * A imagem fica centralizada quando a estrutura passa
	 * para uma única coluna.
	 */

	.single-ponto .ponto-imagem-principal {

		max-width: 420px;

		margin-left: auto;

		margin-right: auto;

	}

	.single-ponto .ponto-ficha-tecnica {

		max-width: 420px;

		margin-left: auto;

		margin-right: auto;

	}

}


/* ==========================================================================
   16. RESPONSIVIDADE — CELULAR
   ========================================================================== */

@media (max-width: 768px) {

	.single-ponto .ponto-layout {

		width: min(
			calc(100% - 32px),
			var(--auriculo-container)
		);

		margin-top: 35px;

		margin-bottom: 55px;

		gap: 32px;

	}

	.single-ponto .ponto-titulo {

		font-size: 30px;

		line-height: 1.2;

	}

	.single-ponto .ponto-subtitulo {

		font-size: 17px;

	}

	.single-ponto .ponto-secao h2 {

		font-size: 25px;

	}

	.single-ponto .ponto-secao-conteudo {

		font-size: 15px;

		line-height: 1.75;

	}

	/*
	 * Mantemos até quatro pictogramas por linha.
	 */

	.single-ponto .ponto-estimulos-grid {

		grid-template-columns:
			repeat(4, minmax(0, 1fr));

		gap: 10px;

	}

	.single-ponto .ponto-estimulo-icone {

		width: 48px;

		height: 48px;

	}

	.single-ponto .ponto-estimulo-nome {

		font-size: 11px;

	}

	.single-ponto .ponto-ficha-tecnica {

		padding: 18px;

	}

}


/* ==========================================================================
   17. RESPONSIVIDADE — CELULAR PEQUENO
   ========================================================================== */

@media (max-width: 480px) {

	.single-ponto .ponto-layout {

		width: calc(100% - 28px);

		margin-top: 28px;

		margin-bottom: 45px;

	}

	.single-ponto .ponto-titulo {

		font-size: 27px;

	}

	.single-ponto .ponto-secao h2 {

		font-size: 23px;

	}

	/*
	 * Em telas muito pequenas, dois pictogramas por linha
	 * proporcionam espaço suficiente para nomes maiores.
	 */

	.single-ponto .ponto-estimulos-grid {

		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		column-gap: 10px;

		row-gap: 18px;

	}

	.single-ponto .ponto-estimulo-icone {

		width: 50px;

		height: 50px;

	}

}


/* ==========================================================================
   18. ACESSIBILIDADE
   ========================================================================== */

.single-ponto a:focus-visible {

	outline: 2px solid currentColor;

	outline-offset: 3px;

}


/* ==========================================================================
   FIM
   ========================================================================== */