/*
 * Universo Trackday - ajustes visuais nao cobertos pelo theme.json
 *
 * Regra: manter este arquivo pequeno. Sempre que uma definicao puder
 * viver no theme.json, ela deve viver la, porque assim aparece tambem
 * como opcao dentro do editor do WordPress.
 */

/* Acessibilidade: foco visivel para navegacao por teclado. */
:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
	outline: 2px solid #F23318;
	outline-offset: 2px;
}

/* Respeita a preferencia do sistema por menos movimento. */
@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;
	}
}

/* Imagens nunca estouram o container no mobile. */
img,
video {
	max-width: 100%;
	height: auto;
}

/* Faixa do cabecalho em UT Asphalt.
   Ate a 1.1.19 usava preto puro, para esconder o fundo solido do PNG
   antigo do logo. Com o arquivo transparente isso deixou de ser
   necessario, e a barra volta a usar a cor oficial da paleta. */
.ut-header {
	background-color: var(--wp--preset--color--ut-asphalt);
}

/* O <main> recebe foco via skip link, mas nao deve exibir contorno
   quando o foco chega por clique do mouse. */
main:focus {
	outline: none;
}

/* Assinatura institucional no rodape. */
.ut-assinatura {
	font-style: italic;
}

/* Link "pular para o conteudo": visivel apenas ao receber foco. */
.ut-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1rem;
	background: #F5F6F4;
	color: #070A0C;
	text-decoration: none;
}

.ut-skip-link:focus {
	left: 0;
}

/* ==========================================================================
   ETAPA 2A - COMPONENTES
   Mobile first: as regras base valem para o celular; media queries ampliam.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CABECALHO - dois estados responsivos

   ate 919px      logo + hamburguer + CTA curto        flex
   920px+         logo | menu | CTA numa unica linha   grid auto / 1fr / auto

   A partir de 920px a estrutura nunca muda. Quem se adapta e o proprio menu,
   que quebra seus itens em duas linhas DENTRO da coluna central e volta a
   uma linha quando sobra espaco. O menu nunca invade o logo nem o CTA.

   Para que a quebra aconteca de verdade, nao basta min-width:0 no elemento
   <nav>. O bloco Navigation aninha quatro camadas ate chegar na lista, e
   qualquer uma delas sem min-width:0 impede o encolhimento e faz o conteudo
   transbordar a coluna. Por isso a cadeia inteira e tratada abaixo.

   920px vem de simulacao da quebra real dos sete itens, com column-gap de
   20px: a coluna central precisa de 350px para caber em duas linhas, o que
   da 873px de viewport. Com 40px de folga, 913px. Arredondado para 920.

   LOGO - cinco tamanhos independentes, sempre por largura e com height:auto,
   preservando a proporcao do arquivo oficial:

     cabecalho mobile estreito   ate 374px      170px
     cabecalho mobile            375 a 599px    200px
     cabecalho intermediario     600 a 1359px   220px  (nao encolhe)
     cabecalho desktop           1360px+        310px
     rodape mobile               ate 879px      280px
     rodape desktop              880px+         380px

   No intermediario o logo e fixo: quem se adapta e a navegacao, quebrando
   em duas linhas. A marca nunca encolhe para dar espaco ao menu.

   O bloco Navigation so oferece 600px como ponto de quebra do modo "mobile".
   Entre 600 e 919px as regras abaixo reaplicam o mesmo comportamento que o
   core aplica abaixo de 600px. Nenhum JavaScript proprio.
   -------------------------------------------------------------------------- */

/* ---------- Mobile (padrao) ---------- */

/* Respiro lateral menor apenas no cabecalho, para o logo caber com presenca
   sem espremer hamburguer e CTA. O restante do site mantem o padrao. */
.ut-header.has-global-padding {
	padding-left: 0.375rem;
	padding-right: 0.375rem;
}

/* Espacamento vertical da barra. Um pouco maior em cima do que embaixo:
   o desenho do logo assenta sobre uma base reta, e um pouco mais de ar
   acima equilibra opticamente. */
.ut-header {
	padding-top: 2rem;
	padding-bottom: 1.5rem;
}

.ut-header__inner {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	min-width: 0;
}

/* Empurra menu e CTA para a direita, mantendo o logo a esquerda. */
.ut-header .wp-block-site-logo {
	margin-right: auto;
	flex-shrink: 1;
	min-width: 0;
}

.ut-header .wp-block-site-logo img {
	display: block;
	width: 170px;
	max-width: 100%;
	height: auto;
	/* COMPENSACAO: o arquivo do logo do cabecalho ainda tem faixa vazia na
	   base, entao o desenho visivel sobe dentro da propria imagem e fica
	   acima do centro do menu e do CTA. Estes 8px descem o desenho ate o
	   centro optico. Quando o arquivo aparado for enviado, esta regra e a
	   equivalente de 920px+ devem ser removidas. */
	transform: translateY(8px);
}

.ut-menu,
.ut-header__cta {
	flex-shrink: 0;
}

/* CTA: dois botoes nativos independentes, um curto e um longo.
   O oculto usa display:none, portanto nao ocupa espaco, nao recebe foco
   por teclado e nao e anunciado por tecnologia assistiva. */
