/* =============================================================================
   A CAIXA DO PATROCÍNIO — UMA SÓ, PARA AS QUATRO TELAS.

   "Deixa os banners iguais nessas telas, inclusive na tela do pós-jogo. Pega o
    banner como tá no pré-jogo e deixa igual em todas as outras telas."

   ─────────────────────────────────────────────────────────────────────────────
   POR QUE ELES ESTAVAM DIFERENTES.

   O HTML já era um só: `ET_Render::banner_html()` escreve a mesma caixa, com o
   mesmo rodízio, para a escalação, para a projeção e para as notícias. O que
   estava em três lugares era o DESENHO dela — e as três cópias já tinham
   divergido:

     escalação   16/9,  min(100%, 47cqh),  raio 0.4em,        object-fit: cover
     projeção    16/9,  min(100%, 47cqh),  raio --et-proj-raio, cover
     notícias    altura fixa de 27cqh,     raio 1.2cqh,       object-fit: contain

   A das notícias não tinha nem proporção: a altura era um número e a largura
   vinha da faixa, então a arte esticava ou sobrava conforme a janela. Era por
   isso que, passando de uma tela para outra no ar, o mesmo anúncio mudava de
   tamanho e de canto arredondado na frente de quem assiste.

   Cada folha continua dizendo ONDE a faixa fica — na escalação é uma coluna da
   grade, na projeção é o vazio da direita posicionado por cima, nas notícias é
   um canto absoluto. Isso é de cada tela e tem de continuar sendo. O que esta
   folha resolve é a CAIXA: proporção, largura máxima, canto, e como a arte se
   encaixa nela. Uma vez.

   ─────────────────────────────────────────────────────────────────────────────
   POR QUE `cover` NÃO CORTA NADA.

   A folha das notícias usava `contain` com um bom argumento escrito ao lado:
   cortar o logotipo de quem pagou é estragar o que foi vendido. O argumento
   continua valendo — e é a PROPORÇÃO que o resolve, não o `object-fit`. Numa
   caixa 16/9, uma arte 16/9 dá no mesmo com as duas regras; `contain` só muda o
   resultado quando a caixa e a arte discordam, e aí ele resolve com tarja em
   vez de resolver com o tamanho certo. A caixa agora tem a proporção que os
   banners têm, então não há o que cortar.
   ============================================================================= */

/*
 * ═════════════════════════════════════════════════════════════════════════════
 * E A CAIXA OCUPA A FAIXA INTEIRA — "faz o banner ficar assim em todas as
 * telas das lives".
 *
 * ── O TETO DE LARGURA SAIU.
 *
 * `min(100%, 47cqh)` eram 338px numa faixa de 345: a arte encostava de um lado
 * e sobrava um dedo de fundo do outro, e o conjunto lia como peça solta em vez
 * de faixa. O teto existia para o anúncio não virar outdoor em janela larga —
 * e esse medo é de quando a largura vinha do VÃO, sem proporção nenhuma. Hoje
 * a caixa é 16/9: a altura acompanha a largura, e "largo demais" virou uma
 * pergunta sobre a FAIXA que cada tela reserva, não sobre esta caixa. Quem
 * responde é a tela, que é quem sabe quanto do quadro é da câmera.
 *
 * ── E O CANTO FICOU RETO.
 *
 * Arredondado é o desenho de uma peça que flutua, com margem dos dois lados.
 * Encostada nas bordas da faixa, a curva deixa triângulos de fundo nos cantos
 * — no ar, quatro mordidas na arte de quem pagou.
 *
 * As duas decisões moram AQUI, e não em cada tela, pelo motivo que criou esta
 * folha: eram três cópias, e as três tinham divergido. Uma exceção por tela é
 * como a divergência recomeça.
 * ═════════════════════════════════════════════════════════════════════════════
 */
.et-painel__banner {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	flex: 0 0 auto;
	border-radius: 0;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
}

.et-painel__banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * As artes ficam empilhadas: a de cima é a acesa. Trocar por opacidade — e não
 * por `display` — é o que permite o esmaecimento e mantém todas já carregadas,
 * sem branco no meio da transmissão.
 */
