/* =============================================================================
 * BLOCOS DAS PAGINAS MIGRADAS
 *
 * Desenho dos quatro componentes genericos que receberam o conteudo preso no
 * Elementor: bloco de texto, grade de cartoes, lista e galeria — mais o video.
 *
 * Usa os tokens que home.css ja declara (--ez-cobre, --ez-areia, --ez-exo).
 * Nenhuma variavel nova: sao 73 paginas, e cada token proprio aqui seria uma
 * cor a mais para alguem manter em dois lugares.
 *
 * O Elementor guardava fonte e cor em cada widget. Nada disso veio junto, de
 * proposito — e por isso estas paginas saem na linguagem do site novo, e nao
 * na de 2026.
 * ========================================================================== */

/* --- a camada base que faltava --------------------------------------------
 *
 * Nenhuma folha do site publico define fundo, cor e fonte do documento: cada
 * template pinta isso dentro do proprio escopo (`.ez-home`, `.sb-sobre`,
 * `.ct-contato`). Quem usa o template `padrao` nao tinha escopo nenhum, e
 * renderizava em Times sobre fundo transparente.
 *
 * Nao passou antes porque essas 73 paginas mostravam so o aviso de "em
 * migracao" — duas linhas de texto, onde ninguem repara na fonte.
 *
 * Escopado em `.ez-pagina--padrao` de proposito: mexer no `body` mudaria
 * tambem home, Sobre, Contato e blog, que ja foram conferidas.
 * ------------------------------------------------------------------------ */

.ez-pagina--padrao {
	/*
	 * Os tokens repetem os da home de proposito.
	 *
	 * home.css declara a paleta inteira DENTRO de `.ez-home` — nao em
	 * `:root` — e sobre.css e contato.css fazem o mesmo com os seus. Quem usa
	 * o template `padrao` herdava zero: `var(--ez-exo)` vinha vazio e o
	 * navegador caia em Times New Roman, com a cor do titulo em preto puro.
	 *
	 * Depender de variavel declarada no escopo da outra pagina e o defeito que
	 * ja derrubou a Sobre uma vez. Aqui elas sao declaradas de novo.
	 */
	--ez-areia:        #E5E6E0;
	--ez-areia-clara:  #EEEFE9;
	--ez-azul:         #203954;
	--ez-cobre:        #CA7441;
	--ez-cobre-texto: #A65628;
	--ez-marrom:       #9F7454;
	--ez-preto-texto:  #000305;

	--ez-exo:      "Exo 2", sans-serif;
	--ez-sora:     "Sora", sans-serif;

	display: flow-root;
	min-height: 40vh;
	background: #FFFFFF;
	font-family: var(--ez-exo);
	color: var(--ez-preto-texto);
}

.ez-pagina .bl *,
.ez-pagina .bl *::before,
.ez-pagina .bl *::after {
	box-sizing: border-box;
}

.bl {
	padding: 56px 0;
}

/* Duas secoes seguidas do mesmo tipo nao somam respiro duas vezes. */
.bl + .bl {
	padding-top: 0;
}

.bl-wrap {
	width: min(100% - 40px, 1180px);
	margin-inline: auto;
}

.bl-titulo {
	margin: 0 0 20px;
	font-family: var(--ez-exo);
	font-size: clamp(24px, 3.2vw, 36px);
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -.4px;
	color: var(--ez-azul);
}

h3.bl-titulo {
	font-size: clamp(19px, 2.2vw, 24px);
}

/* --- prosa ---------------------------------------------------------------- */

.bl-prosa {
	max-width: 760px;
	font-family: var(--ez-exo);
	font-size: 16.5px;
	line-height: 1.72;
	color: #3C4653;
}

.bl-prosa > *:first-child { margin-top: 0; }
.bl-prosa > *:last-child  { margin-bottom: 0; }

.bl-prosa p  { margin: 0 0 16px; }
.bl-prosa ul,
.bl-prosa ol { margin: 0 0 18px; padding-left: 22px; }
.bl-prosa li { margin-bottom: 8px; }

.bl-prosa h2,
.bl-prosa h3,
.bl-prosa h4 {
	margin: 30px 0 12px;
	font-weight: 700;
	line-height: 1.24;
	color: var(--ez-azul);
}