.ut-header__cta .wp-block-button__link {
	padding: 0.5rem 0.7rem;
	font-size: 0.625rem;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.ut-header__cta .ut-header__cta-longo {
	display: none;
}

.ut-header__cta .ut-header__cta-curto {
	display: block;
}

/* Item do menu correspondente a pagina atual. */
.ut-menu .current-menu-item > a,
.ut-menu .current_page_item > a {
	color: var(--wp--preset--color--ut-track-red);
}

/* Botao do menu em sobreposicao. */
.ut-menu .wp-block-navigation__responsive-container-open,
.ut-menu .wp-block-navigation__responsive-container-close {
	padding: 0.25rem;
}

@media (min-width: 375px) {
	.ut-header.has-global-padding {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}

	.ut-header__inner {
		gap: 0.5rem;
	}

	.ut-header .wp-block-site-logo img {
		width: 200px;
	}
}

/* Mantem o hamburguer na faixa em que o core ja o esconderia. */
@media (min-width: 600px) and (max-width: 919.98px) {
	.ut-menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.ut-menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (min-width: 600px) {
	/* Respiro lateral volta ao padrao do site. */
	.ut-header.has-global-padding {
		padding-left: var(--wp--preset--spacing--30);
		padding-right: var(--wp--preset--spacing--30);
	}

	.ut-header__inner {
		gap: 1rem;
	}

	/* Com espaco disponivel, o logo passa a ter largura garantida. */
	.ut-header .wp-block-site-logo {
		flex-shrink: 0;
		min-width: auto;
	}

	.ut-header .wp-block-site-logo img {
		width: 220px;
		max-width: none;
	}

	.ut-menu .wp-block-navigation__responsive-container-open,
	.ut-menu .wp-block-navigation__responsive-container-close {
		padding: 0.5rem;
	}

	.ut-header__cta .wp-block-button__link {
		font-size: 0.8125rem;
		padding: 0.7rem 1.25rem;
	}
}

/* ---------- Desktop: logo | menu | CTA em uma linha ---------- */

@media (min-width: 920px) {
	/* Logo maior no desktop pede mais ar em volta. */
	.ut-header {
		padding-top: 4rem;
		padding-bottom: 2.5rem;
	}

	.ut-header__inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 1.5rem;
	}

	.ut-header .wp-block-site-logo {
		margin-right: 0;
	}

	/* Mesma compensacao, proporcional ao logo maior do desktop. */
	.ut-header .wp-block-site-logo img {
		transform: translateY(13px);
	}


	/* Cadeia completa do bloco Navigation. Sem min-width:0 em TODAS as
	   camadas, a lista nao encolhe e transborda a coluna central,
	   avancando sobre o logo e o CTA. */
	.ut-menu,
	.ut-menu .wp-block-navigation__responsive-container,
	.ut-menu .wp-block-navigation__responsive-close,
	.ut-menu .wp-block-navigation__responsive-dialog,
	.ut-menu .wp-block-navigation__responsive-container-content,
	.ut-menu .wp-block-navigation__container {
		min-width: 0;
		max-width: 100%;
	}

	/* A lista de itens: quebra real dentro da coluna central. */
	.ut-menu .wp-block-navigation__container {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		row-gap: 0.5rem;
		column-gap: 1.25rem;
	}

	/* Itens nao encolhem individualmente: eles quebram para a linha de
	   baixo em vez de comprimir o texto. */
	.ut-menu .wp-block-navigation-item {
		flex: 0 0 auto;
	}

	/* CTA com o texto integral a partir daqui. */
	.ut-header__cta .ut-header__cta-longo {
		display: block;
	}

	.ut-header__cta .ut-header__cta-curto {
		display: none;
	}
}

/* Logo maior em telas largas, para equilibrar os tres pesos visuais.
   310px deixa 727px para a coluna central, contra os 706px que o menu
   ocupa em linha unica. Folga de 21px: e o teto pratico sem que o menu
   volte a quebrar em duas linhas no desktop largo. */
@media (min-width: 1360px) {
	.ut-header .wp-block-site-logo img {
		width: 310px;
	}
}

/* --------------------------------------------------------------------------
   CABECALHO DE SECAO
   -------------------------------------------------------------------------- */

.ut-secao-cabecalho {
	gap: 0.75rem;
	margin-bottom: var(--wp--preset--spacing--30);
}

.ut-etiqueta {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	margin-bottom: 0.25rem;
}

.ut-link-secao a {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* --------------------------------------------------------------------------
   CARDS
   -------------------------------------------------------------------------- */

.ut-card {
	background-color: var(--wp--preset--color--ut-carbon);
	border: 1px solid rgba(143, 150, 157, 0.18);
	border-radius: 2px;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: border-color 0.2s ease;
}

.ut-card:hover,
.ut-card:focus-within {
	border-color: var(--wp--preset--color--ut-track-red);
}

.ut-card__imagem img,
.ut-card__logo img {
	display: block;
	width: 100%;
}

.ut-card__logo {
	background-color: var(--wp--preset--color--ut-ice);
	padding: var(--wp--preset--spacing--20);
}

.ut-card__corpo {
	padding: var(--wp--preset--spacing--30);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex-grow: 1;
}

.ut-card__corpo > * {
	margin: 0;
}

.ut-card__meta,
.ut-card__meta a {
	color: var(--wp--preset--color--ut-steel);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	text-decoration: none;
}

.ut-card .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--ut-ice);
}

.ut-card .wp-block-post-title a:hover,
.ut-card .wp-block-post-title a:focus {
	color: var(--wp--preset--color--ut-track-red);
}

.ut-card__cta {
	margin-top: auto;
	padding-top: 0.5rem;
}

.ut-card__cta a {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--ut-track-red);
}

.ut-card__cta a:hover,
.ut-card__cta a:focus {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   ESTADO VAZIO E AVISOS
   -------------------------------------------------------------------------- */

.ut-vazio {
	border: 1px dashed rgba(143, 150, 157, 0.3);
	border-radius: 2px;
}

.ut-aviso {
	border-left: 3px solid var(--wp--preset--color--ut-track-red);
	background-color: var(--wp--preset--color--ut-carbon);
}

/* --------------------------------------------------------------------------
   MANIFESTO
   -------------------------------------------------------------------------- */

.ut-manifesto h2 {
	font-style: italic;
}

/* --------------------------------------------------------------------------
   RODAPE
   Grade controlada em tres areas, com larguras e espacamentos definidos.
   Nao usa distribuicao que empurre as colunas para os extremos da tela.

   O logo do rodape tem tamanho proprio, independente do cabecalho: ha muito
   mais espaco disponivel aqui. max-width:100% garante que ele acompanhe a
   coluna caso ela seja mais estreita que o valor declarado.
   -------------------------------------------------------------------------- */

/* Respiro lateral e centralizacao deterministicos.
   O respiro sai do grupo externo e passa para os blocos internos: assim o
   resultado nao depende de como o WordPress resolva o alinhamento wide,
   e nao ha risco de somar duas camadas de padding. */
.ut-footer,
.ut-footer.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

/* Seletor com dois niveis e valor literal de proposito: nao depende da
   variavel de preset resolver neste contexto, nem perde para regras de
   layout que o WordPress gera para blocos alinhados. */
.ut-footer .ut-footer__topo,
.ut-footer .ut-footer__base {
	box-sizing: border-box;
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.75rem;
	padding-right: 1.75rem;
}

.ut-footer__topo {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: var(--wp--preset--spacing--40);
	row-gap: var(--wp--preset--spacing--40);
	align-items: start;
}

/* Logo e assinatura formam um unico quadro: a assinatura nunca fica mais
   larga que o logo, entao a quebra de linha acontece dentro do mesmo
   limite e os dois leem como uma peca so. */
.ut-footer__marca {
	max-width: 280px;
}

.ut-footer__marca .ut-assinatura {
	max-width: 100%;
}

/* Vale para o logo proprio do rodape e para o Site Logo de reserva. */
.ut-footer__marca .wp-block-site-logo img,
.ut-footer__logo img {
	display: block;
	width: 280px;
	max-width: 100%;
	height: auto;
}

.ut-footer__logo {
	display: block;
	line-height: 0;
}

/* Logo e assinatura formam um unico bloco de marca. O espacamento padrao
   entre blocos (28px) afastava demais os dois. 6px mantem os dois como um
   unico bloco de marca.
   Afeta somente este par: as colunas de links nao sao tocadas. */
.ut-footer__marca .wp-block-site-logo {
	margin-bottom: 0;
}

.ut-footer__marca .ut-assinatura {
	margin-block-start: 0.375rem;
	margin-bottom: 0;
}

.ut-footer__titulo {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 0.75rem;
}

.ut-footer__lista {
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ut-footer__lista a {
	color: var(--wp--preset--color--ut-ice);
	text-decoration: none;
}

.ut-footer__lista a:hover,
.ut-footer__lista a:focus {
	color: var(--wp--preset--color--ut-track-red);
	text-decoration: underline;
}

.ut-footer__divisor {
	border-color: rgba(143, 150, 157, 0.2);
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--30);
}

.ut-footer__copyright {
	margin-bottom: 0;
}

/* Duas colunas de links lado a lado, marca ocupando a linha inteira. */
@media (min-width: 480px) {
	/* Duas colunas iguais, com o vao central do MESMO tamanho do respiro
	   das bordas: 28px a esquerda, 28px no meio, 28px a direita. */
	.ut-footer__topo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: normal;
		column-gap: var(--wp--preset--spacing--30);
	}

	.ut-footer__marca {
		grid-column: 1 / -1;
	}
}