.et-painel__arte {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
}

.et-painel__arte.is-ativa {
	opacity: 1;
}

@media ( prefers-reduced-motion: reduce ) {
	.et-painel__arte {
		transition: none;
	}
}

/*
 * O convite, quando não há arte nenhuma cadastrada. Só quem pode editar chega a
 * ver isto — para quem assiste, a função não desenha faixa alguma.
 */
.et-painel__banner--vazio {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 0.1em dashed rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.78em;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.7;
}

.et-painel__banner--vazio small {
	font-size: 0.78em;
	letter-spacing: 0.06em;
	text-transform: none;
	font-weight: 600;
}

/* =============================================================================
   O DESTAQUE — o patrocinador toma a área da live, a pedido do operador.

   "Em vez de abrir automaticamente, para abrir se eu clicar no banner. Ele abre
    num modal, como num lightbox, que cubra a área (…), o retângulo amarelo
    dentro é onde apareceria o vídeo ou imagem do patrocinador, e isso com um
    controle de tempo embaixo pro espectador saber que é temporário."

   ─────────────────────────────────────────────────────────────────────────────
   SÃO DOIS RETÂNGULOS, e o de dentro é o que ele desenhou.

   A CAMADA cobre a área inteira da live e pinta a sobra. O PALCO é o retângulo
   de dentro, onde a mídia aparece — com margem em volta, de propósito: uma
   imagem colada nas quatro bordas parece a página ter trocado de conteúdo; com
   margem, parece o que é, uma coisa posta POR CIMA e que vai sair.

   ─────────────────────────────────────────────────────────────────────────────
   É UMA CAMADA NOVA, E NÃO A CAIXA CRESCENDO.

   A tentação é animar a própria `.et-painel__banner`: ela já tem a arte dentro.
   Não serve — ela mora DENTRO de uma coluna da grade de cada tela, e crescer
   ali empurraria o campo, os cards e a lista para fora do lugar. A tela inteira
   se mexeria por causa do anúncio, e voltaria torta.

   ─────────────────────────────────────────────────────────────────────────────
   E A MÍDIA NÃO É CORTADA — `contain`, e não `cover`.

   Elas só discordam quando a área não é 16:9 — e aí `cover` cortaria a arte de
   quem pagou para aparecer inteira. A sobra fica com o vermelho da casa, logo
   abaixo, e resolve o enquadramento sem tocar no que foi vendido.
   ============================================================================= */

.et-destaque {
	/*
	 * ─────────────────────────────────────────────────────────────────────────
	 * A CAMADA NÃO É A JANELA: ELA É A MOLDURA DO AR.
	 *
	 * "Ocupa a área amarela." O amarelo dele é a moldura inteira da tela que vai
	 * ao ar — campo, painel e faixa do patrocínio juntos. Fora dela ficam o
	 * fundo da página e o banner do cabeçalho, que a câmera nem enquadra.
	 *
	 * ── E ELA SE ENCAIXA POR PARENTESCO, não por coordenada.
	 *
	 * `position: fixed` com o retângulo da área escrito em pixels encaixava na
	 * bancada e nascia deslocado na tela dele: coordenada de janela só vale
	 * enquanto nenhum pai for bloco de contenção, e `transform`, `filter`,
	 * `contain` e `container-type` fazem isso calados, em folhas que eu não
	 * escrevi. Foi o defeito do menu, de novo.
	 *
	 * Então o `banner.js` põe a camada DENTRO da moldura e ela preenche a
	 * moldura — `--na-area` troca `fixed` por `absolute`, e o `inset: 0` abaixo
	 * faz o resto. Sem área encontrada, `fixed` + `inset: 0` continuam valendo e
	 * a camada toma a janela: perder o enquadramento é aceitável, perder o
	 * anúncio que já foi descontado não é.
	 * ─────────────────────────────────────────────────────────────────────────
	 */
	position: fixed;
	inset: 0;
	z-index: 9999;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * A moldura em volta do palco, e a espessura da barra de tempo. Estão aqui,
	 * com nome, porque três regras desta folha precisam do mesmo número: o
	 * recuo da camada, o desconto na altura do palco e a altura da barra.
	 */
	--et-destaque-margem: clamp( 10px, 3.2vmin, 48px );
	--et-destaque-barra: max( 5px, 0.9vh );
	padding: var( --et-destaque-margem );
	padding-bottom: calc( var( --et-destaque-margem ) + var( --et-destaque-barra ) );
	/*
	 * ── A COR DA SOBRA É A DA CASA, e mora só aqui.
	 *
	 * "Faz esse fundo preto ser um fundo vermelho tipo #330000."
	 *
	 * Ela já foi lida da própria arte: o `banner.js` tirava a média das
	 * beiradas e pintava um degradê, para a emenda sumir. Era ideia minha, e na
	 * tela dele deu no contrário — a arte do patrocinador tem beirada quase
	 * preta, e a camada virava um apagão retangular no meio de uma transmissão
	 * vermelha. A sobra não tem de sumir dentro do anúncio; tem de pertencer à
	 * casa.
	 *
	 * Agora é uma cor só, e nenhuma linha de JavaScript toca neste fundo: quem
	 * quiser outro vermelho troca aqui, num lugar.
	 */
	background: #330000;
	/*
	 * A entrada é um crescer curto, e não um corte seco: o corte parece falha
	 * de transmissão, e quem está assistindo não entende que aquilo é de
	 * propósito. 320ms é o tempo de um corte de câmera.
	 */
	animation: et-destaque-entra 0.32s ease-out both;
}