.bl-prosa h2 { font-size: 24px; }
.bl-prosa h3 { font-size: 20px; }
.bl-prosa h4 { font-size: 17px; }

.bl-prosa a {
	color: var(--ez-cobre-texto);
	text-underline-offset: 3px;
}

.bl-prosa img {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
	margin: 12px 0;
}

.bl-prosa table {
	width: 100%;
	margin: 0 0 20px;
	border-collapse: collapse;
	font-size: 14.5px;
}

.bl-prosa th,
.bl-prosa td {
	padding: 10px 12px;
	border: 1px solid rgba(16, 30, 44, .1);
	text-align: left;
	vertical-align: top;
}

.bl-prosa th {
	background: var(--ez-areia-clara);
	color: var(--ez-azul);
}

/* --- texto com arte ------------------------------------------------------- */

.bl-texto--com-arte .bl-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 42px;
	align-items: center;
}

.bl-texto__arte {
	margin: 0;
}

.bl-texto__arte img {
	width: 100%;
	height: auto;
	border-radius: 18px;
}

.bl-texto__arte figcaption {
	margin-top: 10px;
	font-family: var(--ez-exo);
	font-size: 13.5px;
	color: #5A6472;
}

/* --- botoes --------------------------------------------------------------- */

.bl-botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 26px 0 0;
}

/* O .ez-btn da home nasce em bloco e de largura cheia; aqui ele e um botao. */
.bl-botoes .ez-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 190px;
}

/* --- cartoes -------------------------------------------------------------- */

.bl-grade {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bl-cartao {
	padding: 24px 24px 26px;
	border: 1px solid rgba(16, 30, 44, .1);
	border-radius: 16px;
	background: #FFFFFF;
}

.bl-cartao > a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.bl-cartao:has(> a):hover {
	border-color: rgba(202, 116, 65, .45);
}

.bl-cartao__icone {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 14px;
	border-radius: 12px;
	background: #FBF3E9;
}

.bl-cartao__icone img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.bl-cartao h3 {
	margin: 0 0 8px;
	font-family: var(--ez-exo);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ez-azul);
}

.bl-cartao p {
	margin: 0;
	font-family: var(--ez-exo);
	font-size: 14.5px;
	line-height: 1.6;
	color: #5A6472;
}

/* --- lista ---------------------------------------------------------------- */

.bl-itens {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--ez-exo);
	font-size: 16px;
	line-height: 1.6;
	color: #3C4653;
}

.bl-itens li {
	position: relative;
	padding-left: 22px;
}

/* O marcador e desenhado, e nao um <li> com bolinha: o icone original vinha
   do Elementor e nao veio junto. */
.bl-itens li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: .62em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ez-cobre);
}

.bl-itens a {
	color: inherit;
	text-underline-offset: 3px;
}

.bl-itens a:hover {
	color: var(--ez-cobre-texto);
}

/* --- galeria -------------------------------------------------------------- */

.bl-fotos {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bl-fotos img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 8px;
	border-radius: 14px;
	background: var(--ez-areia-clara);
}

/* --- video ---------------------------------------------------------------- */

.bl-video__quadro {
	position: relative;
	aspect-ratio: 16 / 9;
	max-width: 880px;
	border-radius: 18px;
	overflow: hidden;
	background: #000;
}

.bl-video__quadro img,
.bl-video__quadro iframe {
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	display: block;
}

.bl-video__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: rgba(20, 20, 20, .82);
}

.bl-video__play svg {
	width: 72px;
	height: 51px;
	transition: color .18s ease, transform .18s ease;
}

.bl-video__play:hover svg {
	color: #CC0000;
	transform: scale(1.06);
}

.bl-video__link a {
	color: var(--ez-cobre-texto);
}

/* =============================================================================
 * TELAS ESTREITAS
 * ========================================================================== */

@media (max-width: 1000px) {
	.bl-grade  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bl-fotos  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.bl { padding: 38px 0; }

	.bl-texto--com-arte .bl-wrap {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	/* A arte vem primeiro no codigo so quando o texto e curto; aqui ela fica
	   sempre depois, que e a ordem de leitura. */
	.bl-texto__arte { order: 2; }

	.bl-grade  { grid-template-columns: minmax(0, 1fr); }
	.bl-itens  { grid-template-columns: minmax(0, 1fr); }
	.bl-fotos  { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.bl-botoes .ez-btn { width: 100%; }
}