/* Tres colunas. A da marca e um pouco mais larga, as de links sao iguais. */
@media (min-width: 880px) {
	/* Colunas do tamanho do proprio conteudo e conjunto centralizado.
	   Com colunas em fracao, a terceira ficava larga e vazia a direita
	   enquanto o logo preenchia a primeira e encostava na segunda.
	   Agora as margens esquerda e direita sao iguais e o vao entre as
	   colunas e explicito, crescendo com a tela ate um teto. */
	.ut-footer__topo {
		grid-template-columns: repeat(3, auto);
		justify-content: center;
		column-gap: clamp(2rem, 5vw, 6rem);
	}

	.ut-footer__topo > * {
		max-width: 100%;
	}

	.ut-footer__marca {
		grid-column: auto;
	}

	.ut-footer__marca {
		max-width: 380px;
	}

	.ut-footer__marca .wp-block-site-logo img,
	.ut-footer__logo img {
		width: 380px;
	}
}

/* --------------------------------------------------------------------------
   GARANTIA GERAL
   -------------------------------------------------------------------------- */

/* Sem overflow-x: hidden global. A ausencia de rolagem horizontal e
   responsabilidade de cada componente, e deve ser verificada de verdade,
   nao mascarada. */

/* Area de toque minima em elementos interativos. */
.wp-block-navigation__container a,
.ut-footer__lista a {
	display: inline-block;
	min-height: 44px;
	line-height: 44px;
}

@media (min-width: 782px) {
	.wp-block-navigation__container a {
		min-height: 0;
		line-height: inherit;
	}
}

/* ==========================================================================
   ETAPA 2B-1 - SECOES DA HOME
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   min-height por faixa: no celular uma altura menor evita que o CTA fique
   abaixo da dobra. A camada escura do bloco de capa garante contraste.
   -------------------------------------------------------------------------- */

.ut-hero {
	min-height: 380px;
}

/* O bloco de capa restringe o conteudo interno a largura de leitura.
   Aqui ele passa a usar o container wide, alinhado com as demais secoes.
   Vale tambem para Homes ja montadas: nao e preciso reinserir a secao. */
.ut-hero .wp-block-cover__inner-container > .ut-hero__conteudo {
	max-width: 1360px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* CAUSA RAIZ DA LARGURA: um container com layout restrito limita os
   PROPRIOS FILHOS a largura de leitura. Alargar o container nao basta.
   Aqui os filhos diretos das secoes e do hero deixam de herdar esse limite
   e passam a ocupar a largura do container que os contem.

   A secao de destaque (ut-destaque) fica de fora de proposito: ali o texto
   centralizado em coluna estreita e a intencao.

   Vale para paginas ja montadas: nao e preciso reinserir nenhuma secao. */
.ut-secao:not(.ut-destaque) > *,
.ut-hero .ut-hero__conteudo > * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Excecao: a linha de apoio do hero mantem largura de leitura confortavel,
   senao viraria uma linha unica de ponta a ponta em telas largas. */
.ut-hero .ut-hero__apoio {
	max-width: 34em;
}

.ut-hero__apoio {
	color: var(--wp--preset--color--ut-ice);
}

@media (min-width: 600px) {
	.ut-hero {
		min-height: 460px;
	}
}

@media (min-width: 920px) {
	.ut-hero {
		min-height: 560px;
	}
}

/* --------------------------------------------------------------------------
   SECOES
   -------------------------------------------------------------------------- */

/* Separacao discreta entre secoes, sem linha divisoria pesada. */
.ut-secao + .ut-secao {
	border-top: 1px solid rgba(143, 150, 157, 0.12);
}

.ut-pilar {
	border-top: 2px solid var(--wp--preset--color--ut-track-red);
	padding-top: var(--wp--preset--spacing--20);
}

.ut-pilar h3 {
	margin-top: 0;
}

/* Lista com marcador proprio, no lugar do disco padrao. */
.ut-lista-marcada {
	list-style: none;
	padding-left: 0;
	margin: var(--wp--preset--spacing--20) 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ut-lista-marcada li {
	position: relative;
	padding-left: 1.25rem;
}

.ut-lista-marcada li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.5rem;
	height: 2px;
	background-color: var(--wp--preset--color--ut-track-red);
}

/* Grades das listagens usam largura minima de coluna, entao o numero de
   colunas se ajusta sozinho a tela. Nenhuma media query necessaria. */
.ut-comunidade {
	align-items: start;
}

/* ==========================================================================
   AJUSTES PONTUAIS DA HOME (1.2.3)
   Regras restritas aos tres componentes citados. Nenhum seletor global.
   ========================================================================== */

/* 1. HERO - conjunto de CTAs centralizado.
   Atinge apenas os botoes dentro do hero. Titulo e linha de apoio mantem
   o alinhamento atual. No celular os botoes continuam quebrando linha
   normalmente, agora centralizados. */
.ut-hero .ut-hero__conteudo .wp-block-buttons {
	justify-content: center;
}

/* 1b. HERO - titulo e linha de apoio centralizados.
   Os CTAs ja estao centralizados pela regra acima e nao sao afetados. */
.ut-hero .ut-hero__conteudo > h1,
.ut-hero .ut-hero__apoio {
	text-align: center;
}

/* A linha de apoio mantem largura de leitura, agora centrada no bloco. */
.ut-hero .ut-hero__apoio {
	margin-left: auto;
	margin-right: auto;
	/* Distribui melhor as palavras entre as linhas, evitando uma ultima
	   linha com poucas palavras. Navegadores sem suporte ignoram. */
	text-wrap: pretty;
}


/* 2. COMUNIDADE - conjunto centralizado no container.
   Centraliza o bloco inteiro; o layout interno de duas colunas, as
   proporcoes e os espacamentos nao mudam, e os textos seguem alinhados
   a esquerda dentro de cada coluna. */
.ut-secao > .ut-comunidade {
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
}

/* 3. MANIFESTO - secao e texto centralizados.
   A quebra do titulo segue a regra geral no fim deste arquivo: quebra
   manual no editor vale no desktop e e neutralizada no celular. */
.ut-manifesto {
	margin-left: auto;
	margin-right: auto;
}

.ut-manifesto > * {
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   REGRA GERAL DE QUEBRA DE LINHA NAS SECOES DA HOME (1.2.8)

   O problema, sempre o mesmo: CSS nao garante onde uma frase quebra, porque
   a largura de cada caractere muda entre navegadores. A unica forma
   deterministica e uma quebra manual no editor, com Shift+Enter. Mas uma
   quebra manual atrapalha no celular, onde ela cria uma linha curta no meio
   de um texto que ja quebra sozinho.

   Esta regra resolve os dois lados de uma vez, para TODAS as secoes:

   - A partir de 920px: titulos e a frase de apoio do hero deixam de herdar
     o limite de largura de leitura, para que a primeira linha caiba inteira
     e a quebra manual valha exatamente onde foi colocada.

   - Abaixo de 920px: quebras manuais em titulos e paragrafos das secoes sao
     neutralizadas, e o texto flui naturalmente.

   Escopo: apenas .ut-hero, .ut-secao e .ut-manifesto. Nada fora das secoes
   da Home e afetado. Paragrafos longos continuam na largura de leitura, que
   nao e alterada aqui.

   Para ajustar a quebra de qualquer titulo, basta o Shift+Enter no editor.
   Nenhuma alteracao de CSS e necessaria a cada texto novo.
   ========================================================================== */

@media (min-width: 920px) {
	.ut-hero .ut-hero__apoio,
	.ut-secao :is(h1, h2, h3),
	.ut-manifesto :is(h1, h2, h3) {
		max-width: none;
		text-wrap: initial;
	}
}

@media (max-width: 919.98px) {
	.ut-hero :is(h1, h2, h3, p) br,
	.ut-secao :is(h1, h2, h3, p) br,
	.ut-manifesto :is(h1, h2, h3, p) br {
		display: none;
	}
}

/* ==========================================================================
   ETAPA 2B-2 - PAGINAS INTERNAS
   Somente classes novas. Nenhuma regra anterior foi alterada.
   ========================================================================== */

/* Abertura padrao das paginas internas. */
.ut-abertura__texto {
	color: var(--wp--preset--color--ut-steel);
	max-width: 46em;
}

/* Guia do Primeiro Trackday: respiro entre os blocos, para o texto longo
   nao virar um bloco unico de leitura cansativa. */
.ut-guia h2 {
	margin-top: var(--wp--preset--spacing--40);
}

.ut-guia h2:first-child {
	margin-top: 0;
}

/* Indice de categorias do Conteudo. */
.ut-categorias__lista {
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
}

.ut-categorias__lista li {
	border: 1px solid rgba(143, 150, 157, 0.25);
	border-radius: 2px;
	padding: 0.4rem 0.9rem;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
}

/* Paginacao das listagens da 2B-2.
   Restrita a classe ut-listagem, aplicada apenas aos wrappers de consulta
   criados nesta etapa. Paginacoes da Home ou de qualquer outro componente
   ja aprovado nao sao atingidas. */
.ut-listagem .wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--40);
	gap: 0.75rem;
}