/*
 * Pendurada na moldura do ar. A única medida que ela carrega é a SOBRA DA
 * DIREITA — "ocupar com 27% de margem pra direita" —, que é a largura da faixa
 * do patrocínio, para o destaque não engolir a caixa de onde ele saiu. Vem em
 * porcentagem da moldura, então acompanha a tela sozinha; o `27%` aqui é só o
 * valor de quando a faixa não pôde ser medida.
 */
.et-destaque--na-area {
	position: absolute;
	right: var( --et-destaque-sobra, 27% );
}

/*
 * ── O PALCO: o retângulo de dentro, e ele é 16:9.
 *
 * "Deixa o banner de 16:9 na área que tá o retângulo amarelo interno."
 *
 * A área do ar menos a faixa não é 16:9 — é um retângulo quase 4:3. O banner é.
 * Antes o palco era a área inteira menos a margem e a mídia se virava lá dentro
 * com `contain`: o resultado era uma arte 16:9 flutuando num vão alto, com
 * sobra enorme em cima e embaixo e ninguém sabendo onde o anúncio acabava.
 *
 * Agora o PALCO tem a proporção do anúncio. Ele nasce com a largura toda e a
 * altura que a razão mandar; quando a área é baixa demais, o `max-height` corta
 * a altura e a razão leva a largura junto — `aspect-ratio` transfere o limite
 * de um eixo para o outro, então o retângulo encolhe inteiro em vez de achatar.
 *
 * A mídia preenche esse palco com `contain`: numa arte 16:9 — que é o que o
 * modelo do `/anuncie` monta — as duas coincidem e não sobra nada. Numa arte
 * fora de medida, `contain` deixa sobra em vez de cortar: cortar seria tirar
 * pedaço do que alguém pagou para mostrar inteiro.
 */