/* ==========================================================================
   ABERTURA DAS PAGINAS INTERNAS (1.3.2)

   O H1, a etiqueta e o texto de apresentacao ficavam na largura de leitura
   e centralizados, enquanto as secoes da pagina usavam o container wide.
   Tres eixos esquerdos diferentes na mesma pagina.

   Estas regras alinham os tres ao mesmo eixo, usando a largura wide ja
   definida no theme.json. Nenhuma largura nova foi inventada.

   Valem tambem para paginas ja montadas, porque a abertura salva no banco
   nao tem a classe de alinhamento: o CSS reproduz o mesmo resultado.

   Escopo: .ut-pagina-interna e .ut-abertura. Nenhum seletor compartilhado.
   ========================================================================== */

/* Titulo da pagina no eixo wide, para paginas cujo modelo esteja
   personalizado no banco e nao receba a alteracao do template. */
.ut-pagina-interna > .wp-block-post-title {
	max-width: var(--wp--style--global--wide-size);
	margin-left: auto;
	margin-right: auto;
}

/* ESPECIFICIDADE, e nao mais um max-width qualquer.

   A regra do WordPress que impoe os 720px e:

     .wp-container-core-post-content-is-layout-X
       > :where(:not(.alignleft):not(.alignright):not(.alignfull))
       { max-width: var(--wp--style--global--content-size); margin: auto }

   Ela vale (0,1,0): a classe do container mais o :where(), que nao pontua.
   Uma regra .ut-abertura sozinha tambem vale (0,1,0), empata, e perde na
   ordem do documento, porque as folhas de layout dos blocos sao impressas
   depois deste arquivo.

   Prefixando com .ut-pagina-interna, do template das paginas internas, as
   regras passam a valer (0,2,0) e vencem por especificidade, sem depender
   de ordem, sem !important e sem margem negativa. */

/* Abertura no mesmo eixo, mesmo quando salva sem alinhamento wide. */
.ut-pagina-interna .ut-abertura {
	max-width: var(--wp--style--global--wide-size);
	margin-left: auto;
	margin-right: auto;
}

/* DESCENDENTE, e nao filho direto.

   Um seletor de filho direto so alcanca um nivel. Se o conteudo tiver um
   grupo intermediario, seja do padrao ou criado ao editar a pagina, os
   textos ficam fora do alcance e continuam com as margens automaticas da
   camada restrita, ou seja, centralizados.

   Com seletor descendente a regra vale em qualquer nivel de aninhamento,
   sem depender da estrutura exata salva no banco. */
.ut-pagina-interna .ut-abertura * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* O texto corrido mantem largura confortavel de leitura, ancorado a
   esquerda em vez de centralizado. Nao e esticado ate 1360px.

   A regra depende SO DA CLASSE, nao do grupo em volta. Se o paragrafo for
   movido para fora de .ut-abertura ao editar a pagina, o que acontece com
   facilidade no editor, ele continua alinhado corretamente. Uma regra que
   exigisse a classe E o grupo deixaria de valer nesse caso. */
.ut-pagina-interna .ut-abertura__texto {
	max-width: 46em;
	margin-left: 0;
	margin-right: 0;
}

/* Mesma situacao na lista de categorias do Conteudo: o grupo que a envolve
   tem layout restrito e centraliza a lista dentro dele. */
.ut-pagina-interna .ut-categorias * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* E no guia do Primeiro Trackday, que tambem usa um grupo intermediario.
   Os textos mantem largura de leitura, agora ancorados a esquerda. */
.ut-pagina-interna .ut-guia {
	max-width: var(--wp--style--global--wide-size);
	margin-left: auto;
	margin-right: auto;
}

.ut-pagina-interna .ut-guia * {
	margin-left: 0;
	margin-right: 0;
}

.ut-pagina-interna .ut-guia p {
	max-width: 46em;
}

/* ==========================================================================
   CARD DE EVENTO COM CAMPOS (3B-1)

   Escopo restrito ao card de evento. Nenhum seletor global de paragrafo
   vazio, e nenhuma regra compartilhada alterada.
   ========================================================================== */

/* Data em destaque, conforme o briefing. */
.ut-card--evento .ut-card__data {
	color: var(--wp--preset--color--ut-track-red);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0.25rem;
}

/* Selo de situacao. So aparece quando ha texto. */
.ut-card--evento .ut-card__situacao {
	display: inline-block;
	border: 1px solid rgba(143, 150, 157, 0.4);
	border-radius: 2px;
	padding: 0.15rem 0.5rem;
	margin-bottom: 0.5rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--ut-steel);
}

/* Evento confirmado devolve texto vazio: o selo some, sem deixar respiro.
   Regra restrita a esta classe, dentro deste card. */
.ut-card--evento .ut-card__situacao:empty {
	display: none;
}

/* Autodromo, cidade/UF e organizador. Quando o termo nao existe, o valor
   vem vazio e a linha e ocultada, evitando espaco morto no card. */
.ut-card--evento .ut-card__autodromo:empty,
.ut-card--evento .ut-card__local:empty,
.ut-card--evento .ut-card__organizador:empty {
	display: none;
}

.ut-card--evento .ut-card__autodromo {
	font-weight: 700;
}

/* ==========================================================================
   AJUSTE DO CARD DE EVENTO (1.4.5)

   HISTORICO DO DIAGNOSTICO, porque errei duas vezes aqui.

   .ut-card__corpo e display:flex em coluna desde a 2A. Em um container
   flex, a posicao da CAIXA de cada filho e definida por align-items, e nao
   por text-align. O padrao stretch nao se aplica a paragrafos que encolhem,
   entao cada linha ficava com a largura do proprio texto e centralizada.

   Era por isso que o Console reportava text-align: left enquanto a tela
   mostrava tudo centralizado: as duas medidas estavam certas, mas se
   referiam a coisas diferentes.

   Pela mesma razao, as margens da 1.4.1 nao tiveram efeito: em flex quem
   controla o respiro entre os filhos e o gap do container.

   Mas align-items sozinho tambem nao bastou, e a medicao no navegador
   mostrou o motivo: os filhos tinham margin-left e margin-right iguais,
   de 107px cada. Margens automaticas, vindas da regra de layout restrito
   do WordPress. Quando um filho de flex tem margens automaticas, elas
   absorvem o espaco livre e anulam o align-items.

   Aquela regra usa !important, entao nao ha como venc-la por CSS sem outro
   !important. A correcao foi na origem: o grupo do corpo do card passou a
   usar layout de FLUXO em vez de restrito, nos padroes. Sem a regra, nao ha
   margem automatica, e align-items volta a valer.

   Consequencia: paginas que ja tinham o card inserido precisam receber o
   padrao atualizado. Alterar o arquivo nao atualiza o conteudo salvo.

   Na 1.4.5 o mesmo tratamento foi estendido ao grupo EXTERNO do card. Ele
   havia ficado restrito, e por isso continuava aplicando margem automatica
   ao corpo. O efeito variava por card, conforme a largura do texto, o que
   dava a impressao de que apenas um estava desalinhado.

   Todas as regras continuam restritas a .ut-card--evento.
   ========================================================================== */

/* Encosta as caixas dos filhos a esquerda e reduz o respiro entre elas.
   O gap original de 0.6rem vale para os demais cards e nao foi tocado. */
.ut-card--evento .ut-card__corpo {
	align-items: flex-start;
	text-align: left;
	gap: 0.35rem;
}

/* Data e selo dividem a mesma linha. Em um container flex isso exige um
   agrupamento proprio: inline-block sozinho nao junta os dois. */
.ut-card--evento .ut-card__data,
.ut-card--evento .ut-card__situacao {
	align-self: flex-start;
}

.ut-card--evento .ut-card__data {
	color: var(--wp--preset--color--ut-track-red);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Selo de situacao. So aparece quando ha texto. */
.ut-card--evento .ut-card__situacao {
	border: 1px solid rgba(143, 150, 157, 0.4);
	border-radius: 2px;
	padding: 0.15rem 0.5rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--ut-steel);
}

/* Evento confirmado devolve texto vazio. Em flex, um filho vazio ainda
   ocupa espaco pelo gap, entao precisa sair do fluxo de vez. */
.ut-card--evento .ut-card__situacao:empty {
	display: none;
}

/* O mesmo vale para as linhas de taxonomia quando o termo nao existe. */
.ut-card--evento .ut-card__autodromo:empty,
.ut-card--evento .ut-card__local:empty,
.ut-card--evento .ut-card__organizador:empty {
	display: none;
}

.ut-card--evento .ut-card__autodromo {
	font-weight: 700;
}

/* Respiro maior antes do titulo, separando o cabecalho do card do corpo. */
/* MARGEM DO LAYOUT DE FLUXO.

   Trocar o corpo do card para layout de fluxo resolveu o alinhamento, mas
   trouxe outra regra do WordPress junto:

     .wp-container-core-group-is-layout-N > * { margin-block-start: 24px }

   Ela vale (0,1,0), igual a .ut-card__corpo > * da 2A, e e impressa DEPOIS
   deste arquivo. Em empate, quem vem depois vence, e os 24px se somavam ao
   gap do flex.

   Prefixando com .ut-card--evento a regra passa a (0,2,0) e vence por
   especificidade, sem depender de ordem. O espaco entre as linhas volta a
   ser apenas o gap. */
.ut-card--evento .ut-card__corpo > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Respiro maior antes do titulo e antes do CTA, separando os tres blocos
   de leitura do card. */
.ut-card--evento .ut-card__corpo > .wp-block-post-title {
	margin-block-start: 0.4rem;
}

.ut-card--evento .ut-card__cta {
	margin-block-start: 0.6rem;
}

/* ==========================================================================
   PAGINA INDIVIDUAL DE EVENTO (1.5.0, Etapa 3B-2a)

   Escopo inteiro sob .ut-evento, a classe do <main> do template
   single-ut_evento.html. Nenhuma regra global e nenhuma regra compartilhada
   com os cards foi alterada.

   LAYOUT: o <main> e restrito, porque a pagina e leitura. Os grupos
   internos usam layout de FLUXO nos proprios blocos, como exige a licao da
   3B-1: em layout restrito o WordPress aplica max-width e margin auto com
   !important, e isso quebra alinhamento dentro de containers flex.

   ESPECIFICIDADE: as regras de margem usam dois niveis de classe
   (.ut-evento .ut-evento__ficha), valendo (0,2,0). As folhas de layout do
   WordPress sao impressas depois deste arquivo e venceriam um empate.
   ========================================================================== */

/* Aviso de situacao. Confirmado devolve texto vazio e a faixa some. */
.ut-evento .ut-evento__aviso {
	border-left: 3px solid var(--wp--preset--color--ut-track-red);
	padding: 0.6rem 0.9rem;
	margin-block-start: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--ut-carbon);
	color: var(--wp--preset--color--ut-ice);
	font-weight: 700;
}

.ut-evento .ut-evento__aviso:empty {
	display: none;
}