.et-destaque__palco {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * O QUADRO É A PRÓPRIA ARTE, ESTICADA ATÉ BATER NA MOLDURA.
 *
 * "O banner tem que ficar onde tá o retângulo azul." O azul dele é o 16:9
 * encaixado no meio do amarelo, com uma margem de folga — e é exatamente o que
 * `object-fit: contain` desenha, porque a arte JÁ É 16:9: ela cresce até
 * encostar na borda mais apertada e para, com a razão dela inteira.
 *
 * ── E NÃO HÁ `aspect-ratio` NENHUM AQUI, de propósito.
 *
 * Tentei duas versões com ele. No palco, com `width: 100%` e `max-height: 100%`
 * para encolher em área baixa: não encolhe — com a largura definida, o
 * `max-height` corta a altura e a razão não leva a largura junto, e o palco saía
 * 1,87 em vez de 1,78. Na mídia, com os dois eixos `auto`: aí ela para no
 * tamanho natural do arquivo — 160 pixels de largura no meio da tela.
 *
 * O que ficou é mais simples e mede a mesma coisa: numa arte 16:9 o quadro É o
 * retângulo azul; numa arte fora de medida, ele é o retângulo daquela arte,
 * inteira, com o vermelho da casa em volta. Uma regra 16:9 aqui só serviria
 * para pôr uma arte quadrada dentro de uma moldura 16:9 dentro da área — duas
 * tarjas em vez de uma, e nenhum pixel a mais de anúncio.
 * ─────────────────────────────────────────────────────────────────────────────
 */
.et-destaque__palco img,
.et-destaque__palco video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

@keyframes et-destaque-entra {
	from { opacity: 0; transform: scale(0.94); }
	to   { opacity: 1; transform: scale(1); }
}

/*
 * ── A SAÍDA É A ENTRADA LIDA DE TRÁS PARA FRENTE.
 *
 * Mesmos 320 ms, mesma escala, mesmo caminho — e a aceleração trocada:
 * `ease-out` para entrar, que começa rápido e assenta; `ease-in` para sair, que
 * assenta e dispara. É assim que uma coisa que entra e sai parece a mesma coisa
 * indo e voltando, e não duas animações diferentes coladas.
 *
 * O `forwards` importa: sem ele a camada volta a aparecer, inteira, no quadro
 * entre o fim da animação e a remoção — um piscar no meio da transmissão.
 */
.et-destaque.is-saindo {
	animation: et-destaque-sai 0.32s ease-in forwards;
}

@keyframes et-destaque-sai {
	from { opacity: 1; transform: scale(1); }
	to   { opacity: 0; transform: scale(0.94); }
}

/*
 * ── A BARRA DE TEMPO, no pé da área.
 *
 * "Com um controle de tempo embaixo pro espectador saber que é temporário."
 * Ela existe para quem assiste saber que isto tem fim — sem ela, um anúncio em
 * tela grande no meio de uma transmissão parece um travamento.
 *
 * A barra ESVAZIA: começa cheia e encolhe até sumir. O contrário — encher —
 * mede o que já passou, e quem está esperando quer saber o que falta.
 */
.et-destaque__tempo {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	/*
	 * A mesma medida que a camada desconta da própria altura ao reservar o pé
	 * para a barra. Era `0.9cqh` com um `min-height` ao lado — e `cqh` sem
	 * contêiner nenhum em volta cai na janela pequena, que é o que `vh` já diz
	 * sem fingir ser outra coisa.
	 */
	height: var( --et-destaque-barra );
	background: rgba( 255, 255, 255, 0.18 );
	overflow: hidden;
}

.et-destaque__tempo span {
	display: block;
	width: 100%;
	height: 100%;
	background: var( --et-secundaria, #c8102e );
	transform-origin: left center;
	/*
	 * A duração vem do JS pela variável, e não está escrita aqui: ela é
	 * decidida pelo SERVIDOR a cada abertura — o tempo do vídeo, ou o da arte,
	 * ou o resto do saldo do patrocinador. Um número escrito nesta folha seria
	 * uma barra que promete um tempo e um anúncio que entrega outro.
	 */
	animation: et-destaque-tempo var( --et-destaque-tempo, 15s ) linear both;
}

@keyframes et-destaque-tempo {
	from { transform: scaleX(1); }
	to   { transform: scaleX(0); }
}

/*
 * Quem pediu menos movimento continua tendo o anúncio — ele é o que foi
 * vendido —, só que sem o crescer da entrada. A barra continua: ela é
 * informação, e não enfeite.
 */
@media (prefers-reduced-motion: reduce) {
	.et-destaque,
	.et-destaque.is-saindo { animation: none; }
}

/* =============================================================================
   O MENU DO OPERADOR — o ícone que se vê, o `<select>` que recebe o clique.

   "Continuo clicando no menu dropdown e ele não abre as opções."

   ─────────────────────────────────────────────────────────────────────────────
   A LISTA DEIXOU DE SER DESENHADA AQUI, e é essa a correção.

   Três versões de lista feita em CSS — absoluta dentro da caixa, fixa, e no
   corpo da página — abriram na bancada e não abriram na tela dele. Uma lista
   desenhada pela página depende do recorte de um pai, do contexto de pilha de
   outro, do bloco de contenção de um terceiro, da ordem de pintura. São muitos
   mecanismos, em folhas que eu não escrevi, e nenhum deles dá erro quando apaga
   a lista: ela simplesmente não aparece.

   A lista de um `<select>` é desenhada pelo SISTEMA, fora da árvore do
   documento. Não há CSS que a recorte, cubra ou desloque. Numa tela que vai ao
   ar essa garantia vale mais que o desenho.

   Então o que sobra aqui é o quadradinho — e o `<select>` invisível em cima
   dele, que é quem recebe o clique.
   ============================================================================= */

.et-destaque-menu {
	position: absolute;
	top: 0.4em;
	left: 0.4em;
	z-index: 5;
	width: 1.7em;
	height: 1.7em;
	border-radius: 0.3em;
	background: rgba( 0, 0, 0, 0.45 );
	color: #fff;
	opacity: 0.35;
	transition: opacity 0.15s;
}

.et-destaque-menu:hover,
.et-destaque-menu:focus-within {
	opacity: 1;
}

/*
 * O ícone é só desenho. `pointer-events: none` é o que faz o clique atravessar
 * e chegar ao `<select>` que está por cima — sem isso, o ícone engoliria o
 * clique e o menu voltaria a não abrir, que é justamente o defeito que esta
 * versão existe para acabar.
 */
.et-destaque-menu__icone {
	position: absolute;
	inset: 0.3em;
	display: block;
	pointer-events: none;
}

.et-destaque-menu__icone svg {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * ── O `<select>` COBRE O QUADRADINHO INTEIRO, invisível.
 *
 * `opacity: 0` e não `visibility: hidden` nem `display: none`: ele precisa
 * continuar recebendo clique e foco de teclado. É o padrão dos seletores de
 * idioma de meio mundo, pela mesma razão.
 */
.et-destaque-menu__escolha {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
	/* Sem isto, o Safari desenha o relevo nativo por cima do quadradinho. */
	-webkit-appearance: none;
	appearance: none;
}

/* O foco do teclado precisa aparecer, porque o `<select>` é invisível. */
.et-destaque-menu__escolha:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* =============================================================================
   A LISTA GANHA CARA — sem deixar de ser a lista do sistema.

   "Melhora a parte visual desse menu dropdown."

   ─────────────────────────────────────────────────────────────────────────────
   O QUE NÃO SE FAZ AQUI: VOLTAR A DESENHAR A LISTA.

   Três versões de lista feita por mim abriram nesta bancada e nenhuma abriu na
   tela dele. Foi por isso que o desenho passou a ser do sistema — e o preço
   combinado foi justamente este: a lista fica com a cara do navegador.

   `appearance: base-select` é a forma que o Chrome abriu para pagar menos por
   isso. Com ela a lista continua sendo a de um `<select>` — o navegador é quem
   a abre, a põe na camada de cima e a fecha —, e passa a aceitar CSS. Não é a
   minha lista de volta: é a mesma lista, vestida.

   ─────────────────────────────────────────────────────────────────────────────
   E O `@supports` É A PARTE QUE IMPORTA.

   Num navegador que não conheça a forma nova, NADA aqui dentro vale e o menu
   continua exatamente como está hoje: feio e funcionando. É o contrário do
   risco que eu já corri aqui — uma lista que depende de um recurso para
   APARECER some quando o recurso falta, e não dá erro nenhum ao sumir.
   ============================================================================= */

@supports ( appearance: base-select ) {

	.et-destaque-menu__escolha {
		appearance: base-select;
		/*
		 * ── AQUI O INVISÍVEL NÃO PODE SER `opacity: 0`.
		 *
		 * Nesta forma a lista é um PSEUDO-ELEMENTO deste botão — opacidade zero
		 * apagaria as duas, e o menu voltaria a «não abrir». O que some é só o
		 * que o botão desenha: a cor, o fundo, a borda e a setinha. O que se vê
		 * continua sendo o quadradinho por cima.
		 */
		opacity: 1;
		color: transparent;
		background: transparent;
		border: 0;
		font-size: 0;
		line-height: 0;
	}

	.et-destaque-menu__escolha::picker-icon {
		display: none;
	}

	/*
	 * ── O PAINEL É VERMELHO E BRANCO, as cores da casa.
	 *
	 * "Faz esse menu ficar em vermelho e branco, e não em preto e vermelho."
	 *
	 * O preto veio de eu ter copiado a camada do destaque, que é escura porque
	 * ali o fundo é a sobra da arte. Aqui não há arte nenhuma: é um controle de
	 * operação abrindo ao lado do anúncio, e a cor que ele deve vestir é a do
	 * clube — a mesma `--et-secundaria` que pinta a barra de tempo do destaque e
	 * o resto do que é «da casa» nestas telas.
	 *
	 * Branco puro continua fora: um retângulo branco por cima da tela do ar é um
	 * flash no meio da transmissão. O vermelho cheio não é — e o branco entra no
	 * texto, onde ele é leitura e não brilho.
	 */
	.et-destaque-menu__escolha::picker( select ) {
		appearance: base-select;
		/* O botão tem fonte zero para sumir; o painel precisa da dele. */
		font-size: 14px;
		font-weight: 600;
		line-height: 1.2;
		min-width: 12em;
		margin-top: 0.4em;
		padding: 0.35em;
		border: 1px solid rgba( 255, 255, 255, 0.3 );
		border-radius: 0.9em;
		background: var( --et-secundaria, #c8102e );
		box-shadow: 0 18px 44px rgba( 0, 0, 0, 0.42 );
		color: #fff;
	}

	.et-destaque-menu__escolha option {
		display: flex;
		align-items: center;
		min-height: 2.4em;
		padding: 0 0.8em;
		border-radius: 0.55em;
		background: transparent;
		color: #fff;
		white-space: nowrap;
	}

	/*
	 * O rótulo não é um patrocinador: ele é o título do menu. Menor, em
	 * maiúsculas e lavado — a mesma distinção que o `disabled` já faz no
	 * comportamento, dita também no desenho. Lavado, e não apagado: num painel
	 * vermelho, branco a 42% some.
	 */
	.et-destaque-menu__escolha option:disabled {
		min-height: 0;
		padding: 0.45em 0.85em 0.3em;
		color: rgba( 255, 255, 255, 0.78 );
		font-size: 0.78em;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	/*
	 * ── O ITEM SOB O DEDO INVERTE: branco por baixo, vermelho por cima.
	 *
	 * Num painel vermelho, destacar com MAIS vermelho não destaca nada — e
	 * escurecer traria o preto de volta pela porta dos fundos. A inversão é a
	 * única que usa só as duas cores que ele pediu e ainda assim grita qual é
	 * o item.
	 */
	.et-destaque-menu__escolha option:not(:disabled):hover,
	.et-destaque-menu__escolha option:not(:disabled):focus {
		background: #fff;
		color: var( --et-secundaria, #c8102e );
	}

	/*
	 * O ESPAÇO DO «ESCOLHIDO» NÃO É RESERVADO.
	 *
	 * A forma nova põe um lugar para a marca de seleção à esquerda de todo
	 * item. Aqui ninguém fica escolhido — o menu volta ao rótulo assim que
	 * abre o destaque —, e esse vão deixaria todos os nomes empurrados para a
	 * direita por uma marca que nunca aparece.
	 */
	.et-destaque-menu__escolha option::checkmark {
		display: none;
	}
}

/* A caixa só vira botão para quem opera; para quem assiste é uma imagem. */
.et-painel__banner--clicavel {
	cursor: pointer;
}