/* Etiqueta de categoria acima do titulo. Sem termo, sem linha. */
.ut-evento .ut-evento__etiqueta {
	margin-block-end: 0;
	color: var(--wp--preset--color--ut-steel);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ut-evento .ut-evento__etiqueta:empty {
	display: none;
}

/* FICHA TECNICA

   Rotulo e valor vivem no MESMO paragrafo, vindos do vinculo. E por isso
   que :empty basta para esconder a linha inteira quando o campo nao foi
   preenchido: nao existe rotulo separado para ficar orfao. */
.ut-evento .ut-evento__ficha {
	margin-block-start: var(--wp--preset--spacing--30);
	border-top: 1px solid rgba(143, 150, 157, 0.3);
}

/* Zera a margem que o layout de fluxo aplica a cada filho. O respiro entre
   as linhas vem do padding de cada uma, que e previsivel. */
.ut-evento .ut-evento__ficha > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.ut-evento .ut-evento__linha {
	border-bottom: 1px solid rgba(143, 150, 157, 0.3);
	padding: 0.6rem 0;
}

.ut-evento .ut-evento__linha:empty {
	display: none;
}

.ut-evento .ut-evento__linha--data {
	color: var(--wp--preset--color--ut-track-red);
	font-weight: 700;
}

/* Espaco antes do bloco de conteudo e do CTA. */
.ut-evento .wp-block-post-content {
	margin-block-start: var(--wp--preset--spacing--40);
}

.ut-evento .ut-cta-evento {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* O aviso obrigatorio e o link de volta fecham a pagina. */
.ut-evento .ut-aviso {
	margin-block-start: var(--wp--preset--spacing--30);
	border: 1px solid rgba(143, 150, 157, 0.3);
}

.ut-evento .ut-evento__voltar {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* DESKTOP: a ficha passa a duas colunas. O texto do evento continua em
   coluna unica de leitura, porque texto corrido em duas colunas cansa.

   Grid aqui e seguro: os filhos ja tiveram as margens zeradas acima, entao
   nao ha margem automatica para brigar com o alinhamento. */
@media (min-width: 900px) {

	.ut-evento .ut-evento__ficha {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--wp--preset--spacing--30);
	}

	/* Requisitos costuma ser a linha mais longa e ocupa as duas colunas. */
	.ut-evento .ut-evento__linha--larga {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   PAGINAS INDIVIDUAIS DE GARAGEM E PARCEIRO (1.6.0, Etapa 3B-2b)

   Mesma construcao validada na pagina de evento, agora em classes
   compartilhadas pelos dois tipos: .ut-ficha-pagina no <main> e .ut-ficha
   no grupo da ficha. A pagina de evento continua com as classes proprias
   dela, intocada.

   LAYOUT: o <main> e restrito, porque sao paginas de leitura. O grupo da
   ficha usa layout de FLUXO no proprio bloco, pela licao da 3B-1.

   ESPECIFICIDADE: dois niveis de classe, para vencer as folhas de layout
   do WordPress, que sao impressas depois deste arquivo.
   ========================================================================== */

.ut-ficha-pagina .ut-ficha-pagina__etiqueta {
	margin-block-end: 0;
	color: var(--wp--preset--color--ut-steel);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ut-ficha-pagina .ut-ficha-pagina__etiqueta:empty {
	display: none;
}

/* Rotulo e valor no MESMO paragrafo: sem dado, a linha inteira sai, e nao
   sobra rotulo orfao. */
.ut-ficha-pagina .ut-ficha {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ut-ficha-pagina .ut-ficha > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* A BORDA VIVE NA LINHA, e nao no grupo.

   Se o filete de cima ficasse no grupo, uma ficha com todas as linhas
   vazias, possivel num carro so com marca e modelo no titulo, deixaria um
   traco solto na pagina. Com a borda em cada linha, some tudo junto, sem
   depender de :has() nem de qualquer recurso recente de CSS. */
.ut-ficha-pagina .ut-ficha__linha {
	border-top: 1px solid rgba(143, 150, 157, 0.3);
	padding: 0.6rem 0;
}

.ut-ficha-pagina .ut-ficha__linha:last-child {
	border-bottom: 1px solid rgba(143, 150, 157, 0.3);
}

.ut-ficha-pagina .ut-ficha__linha:empty {
	display: none;
}

.ut-ficha-pagina .wp-block-post-content {
	margin-block-start: var(--wp--preset--spacing--40);
}

.ut-ficha-pagina .ut-ficha-pagina__voltar {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* GARAGEM: a foto do carro ocupa a largura da coluna de leitura. */
.ut-garagem .ut-ficha-pagina__imagem {
	margin-block-end: var(--wp--preset--spacing--20);
}

/* PARCEIRO: a marca nao e foto editorial. Fica em tamanho contido e
   alinhada a esquerda, como assinatura da empresa. */
.ut-parceiro .ut-parceiro__logo img {
	max-width: 280px;
	height: auto;
}

/* Beneficio a comunidade em destaque, no carbono oficial. Parceiro inativo
   devolve texto vazio e o bloco inteiro some. */
.ut-parceiro .ut-parceiro__beneficio {
	margin-block-start: var(--wp--preset--spacing--30);
	border-left: 3px solid var(--wp--preset--color--ut-track-red);
	padding: 0.9rem 1.1rem;
	background-color: var(--wp--preset--color--ut-carbon);
}

.ut-parceiro .ut-parceiro__beneficio:empty {
	display: none;
}

.ut-parceiro .ut-cta-parceiro {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* DESKTOP: a ficha passa a duas colunas, como na pagina de evento. O texto
   continua em coluna unica de leitura. */
@media (min-width: 900px) {

	.ut-ficha-pagina .ut-ficha {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--wp--preset--spacing--30);
	}

	.ut-ficha-pagina .ut-ficha__linha--larga {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   QUEBRA DE PALAVRAS LONGAS (1.6.1)

   O navegador quebra linha nos espacos. Diante de uma sequencia longa sem
   espaco nenhum, um endereco de site colado ou um nome de peca sem
   separacao, ele nao acha onde quebrar e empurra o conteudo para fora do
   container.

   Duas regras, com papeis diferentes:

   break-word no body e a rede de seguranca do site inteiro. Quebra dentro
   da palavra apenas quando ela sozinha nao cabe na linha, e nao interfere
   no calculo de largura dos blocos.

   anywhere nos cards e nas paginas de ficha vai alem: alem de quebrar, faz
   a palavra parar de EXIGIR largura minima. E isso que impede uma unica
   palavra gigante de esticar a coluna de um grid ou de um flex, que foi o
   caso observado na Agenda, na Garagem e nos Parceiros.

   Ambas sao herdadas pelos elementos internos, entao nao e preciso repetir
   a regra em cada titulo, resumo ou linha de ficha.
   ========================================================================== */

body {
	overflow-wrap: break-word;
}

.ut-card,
.ut-evento,
.ut-ficha-pagina {
	overflow-wrap: anywhere;
}

/* ==========================================================================
   BOTAO UNICO DO PARCEIRO (1.6.2)

   Com os dois botoes na tela existe hierarquia: site em vermelho, o
   principal, e WhatsApp em contorno, o secundario. Sobrando um so, nao ha
   hierarquia para representar, e um botao de contorno sozinho parece
   desligado. Entao o que restou assume o papel de principal.

   :only-child resolve isso sem PHP. Funciona porque o plugin Core REMOVE o
   botao vazio do HTML, em vez de escondo-lo: o que sobra e, de fato, filho
   unico. Uma regra visual fica na camada visual, que e o tema.

   ESPECIFICIDADE: (0,5,0), acima das regras de contorno do WordPress, que
   ficam em (0,4,0) e sao impressas depois deste arquivo.
   ========================================================================== */

.ut-cta-parceiro .wp-block-button.is-style-outline:only-child > .wp-block-button__link {
	border-color: var(--wp--preset--color--ut-track-red);
	background-color: var(--wp--preset--color--ut-track-red);
	color: var(--wp--preset--color--ut-ice);
}

.ut-cta-parceiro .wp-block-button.is-style-outline:only-child > .wp-block-button__link:hover,
.ut-cta-parceiro .wp-block-button.is-style-outline:only-child > .wp-block-button__link:focus {
	border-color: var(--wp--preset--color--ut-ice);
	background-color: var(--wp--preset--color--ut-ice);
	color: var(--wp--preset--color--ut-asphalt);
}

/* ==========================================================================
   BARRA DE FILTROS DA AGENDA (1.7.0, Etapa 3B-3)

   O HTML vem do plugin Core, montado com as opcoes que existem de verdade.
   Aqui so mora a aparencia.

   MOBILE FIRST: no celular cada seletor ocupa a largura inteira e fica
   empilhado, com altura de alvo confortavel para o toque. A partir de
   700px os seletores passam a dividir a linha.

   O seletor usa a aparencia nativa do sistema operacional, de proposito:
   no celular isso abre a roda de selecao que a pessoa ja conhece, que e
   mais acessivel do que qualquer lista desenhada por nos.
   ========================================================================== */

.ut-filtros {
	margin-block-end: var(--wp--preset--spacing--40);
	border: 1px solid rgba(143, 150, 157, 0.3);
	padding: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--ut-carbon);
}

.ut-filtros .ut-filtros__titulo {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--ut-steel);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ut-filtros .ut-filtros__campos {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.ut-filtros .ut-filtros__campo {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
	flex: 1 1 200px;
}

.ut-filtros .ut-filtros__campo label {
	color: var(--wp--preset--color--ut-ice);
	font-size: var(--wp--preset--font-size--pequeno);
}

.ut-filtros .ut-filtros__campo select {
	width: 100%;
	min-height: 48px;
	border: 1px solid var(--wp--preset--color--ut-steel);
	padding: 0.5rem 0.7rem;
	background-color: var(--wp--preset--color--ut-asphalt);
	color: var(--wp--preset--color--ut-ice);
	font-family: inherit;
	font-size: 1rem;
}

.ut-filtros .ut-filtros__campo select:focus-visible {
	outline: 2px solid var(--wp--preset--color--ut-track-red);
	outline-offset: 2px;
}

.ut-filtros .ut-filtros__acoes {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	flex-wrap: wrap;
	margin: var(--wp--preset--spacing--30) 0 0;
}

.ut-filtros .ut-filtros__enviar {
	border: 0;
	padding: 0.8rem 1.6rem;
	background-color: var(--wp--preset--color--ut-track-red);
	color: var(--wp--preset--color--ut-ice);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.ut-filtros .ut-filtros__enviar:hover,
.ut-filtros .ut-filtros__enviar:focus-visible {
	background-color: var(--wp--preset--color--ut-ice);
	color: var(--wp--preset--color--ut-asphalt);
}

.ut-filtros .ut-filtros__limpar {
	color: var(--wp--preset--color--ut-steel);
	font-size: var(--wp--preset--font-size--pequeno);
}

.ut-filtros .ut-filtros__limpar:hover,
.ut-filtros .ut-filtros__limpar:focus-visible {
	color: var(--wp--preset--color--ut-ice);
}

/* Texto de reserva: existe so no editor. No site o Core troca o grupo
   inteiro pela barra real, entao esta regra nunca chega a ser usada la. */
.ut-filtros__reserva {
	color: var(--wp--preset--color--ut-steel);
}

@media (min-width: 700px) {

	.ut-filtros .ut-filtros__campos {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* ==========================================================================
   FORMULARIOS (1.8.0, Etapa 3C-1)

   O HTML vem do plugin Core. Aqui so mora a aparencia.

   MOBILE FIRST: um campo por linha, largura cheia, 48px de altura minima
   nos controles, que e o alvo de toque confortavel. A partir de 700px os
   campos curtos dividem a linha.

   CONTROLES NATIVOS de proposito: no celular abrem o teclado e a roda de
   selecao que a pessoa ja conhece, o que e mais acessivel do que qualquer
   controle desenhado por nos.
   ========================================================================== */

.ut-form {
	box-sizing: border-box;
	max-width: 640px;
	margin-block-start: var(--wp--preset--spacing--30);
	border: 1px solid rgba(143, 150, 157, 0.3);
	padding: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--ut-carbon);
}

.ut-form .ut-form__titulo {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--grande);
}

.ut-form .ut-form__introducao {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--ut-steel);
}

.ut-form .ut-form__campo {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0 0 var(--wp--preset--spacing--20);
}

.ut-form .ut-form__campo label,
.ut-form .ut-form__grupo legend {
	color: var(--wp--preset--color--ut-ice);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 700;
}

.ut-form .ut-form__ajuda {
	color: var(--wp--preset--color--ut-steel);
	font-size: var(--wp--preset--font-size--pequeno);
}

/* box-sizing: sem isso, um campo com 100% de largura vira 100% MAIS a
   borda e o espacamento interno, e sobra para fora do quadro. Era o
   desalinhamento observado na 1.8.0. */
.ut-form input[type="text"],
.ut-form input[type="email"],
.ut-form input[type="tel"],
.ut-form select,
.ut-form textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	border: 1px solid var(--wp--preset--color--ut-steel);
	padding: 0.6rem 0.7rem;
	background-color: var(--wp--preset--color--ut-asphalt);
	color: var(--wp--preset--color--ut-ice);
	font-family: inherit;
	font-size: 1rem;
}

.ut-form textarea {
	min-height: 140px;
	resize: vertical;
}

.ut-form input:focus-visible,
.ut-form select:focus-visible,
.ut-form textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--ut-track-red);
	outline-offset: 2px;
}

/* Caixas de marcar: rotulo ao lado, nao em cima, e a linha inteira e
   clicavel porque o rotulo envolve o controle. */
.ut-form .ut-form__consentimento,
.ut-form .ut-form__opcao {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

.ut-form .ut-form__consentimento input,
.ut-form .ut-form__opcao input {
	width: 22px;
	height: 22px;
	margin-top: 0.15rem;
	flex: 0 0 auto;
	accent-color: var(--wp--preset--color--ut-track-red);
}

.ut-form .ut-form__grupo {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	border: 0;
	padding: 0;
	margin: 0;
}

.ut-form .ut-form__erros {
	margin-block-end: var(--wp--preset--spacing--30);
	border-left: 3px solid var(--wp--preset--color--ut-track-red);
	padding: 0.8rem 1rem;
	background-color: var(--wp--preset--color--ut-asphalt);
}

.ut-form .ut-form__erros p {
	margin: 0 0 0.4rem;
	font-weight: 700;
}

.ut-form .ut-form__erros ul {
	margin: 0;
	padding-left: 1.1rem;
}

/* Campo-isca: fora da tela, mas nao display:none, porque robo ignora campo
   escondido desse jeito e a armadilha perderia a graca. */
.ut-form .ut-form__isca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ut-form .ut-form__enviar {
	border: 0;
	padding: 0.9rem 1.8rem;
	background-color: var(--wp--preset--color--ut-track-red);
	color: var(--wp--preset--color--ut-ice);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.ut-form .ut-form__enviar:hover,
.ut-form .ut-form__enviar:focus-visible {
	background-color: var(--wp--preset--color--ut-ice);
	color: var(--wp--preset--color--ut-asphalt);
}

.ut-form .ut-form__acoes {
	margin: var(--wp--preset--spacing--30) 0 0;
}

.ut-form .ut-form__aviso {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--ut-steel);
	font-size: var(--wp--preset--font-size--pequeno);
}

/* Confirmacao de envio, no TOPO do conteudo da pagina (1.9.0). Fica antes
   de tudo porque quem preenche um formulario longo termina no fim da
   pagina, e a resposta precisa estar onde a pessoa volta a olhar. */
.ut-form-confirmacao {
	margin-block-end: var(--wp--preset--spacing--40);
	border-left: 3px solid var(--wp--preset--color--ut-track-red);
	padding: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--ut-carbon);
}

.ut-form-confirmacao p {
	margin: 0;
	font-size: var(--wp--preset--font-size--medio);
	font-weight: 700;
}

/* Sem contorno de foco visivel aqui: o foco vem do navegador, e nao de um
   clique da pessoa. */
.ut-form-confirmacao:focus {
	outline: none;
}

/* Texto de reserva: existe so no editor. */
.ut-form__reserva {
	color: var(--wp--preset--color--ut-steel);
}

@media (min-width: 700px) {

	.ut-form .ut-form__grupo {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}

/* Cidade antes de escolher o estado: desativada, e a aparencia precisa
   dizer isso. Sem JavaScript o campo nunca fica desativado, e continua
   como texto livre. (1.8.2, Etapa 3C-1) */
.ut-form input:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Campo de foto da Garagem (1.10.0, Etapa 3C-2). O controle de arquivo e
   nativo: cada sistema desenha o seu, e o do celular abre a camera e a
   galeria que a pessoa ja conhece. Aqui so damos moldura e respiro. */
.ut-form input[type="file"] {
	box-sizing: border-box;
	width: 100%;
	border: 1px dashed var(--wp--preset--color--ut-steel);
	padding: 0.9rem 0.7rem;
	background-color: var(--wp--preset--color--ut-asphalt);
	color: var(--wp--preset--color--ut-ice);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--pequeno);
	cursor: pointer;
}

.ut-form input[type="file"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--ut-track-red);
	outline-offset: 2px;
}

/* O formulario da Garagem e longo: um pouco mais de largura evita rolagem
   interminavel no desktop, sem virar duas colunas. */
.ut-form-garagem .ut-form {
	max-width: 760px;
}

/* ==========================================================================
   ALINHAMENTO DOS CARDS DE GARAGEM E PARCEIRO (1.10.1)

   A correcao de alinhamento da 1.4.5 foi escrita so para .ut-card--evento,
   porque era o unico card com campos reais na epoca. Garagem e parceiro
   ficaram com o comportamento antigo: em um container flex em coluna, a
   caixa de cada filho encolhe ate a largura do proprio texto e fica
   centralizada, o que cola o resumo nas bordas e centraliza o titulo.

   Mesma solucao, mesmas razoes: quem posiciona a CAIXA em flex e
   align-items, e nao text-align. O padding repetido aqui vence qualquer
   empate de especificidade com as regras de layout do WordPress, que sao
   impressas depois deste arquivo.
   ========================================================================== */

.ut-card--artigo .ut-card__corpo,
.ut-card--garagem .ut-card__corpo,
.ut-card--parceiro .ut-card__corpo {
	align-items: flex-start;
	text-align: left;
	padding: var(--wp--preset--spacing--30);
}

.ut-card--artigo .ut-card__corpo > *,
.ut-card--garagem .ut-card__corpo > *,
.ut-card--parceiro .ut-card__corpo > * {
	width: 100%;
	margin-block-start: 0;
	margin-block-end: 0;
}

.ut-card--artigo .ut-card__cta,
.ut-card--garagem .ut-card__cta,
.ut-card--parceiro .ut-card__cta {
	margin-block-start: 0.6rem;
}

/* ==========================================================================
   TEXTOS LONGOS DE TERMO E POLITICA (1.11.0)

   Documento juridico e feito para ser lido do inicio ao fim, e nao
   escaneado. Coluna estreita, linha alta e titulos com respiro: o mesmo
   cuidado de um texto impresso.
   ========================================================================== */

.ut-termo {
	max-width: 720px;
}

.ut-termo h2,
.ut-termo h3,
.ut-termo h4 {
	margin-block-start: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--20);
}

.ut-termo p,
.ut-termo li {
	line-height: 1.75;
}

.ut-termo ul,
.ut-termo ol {
	padding-left: 1.3rem;
}

.ut-termo li {
	margin-block-end: 0.4rem;
}

/* A frase do consentimento e link. Sublinhado permanente, porque link que
   so aparece ao passar o mouse nao existe para quem usa celular. */
.ut-form .ut-form__termo {
	color: var(--wp--preset--color--ut-ice);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ut-form .ut-form__termo:hover,
.ut-form .ut-form__termo:focus-visible {
	color: var(--wp--preset--color--ut-track-red);
}

/* O formulario comercial e longo, como o da Garagem: um pouco mais de
   largura evita rolagem interminavel no desktop. (1.13.0, Etapa 3C-3) */
.ut-form-parceiro .ut-form {
	max-width: 760px;
}

/* Categorias como link (1.14.0). A lista passou a ser montada pelo plugin
   Core, com as categorias que existem de verdade. Aqui so a aparencia:
   a etiqueta inteira vira area clicavel, e nao apenas as letras. */
.ut-categorias__lista li {
	padding: 0;
}

.ut-categorias__lista li a {
	display: block;
	padding: 0.4rem 0.9rem;
	color: var(--wp--preset--color--ut-ice);
	text-decoration: none;
}

.ut-categorias__lista li:hover,
.ut-categorias__lista li:focus-within {
	border-color: var(--wp--preset--color--ut-track-red);
}

.ut-categorias__lista li a:hover,
.ut-categorias__lista li a:focus-visible {
	color: var(--wp--preset--color--ut-track-red);
}

/* ==========================================================================
   GRADE DAS SEÇÕES DA HOME (1.15.1)

   O plugin Core marca cada grade com ut-grade--3 ou ut-grade--4, conforme
   a seção. Aqui a classe vira número de colunas de verdade.

   POR QUE NÚMERO FIXO, e não largura mínima: com largura mínima quem
   decide é o tamanho da tela de quem visita, e a mesma seção virava três,
   quatro ou cinco colunas conforme o monitor. A linha quase nunca fechava.

   MOBILE FIRST: uma coluna no celular, duas no tablet, e o número cheio só
   onde há espaço de verdade. Forçar quatro colunas em tela estreita
   transformaria cada card numa tira ilegível.

   A especificidade dupla vence as regras de layout do WordPress, que são
   impressas depois deste arquivo e definem a grade pela largura mínima.
   ========================================================================== */

.ut-grade.ut-grade--3,
.ut-grade.ut-grade--4 {
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {

	.ut-grade.ut-grade--3,
	.ut-grade.ut-grade--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {

	.ut-grade.ut-grade--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {

	.ut-grade.ut-grade--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==========================================================================
   INDICAÇÕES NO FIM DO ARTIGO (1.16.0)

   Deliberadamente DISCRETO. O bloco precisa parecer continuação do texto,
   e não anúncio encaixado: sem borda chamativa, sem botão, sem preço, sem
   cor de urgência. O vermelho entra só no link, que é onde ele significa
   ação.

   A separação do artigo vem de um filete e de respiro, não de uma caixa
   colorida: caixa colorida no fim do texto é a forma visual do anúncio, e
   é exatamente o que o Brand Kit pede para evitar.
   ========================================================================== */

.ut-indicacoes {
	max-width: 720px;
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--30);
	border-top: 1px solid rgba(143, 150, 157, 0.3);
}

.ut-indicacoes .ut-indicacoes__titulo {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--medio);
}

.ut-indicacoes .ut-indicacoes__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ut-indicacoes .ut-indicacoes__item {
	margin-block-end: var(--wp--preset--spacing--20);
	padding-block-end: var(--wp--preset--spacing--20);
	border-bottom: 1px solid rgba(143, 150, 157, 0.2);
}

.ut-indicacoes .ut-indicacoes__item:last-child {
	margin-block-end: 0;
	border-bottom: 0;
}

.ut-indicacoes .ut-indicacoes__link {
	color: var(--wp--preset--color--ut-track-red);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ut-indicacoes .ut-indicacoes__link:hover,
.ut-indicacoes .ut-indicacoes__link:focus-visible {
	color: var(--wp--preset--color--ut-ice);
}

/* Nome da loja ao lado do produto: quem clica merece saber para onde vai
   antes de sair do site. */
.ut-indicacoes .ut-indicacoes__loja {
	color: var(--wp--preset--color--ut-steel);
	font-size: var(--wp--preset--font-size--pequeno);
}

.ut-indicacoes .ut-indicacoes__motivo {
	display: block;
	margin-block-start: 0.3rem;
	color: var(--wp--preset--color--ut-ice);
	line-height: 1.6;
}

/* O aviso precisa ser LEGÍVEL, e não escondido em letra minúscula: aviso
   que ninguém lê não cumpre a exigência de identificar publicidade. */
.ut-indicacoes .ut-indicacoes__aviso {
	margin-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--ut-steel);
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 1.6;
}