/**
 * Brazilcore Guide — camada do tema sobre o Enfold.
 *
 * Regra do projeto: layout, largura, breakpoints e empilhamento de colunas
 * são do WordPress + Enfold. Aqui fica só o que o Enfold não tem como
 * saber sozinho.
 *
 * Carregado DEPOIS de main.css e do CSS do Enfold (depende do handle
 * 'bcg-main' — ver bcg_enqueue_assets() em functions.php). O único valor
 * impresso inline é --maxw, que vem de uma opção do Enfold e é injetado
 * com wp_add_inline_style() sobre este mesmo handle.
 */

@media (max-width: 781px) { :root { --pad: 1.25rem; } }
@media (max-width: 720px) { :root { --pad: 1.25rem; --gap: 1rem; } }
@media (max-width: 480px) { :root { --pad: 1.125rem; } }

/* ═══ 1. LARGURA ═══════════════════════════════════════════════════
 *
 * ATENÇÃO antes de "limpar" esta seção.
 *
 * Na 1.7.70 três regras daqui foram removidas por parecerem redundantes
 * agora que o grid.css do Enfold é carregado -- e a Main Guide voltou a
 * sair encaixotada na mesma hora. Elas são carga estrutural: as duas
 * páginas chegam ao Enfold por caminhos diferentes (front-page.php vs
 * page.php) e não emitem exatamente a mesma cadeia de wrappers, então o
 * que parece duplicado numa é a única regra que age na outra.
 *
 * Se for mexer aqui, mexa em uma regra por vez e teste Homepage E Main
 * Guide a cada passo.
 *
 * Nenhuma conta de viewport em lugar nenhum: 100vw/left:50%/-50vw só
 * fecham quando o contenedor tem exatamente a largura da viewport a
 * partir de x=0, o que no celular não acontece.
 */

/* (a) As páginas do app não têm sidebar. bcg_enforce_alb_layout_on_view()
 * põe a meta 'layout' em fullsize na primeira visita; isto é a rede de
 * segurança visual -- enquanto a meta não estiver corrigida, o Enfold
 * reserva a coluna da sidebar e entrega o conteúdo com ~70% da largura. */
body.bcg-app-page .sidebar { display: none !important; }
body.bcg-app-page main.content {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	border: none !important;
	float: none !important;
}

/* (b) Seções escritas por este tema (bcg_alb_wrap_shortcode). Cada bloco
 * do app já se centraliza sozinho em --maxw com --pad (.hero-inner,
 * .searchbar-wrap, .section, .map-wrap, .itin-wrap, .saved-wrap), então
 * basta desligar a caixa do Enfold nelas. */
.bcg-fullwidth-section > .container {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.bcg-fullwidth-section > .container > .av_one_full,
.bcg-fullwidth-section .av_textblock_section,
.bcg-fullwidth-section .avia_textblock {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.avia-section.bcg-fullwidth-section { padding-top: 0 !important; padding-bottom: 0 !important; }

/* (c) Coluna de leitura para o conteúdo do construtor.
 *
 * Estas três regras NÃO são condicionadas a body.bcg-app-page, de
 * propósito: essa classe depende de bcg_is_own_app_page(), que pode
 * devolver false por motivos invisíveis no CSS -- e aí a regra
 * simplesmente não existe, sem erro nenhum (mesma armadilha do prefixo
 * #top no início do projeto). Como só atingem marcação do construtor,
 * não têm efeito em página que não use o Enfold.
 *
 * A caixa fica no bloco de texto quando não há .container encaixotando, e
 * no .container quando há -- nunca nos dois, senão o padding soma. */
.avia_textblock {
	/* Sem recuo lateral próprio (1.8.6).
	 *
	 * Tinha padding: 0 var(--pad), somado ao padding que o .container do
	 * Enfold já aplica -- daí o texto começar mais para dentro que o
	 * título da seção. A margem lateral volta a ser exclusivamente do
	 * painel (Enfold > Layout), num nível só.
	 *
	 * A largura máxima fica: é ela que segura a medida de leitura quando
	 * a seção está em 100% e não há container encaixotando. */
	max-width: var(--maxw, 1340px);
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}
.container:not(.av-section-cont-open) .avia_textblock {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}
.container:not(.av-section-cont-open) {
	width: 100%;
	max-width: var(--maxw, 1340px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--pad, 1.5rem);
	padding-right: var(--pad, 1.5rem);
	box-sizing: border-box;
}

/* (d) Color Section marcada como 100% no construtor.
 *
 * O Enfold carimba av-section-cont-open no .container dessas seções
 * (confirmado no HTML da Homepage, onde TODAS vêm assim). O marcador quer
 * dizer que a SEÇÃO ocupa a largura toda -- não que o texto deva encostar
 * na borda. Por isso são duas regras: solta o container, e devolve a
 * coluna de leitura um nível abaixo.
 *
 * A coluna vai no .entry-content-wrapper porque esse único nível cobre
 * TODOS os elementos do construtor -- Text Block, Special Heading, Button
 * Row, colunas 1/1 e 1/4 -- em vez de uma regra por tipo de elemento. */
.container_wrap > .container.av-section-cont-open,
.avia-section > .container.av-section-cont-open {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.av-section-cont-open .entry-content-wrapper {
	max-width: var(--maxw, 1340px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--pad, 1.5rem);
	padding-right: var(--pad, 1.5rem);
	box-sizing: border-box;
}
/* Exceção: seções que sangram de verdade, conteúdo incluído -- os blocos
 * deste tema (que já têm coluna interna) e o opt-in manual bcg-edge. */
.bcg-fullwidth-section .entry-content-wrapper,
.bcg-edge .entry-content-wrapper {
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* (d3) Blocos do guia soltos dos invólucros do construtor.
 *
 * Cadeia real de uma página do guia (lida no HTML, não suposta):
 *
 *   div.container[.av-section-cont-open]
 *     main.content > div.post-entry > div.entry-content-wrapper
 *       div.flex_column.av_one_full
 *         section.av_textblock_section > div.avia_textblock
 *           header.hero            <- o bloco do guia
 *
 * Cada bloco do guia traz coluna de leitura interna própria
 * (.hero-inner, .section, .searchbar-wrap...), então os invólucros acima
 * dele precisam sair do caminho -- senão o bloco sai encaixotado, que era
 * o hero com faixas brancas nas laterais.
 *
 * Mas há duas famílias de invólucro, e tratá-las igual foi o erro:
 *
 *   COLUNA  (.flex_column, .av_one_full, .av_textblock_section,
 *            .avia_textblock) pertence só ao bloco -> sempre liberada.
 *
 *   COMPARTILHADO (.container, main.content, .post-entry,
 *            .entry-content-wrapper) é o mesmo para TODAS as colunas da
 *            Color Section. Liberá-lo quando existem colunas irmãs
 *            desalinha as irmãs: foi o que aconteceu ao mover
 *            [bcg_random_restaurants] para uma coluna 1/1 dentro da MESMA
 *            Color Section dos títulos 3/4 + 1/4 -- o bloco alinhou e o
 *            título "FEATURED RESTAURANTS" foi para a borda.
 *
 * Por isso o compartilhado só é liberado quando a seção tem uma única
 * coluna (:not(:has(.flex_column ~ .fl...). Com colunas irmãs, ele mantém
 * a caixa do Enfold e só a coluna do bloco é liberada.
 *
 * Reconhecer pelo CONTEÚDO, e não por classe, é o que faz o resultado ser
 * o mesmo com ou sem Color Section, montado à mão ou gerado pelo tema. */
.flex_column:has(.hero, .searchbar-wrap, .bcg-section, .map-wrap, .itin-wrap, .saved-wrap, .ap-wrap, .bcg-random-restaurants),

.av_one_full:has(.hero, .searchbar-wrap, .bcg-section, .map-wrap, .itin-wrap, .saved-wrap, .ap-wrap, .bcg-random-restaurants),

.av_textblock_section:has(.hero, .searchbar-wrap, .bcg-section, .map-wrap, .itin-wrap, .saved-wrap, .ap-wrap, .bcg-random-restaurants),

.avia_textblock:has(.hero, .searchbar-wrap, .bcg-section, .map-wrap, .itin-wrap, .saved-wrap, .ap-wrap, .bcg-random-restaurants) {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.container:not(:has(.flex_column ~ .flex_column)):has(.hero, .searchbar-wrap, .bcg-section, .map-wrap, .itin-wrap, .saved-wrap, .ap-wrap, .bcg-random-restaurants),

main.content:not(:has(.flex_column ~ .flex_column)):has(.hero, .searchbar-wrap, .bcg-section, .map-wrap, .itin-wrap, .saved-wrap, .ap-wrap, .bcg-random-restaurants),

.post-entry:not(:has(.flex_column ~ .flex_column)):has(.hero, .searchbar-wrap, .bcg-section, .map-wrap, .itin-wrap, .saved-wrap, .ap-wrap, .bcg-random-restaurants),

.entry-content-wrapper:not(:has(.flex_column ~ .flex_column)):has(.hero, .searchbar-wrap, .bcg-section, .map-wrap, .itin-wrap, .saved-wrap, .ap-wrap, .bcg-random-restaurants) {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* Padding vertical da Color Section: zerado só quando o bloco está
 * sozinho nela. Havendo colunas irmãs, o respiro da seção é do painel.
 *
 * 1.9.25 — e nunca quando o construtor definiu o padding.
 *
 * O bloco do guia traz o respiro próprio, então a seção não precisa somar o
 * dela: o zero existe para não empilhar dois espaçamentos. Mas ele valia
 * SEMPRE, inclusive contra um valor escolhido no painel — quem abria o Color
 * Section, punha 80px e salvava não via diferença nenhuma na tela.
 *
 * O Enfold escreve o padding personalizado como estilo inline na seção, e é
 * exatamente isso que :not([style*="padding"]) lê: havendo valor no painel,
 * a regra sai do caminho e o construtor manda. Sem valor, o zero continua
 * valendo como antes. */
.avia-section:not([style*="padding"]):not(:has(.flex_column ~ .flex_column)):has(.hero, .searchbar-wrap, .bcg-section, .map-wrap, .itin-wrap, .saved-wrap, .ap-wrap, .bcg-random-restaurants) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Texto escrito NO MESMO Text Block de um bloco do guia.
 *
 * A regra acima solta o invólucro inteiro porque ele contém um bloco do
 * guia -- e o bloco tem coluna interna própria, então fica certo. Mas
 * quando o editor escreve o título da seção no MESMO Text Block do
 * shortcode (o caso de "FEATURED TABLES / FEATURED RESTAURANTS", com
 * [bcg_random_restaurants] logo abaixo), esse texto não tem coluna
 * nenhuma: herda a largura total e começa em x=0, com a primeira letra
 * cortada na borda.
 *
 * Aqui o texto de nível de parágrafo/título recebe de volta a MESMA
 * coluna que os blocos do guia usam (--maxw + --pad), então título e
 * conteúdo do bloco ficam alinhados na mesma vertical. Os blocos em si
 * não são atingidos: são section/div/header com classe própria, não
 * p/h1..h4/ul/ol/blockquote. */
.avia_textblock:has(.hero) > :is(p, h1, h2, h3, h4, ul, ol, blockquote),
.avia_textblock:has(.searchbar-wrap) > :is(p, h1, h2, h3, h4, ul, ol, blockquote),
.avia_textblock:has(.bcg-random-restaurants) > :is(p, h1, h2, h3, h4, ul, ol, blockquote),
.avia_textblock:has(.map-wrap) > :is(p, h1, h2, h3, h4, ul, ol, blockquote),
.avia_textblock:has(.itin-wrap) > :is(p, h1, h2, h3, h4, ul, ol, blockquote),
.avia_textblock:has(.saved-wrap) > :is(p, h1, h2, h3, h4, ul, ol, blockquote),
.avia_textblock:has(.ap-wrap) > :is(p, h1, h2, h3, h4, ul, ol, blockquote) {
	max-width: var(--maxw, 1200px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--pad, 1.5rem);
	padding-right: var(--pad, 1.5rem);
	box-sizing: border-box;
}
/* O mesmo para uma .section escrita à mão no construtor: ela já tem
 * max-width própria, mas perde a centralização quando o invólucro é
 * liberado com margin 0. */
.avia_textblock > .section,
.avia_textblock > .grid {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* A Color Section do Enfold traz padding vertical próprio, que abriria
 * uma faixa da cor da seção acima e abaixo do bloco.
 *
 * 1.9.25 — mesma exceção da regra anterior: padding vindo do painel ganha. */
.avia-section:not([style*="padding"]):has(.hero, .searchbar-wrap, .bcg-section, .map-wrap, .itin-wrap, .saved-wrap, .ap-wrap, .bcg-random-restaurants) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* (e) Opt-in que existe em qualquer versão do Enfold: escreva bcg-edge no
 * campo Custom CSS Class (Color Section > Advanced > Developer Settings).
 * Cobre a classe na seção (o normal) e num elemento interno. */
.bcg-edge {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.bcg-edge > .container,
.bcg-edge > .container > .flex_column,
.bcg-edge > .flex_column {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* O hero nunca é limitado pelo que estiver em volta: a coluna de leitura
 * dele é interna (.hero-inner). */
.hero {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* position:sticky interno (.ap-index, .det-side) precisa da viewport como
 * bloco contenedor: qualquer ancestral com transform/filter/contain ou
 * overflow != visible quebra isso, e os wrappers do Enfold às vezes
 * definem um deles. */
.bcg-fullwidth-section,
.bcg-fullwidth-section .container,
.bcg-fullwidth-section .av_textblock,
.bcg-fullwidth-section .avia_codeblock_section,
.bcg-fullwidth-section .avia_codeblock,
.bcg-fullwidth-section .flex_column,
.bcg-fullwidth-section .flex_column_div {
	overflow: visible !important;
	transform: none !important;
	filter: none !important;
	contain: none !important;
}

/* Nada estoura a largura da tela. */
img, video, iframe, canvas, svg, table { max-width: 100%; }
img, video { height: auto; }
pre, code { white-space: pre-wrap; word-break: break-word; }
body.bcg-app-page table { display: block; overflow-x: auto; }
body.bcg-app-page .entry-content-wrapper > *,
body.bcg-app-page .flex_column > * { max-width: 100%; }
body.bcg-app-page .bcg-random-restaurants {
	width: 100%;
	max-width: var(--maxw, 1200px);
	margin-left: auto;
	margin-right: auto;
}

/* ═══ 2. BARRA DO LOGO + MENU ══════════════════════════════════════
 *
 * Ligada/desligada em Enfold > Theme Options > Header > Header Behaviour:
 * o header.php lê essa opção e escreve bcg-nav-sticky no body.
 *
 * position:fixed, não sticky. sticky depende de nenhum ancestral criar
 * contexto de rolagem ou de transformação -- e entre o <body> e a barra
 * passam wrappers do Enfold, do tema e de plugins, que mudam conforme a
 * página. Era por isso que a barra ficava fixa numa página e solta na
 * outra. fixed não depende de ancestral nenhum: vale igual em todas.
 *
 * O custo do fixed é reservar a altura da barra no topo do conteúdo. A
 * reserva vai no #app, não no <body>: assim existe exatamente onde a
 * barra cobre, e não na tela de acesso (#gate), que não tem barra -- era
 * essa a faixa branca das tentativas anteriores. */
:root { --bcg-nav-h: 100px; }
/* 151px = 135px do logo enviado + 8px de respiro acima e abaixo. É só o
 * valor de PARTIDA: o main.js (e o re-medidor em drawer.js) medem a barra
 * de verdade e reescrevem --bcg-nav-h, então trocar o logo por um de
 * outra altura não exige mexer aqui. Este número existe para que o
 * primeiro quadro, antes de o JS rodar, não fique com a reserva errada. */
@media (max-width: 720px) { :root { --bcg-nav-h: 151px; } }

body.bcg-nav-sticky .nav {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 190 !important;
}
/* 1.9.49 -- o ".authed" saiu deste seletor.
 *
 * A barra e fixa no topo, entao o conteudo precisa de um recuo do tamanho
 * dela ou fica coberto. O recuo estava condicionado a classe "authed", que
 * so existe para quem tem acesso -- e enquanto a barra tambem so era
 * impressa para essa pessoa, o par funcionava.
 *
 * Na 1.9.48 a barra voltou a ser impressa para todos, e o recuo ficou atras:
 * o visitante deslogado passou a ver a barra cobrindo o topo do hero e o
 * topo do formulario de login. Mesmo tipo de erro do CSS do #app -- uma
 * regra do tempo do gate presa a uma classe de login.
 *
 * O recuo depende da barra ser fixa, nao de quem esta olhando. */
body.bcg-nav-sticky #app { padding-top: var(--bcg-nav-h, 100px); }
/* Âncoras (#featured e afins) não podem ficar escondidas atrás da barra. */
body.bcg-nav-sticky [id] { scroll-margin-top: calc(var(--bcg-nav-h, 100px) + 8px); }
/* A barra fica ACIMA do drawer, não atrás dele.
 *
 * Antes o drawer (201) e o overlay (200) cobriam a barra (190): ao abrir
 * o menu, logo e botão de fechar sumiam atrás do painel. Agora a barra é
 * a camada mais alta e o drawer começa exatamente abaixo dela, então o
 * logo e o hambúrguer continuam visíveis com o menu aberto -- e o mesmo
 * botão que abriu é o que fecha. */
body .nav { z-index: 210 !important; }
body .bcg-drawer {
	z-index: 201 !important;
	top: var(--bcg-nav-h, 100px) !important;
	max-height: calc(100vh - var(--bcg-nav-h, 100px)) !important;
}
body .bcg-drawer-overlay { z-index: 200 !important; }

html { overflow-x: clip; }

/* ═══ 3. PARIDADE CONSTRUTOR ⇄ BLOCOS DO TEMA ══════════════════════
 * Uma página montada no construtor (Color Section + Text Block + Button)
 * herda a tipografia do Enfold, não a do app. Aqui os dois caminhos
 * consomem as MESMAS variáveis (--font-d / --font-b), alimentadas por
 * Enfold > Advanced Styling > Fonts. */
/* 1.9.28 — estas regras deixaram de competir com o painel.
 *
 * O que elas fazem é dar ao conteúdo do construtor a MESMA tipografia dos
 * blocos do tema, para os dois caminhos não parecerem dois produtos. Isso
 * continua valendo. O que muda é a FORÇA: eram !important puro, e
 * atropelavam qualquer fonte, peso ou entrelinha escolhidos no elemento —
 * as abas Styling e Font Sizes do Enfold não tinham efeito nenhum.
 *
 * :where() zera a especificidade, então elas passam a ser defaults de
 * verdade: valem enquanto ninguém decide nada e saem do caminho no instante
 * em que o painel decide. O !important sobrevive só na família de fonte,
 * porque ali o adversário é o próprio Enfold com !important — e mesmo ali
 * com a guarda :not([style*="font-family"]), para a escolha inline ganhar. */
:where(body.bcg-app-page) .avia_textblock:not([style*="font-family"]),
:where(body.bcg-app-page) .avia_textblock p:not([style*="font-family"]),
:where(body.bcg-app-page) .avia_textblock li:not([style*="font-family"]),
:where(body.bcg-app-page) .av-special-heading .av-subheading:not([style*="font-family"]) {
	font-family: var(--font-b) !important;
}
:where(body.bcg-app-page .avia_textblock, body.bcg-app-page .av-special-heading .av-subheading) {
	line-height: 1.65;
}
:where(body.bcg-app-page) .avia_textblock h1:not([style*="font-family"]),
:where(body.bcg-app-page) .avia_textblock h2:not([style*="font-family"]),
:where(body.bcg-app-page) .avia_textblock h3:not([style*="font-family"]),
:where(body.bcg-app-page) .av-special-heading-tag:not([style*="font-family"]) {
	font-family: var(--font-d) !important;
}
:where(body.bcg-app-page .avia_textblock h1, body.bcg-app-page .avia_textblock h2,
       body.bcg-app-page .avia_textblock h3, body.bcg-app-page .av-special-heading-tag) {
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: .95;
	text-wrap: balance;
}
/* Título de hero escrito no construtor: os MESMOS valores de .hero-title
 * em main.css -- clamp até 4.75rem, line-height .95, margem 1.125rem.
 * Divergiam em três pontos (teto 4.5rem, line-height 1.02, margem 1rem) e
 * era essa a diferença de aparência entre os dois heros. */
:where(body.bcg-app-page .avia_textblock h1, body.bcg-app-page h1.av-special-heading-tag) {
	font-size: clamp(2.5rem, 6vw, 4.75rem);
	line-height: .95;
	margin: 0 0 1.125rem;
}
:where(body.bcg-app-page .avia_textblock h1 em, body.bcg-app-page .avia_textblock h2 em,
       body.bcg-app-page .av-special-heading-tag em) { font-style: italic; font-weight: 500; }
/* Amarelo só sobre fundo escuro, para não pintar título em fundo claro.
 * Default: uma cor escolhida no elemento vence. */
:where(body.bcg-app-page .bcg-on-dark h1 em, body.bcg-app-page .bcg-on-dark h2 em,
       body.bcg-app-page .bcg-on-dark .av-special-heading-tag em) { color: var(--yellow); }

/* Seção escura do construtor: marque a Color Section com a classe
 * "bcg-on-dark" (Custom CSS Class) para o texto assumir o contraste do
 * hero do tema. */
/* 1.9.28 — default, não imposição.
 *
 * A classe existe para o texto ficar legível sobre fundo escuro, e é isso
 * que ela continua fazendo enquanto o editor não escolhe cor. Escolhendo,
 * a escolha vale — era aqui que o Custom Font Color do Text Block morria. */
:where(body.bcg-app-page .bcg-on-dark, body.bcg-app-page .bcg-on-dark h1,
       body.bcg-app-page .bcg-on-dark h2, body.bcg-app-page .bcg-on-dark h3,
       body.bcg-app-page .bcg-on-dark p) { color: #fff; }
:where(body.bcg-app-page .bcg-on-dark em) { color: var(--yellow); }

/* Botões do construtor: cor decidida NO ELEMENTO, no construtor.
 *
 * Até a 1.7.84 este bloco cravava background-color: var(--ink) e
 * color: #fff com !important -- então a aba "Colors" do av_button não
 * tinha efeito nenhum: todo botão saía preto, qualquer que fosse a
 * escolha do editor.
 *
 * O !important saiu de cor e fundo. O Enfold aplica a cor escolhida como
 * style inline no próprio <a> (cores personalizadas) ou por classe
 * avia-color-*, e as duas vencem uma declaração sem !important. Os
 * valores abaixo continuam existindo como PADRÃO, para o botão nunca
 * ficar sem contraste quando nada foi escolhido.
 *
 * O !important permanece só na geometria e na tipografia -- altura de
 * toque, raio, alinhamento, família e corpo da fonte -- que é o que
 * mantém o botão coerente com o resto do guia sem disputar cor. */
/* Cor e fundo PADRÃO, com especificidade ZERO DE VERDADE.
 *
 * Correção da 1.7.88: as regras abaixo estavam escritas como
 * "body.bcg-app-page :where(.avia-button)". :where() zera o que está
 * DENTRO dele, mas o prefixo continuava contando -- body (1 elemento) +
 * .bcg-app-page (1 classe) = mais que a regra da folha dinâmica do
 * Enfold, que é uma classe só (.av-mrxx98bh-...). Resultado: o padrão
 * daqui seguia vencendo o painel, e o botão continuava preto.
 *
 * Sem prefixo nenhum, o seletor vale zero e QUALQUER regra do Enfold
 * ganha. Não há risco de vazar para fora do guia: .avia-button só existe
 * em marcação do construtor.
 *
 * Detalhe que explica o botão preto com texto verde: o Enfold NÃO escreve
 * cor personalizada como style inline. Ele gera uma classe com hash no
 * elemento (av-mrxx98bh-...) e publica a regra na folha dinâmica dele, com
 * especificidade de UMA classe. A declaração anterior aqui era
 * "body.bcg-app-page .avia-button", que vale mais -- então o fundo do
 * painel (#f5d400) perdia para o nosso var(--ink), enquanto a cor de fonte
 * (#1a7a3f), que não tinha concorrente, passava. Preto com verde.
 *
 * Em :where() estas duas linhas passam a valer zero: aparecem só quando o
 * painel não definiu nada e cedem para a folha dinâmica do Enfold sempre
 * que o editor escolhe uma cor. */
:where(.avia-button) {
	background-color: var(--ink);
	color: #fff;
}
body.bcg-app-page .avia-button {
	font-family: var(--font-b) !important;
	font-size: .85rem !important;
	font-weight: 500 !important;
	letter-spacing: .02em !important;
	line-height: 1 !important;
	min-height: 48px;
	padding: 0 1.5rem !important;
	border-radius: 6px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: .5rem !important;
	text-decoration: none !important;
}
/* Rótulo e ícone: a cor vem do construtor, com contraste como reserva.
 *
 * A versão anterior usava "color: inherit !important" no <span>. Isso
 * respeitava o botão, mas atropelava a cor de FONTE que o Enfold escreve
 * inline no próprio rótulo -- e quando o editor escolhe uma cor de fundo
 * personalizada, o Enfold define a cor da fonte no span, não no <a>. Com
 * o !important, o rótulo passava a herdar a cor do <a>, que nesse caso é
 * a própria cor de destaque: texto olivo sobre fundo olivo, ilegível.
 *
 * Agora as declarações do rótulo estão em :where(), que tem
 * especificidade ZERO: valem quando o Enfold não disse nada e perdem de
 * qualquer regra ou style inline dele. É a definição de "obedecer ao que
 * está configurado no construtor".
 *
 * O que continua com !important é apenas visibilidade -- opacity e
 * visibility -- porque nenhuma configuração do painel pede um rótulo
 * invisível, e era esse o sintoma original do <span> sumido. */
:where(.avia-button .avia_button_background),
:where(.avia-button .avia_button_icon),
:where(.avia-button span) {
	color: inherit;
	font-size: inherit;
	font-family: inherit;
}
body.bcg-app-page .avia-button .avia_button_background,
body.bcg-app-page .avia-button .avia_button_icon,
body.bcg-app-page .avia-button span {
	opacity: 1 !important;
	visibility: visible !important;
}

/* Quando o editor escolhe uma das cores nomeadas do painel, o Enfold
 * marca o botão com estas classes. Traduzi-las para as variáveis do
 * painel faz a escolha valer mesmo sem a folha de shortcodes do Enfold
 * (este tema carrega apenas o grid.css do pai). */
:where(.avia-button.avia-color-theme-color) { background-color: var(--enfold-main-color-primary, var(--green)); }
:where(.avia-button.avia-color-theme-color-subtle) { background-color: var(--enfold-main-color-secondary, var(--green-50)); color: var(--ink); }
:where(.avia-button.avia-color-theme-color-highlight) { background-color: var(--enfold-main-color-highlight, var(--yellow)); color: var(--ink); }
:where(.avia-button.avia-color-light) { background-color: #fff; color: var(--ink); }
:where(.avia-button.avia-color-dark) { background-color: var(--ink); color: #fff; }
/* Contorno: o Enfold desenha só a borda, com o texto na cor da borda. */
:where(.avia-button.avia-color-theme-color-border),
:where(.avia-button.avia-color-theme-color-border-bright) {
	background-color: transparent;
	border: 1px solid currentColor;
}
:where(.avia-button.avia-color-theme-color-border) { color: var(--ink); }
:where(.avia-button.avia-color-theme-color-border-bright) { color: #fff; }
/* Sem :hover imposto: o Enfold já troca a cor no hover a partir da
 * escolha do editor. */

/* ═══ 4. CORES VINDAS DE ENFOLD > GENERAL STYLING ══════════════════
 * O Enfold escreve cada cor do painel numa custom property em
 * uploads/dynamic_avia/enfold.css. Consumi-las aqui é o que faz o painel
 * realmente valer neste tema (cada uma com fallback para a paleta do
 * app). */
body { background: var(--enfold-main-color-bg, var(--cream)); }
/* Cor de link do guia. O botão do construtor fica DE FORA: .avia-button é
 * um <a>, e este seletor usa um ID -- especificidade altíssima, que
 * pintava o rótulo por cima da cor escolhida na aba Colors do elemento.
 * Era a última regra deste tema disputando cor com o painel. */
#app a:not(.card):not(.nav-tab):not(.nav-logo):not(.bcg-drawer-link):not(.avia-button) { color: var(--enfold-main-color-primary, var(--green)); }
#app .avia-button span,
#app .avia-button .avia_button_icon { color: inherit; }
#app a:not(.card):not(.nav-tab):not(.nav-logo):not(.bcg-drawer-link):not(.avia-button):hover { color: var(--enfold-main-color-secondary, var(--green)); }
.nav { background: var(--enfold-header-color-bg, var(--cream)); }
.nav .nav-word, .nav .nav-lbl { color: var(--enfold-header-color-color, var(--ink)); }
#footer {
	width: 100% !important; max-width: 100% !important;
	background: var(--enfold-footer-color-bg, var(--cream)) !important;
	color: var(--enfold-footer-color-color, var(--ink)) !important;
}
#footer a { color: var(--enfold-footer-color-primary, inherit); }
#footer a:hover { color: var(--enfold-footer-color-secondary, inherit); }
/* Mesma margem lateral do nav (--pad), para o copyright começar na mesma
 * vertical do logotipo do header e os ícones terminarem na vertical do
 * último item do menu. */
#footer .container,
#socket .container {
	max-width: var(--maxw) !important; width: 100% !important;
	margin-left: auto !important; margin-right: auto !important;
	padding-left: var(--pad) !important; padding-right: var(--pad) !important;
}
/* Colunas de widget do rodapé (footer.php) não tinham layout nenhum neste
 * tema e empilhavam como uma lista só. */
#footer .bcg-footer-columns {
	display: grid !important;
	grid-template-columns: repeat(var(--bcg-footer-cols, 4), minmax(0, 1fr)) !important;
	align-items: start !important;
	float: none !important;
	gap: 32px !important;
	padding: 48px var(--pad, 24px) !important;
	max-width: var(--maxw, 1200px);
	margin: 0 auto;
}
#footer .bcg-footer-col { min-width: 0; float: none !important; }
#footer .bcg-footer-col .widget { float: none !important; }
#footer .bcg-footer-col .widgettitle { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px; color: var(--enfold-footer-color-heading, inherit) !important; }
#footer .bcg-footer-col .widget,
#footer .bcg-footer-col .widget * {
	color: var(--enfold-footer-color-meta, inherit) !important;
	font-family: var(--font-b, inherit) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-weight: 400 !important;
	font-size: .95rem !important;
}
#socket {
	width: 100% !important; max-width: 100% !important;
	padding: 20px var(--pad, 24px);
	text-align: center; font-size: .8rem; opacity: .7;
	background: var(--enfold-socket-color-bg, transparent) !important;
	color: var(--enfold-socket-color-color, inherit) !important;
}
#socket a { color: var(--enfold-socket-color-primary, inherit) !important; }
/* Ícones sociais do socket (Theme Options > Footer > Social Icons).
 *
 * O glifo vem do atributo data-av_icon que o Enfold escreve em cada link,
 * desenhado com a fonte de ícones dele (o @font-face é publicado pelo
 * gerenciador de fontes do Enfold no <head>). Esta é a mesma técnica da
 * folha do Enfold, reproduzida aqui porque este tema carrega apenas o
 * grid.css do pai -- sem ela os links apareceriam como texto oculto e
 * nenhum ícone. */
#socket .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
/* O copyright ocupa o espaço que sobra e empurra os ícones para a borda.
 * margin-left:auto sozinho não bastou: o <span> do copyright é um item
 * flex de largura natural, então sobrava espaço livre ANTES dele e a
 * lista parava no meio. Com flex:1 no copyright, todo o vão fica do lado
 * esquerdo e os ícones encostam na direita. */
#socket .copyright {
	flex: 1 1 auto;
	min-width: 0;
	/* text-align:left explícito: o #socket centraliza o texto, e com
	 * flex:1 o <span> passou a ocupar toda a faixa livre -- o texto ficava
	 * centralizado dentro dela em vez de começar na margem. */
	text-align: left;
}
#socket .social_bookmarks {
	margin: 0 0 0 auto !important;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 0 0 auto;
	gap: 4px;
	padding: 0;
	list-style: none;
	float: none !important;
}
#socket .social_bookmarks li { list-style: none; margin: 0; padding: 0; }
#socket .social_bookmarks a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px: alvo de toque mínimo, já que a maior parte do acesso é mobile. */
	width: 44px;
	height: 44px;
	border-radius: 50%;
	text-decoration: none !important;
	transition: background-color .15s linear;
}
#socket .social_bookmarks a:hover { background: rgba(255,255,255,.12); }
#socket .social_bookmarks a::before {
	content: attr(data-av_icon);
	font-family: 'entypo-fontello';
	font-size: 18px;
	line-height: 1;
	font-weight: normal;
	font-style: normal;
	speak: none;
	-webkit-font-smoothing: antialiased;
}
/* Sem a fonte de ícones do Enfold, o rótulo textual vira a parte visual --
 * um nome legível é melhor que um espaço em branco clicável. */
#socket .social_bookmarks .bcg-social-no-glyph a { width: auto; padding: 0 10px; border-radius: 999px; }
#socket .social_bookmarks .bcg-social-no-glyph .avia_hidden_link_text {
	position: static;
	width: auto;
	height: auto;
	clip: auto;
	overflow: visible;
	font-size: .75rem;
	text-transform: capitalize;
}
/* O rótulo textual existe para leitores de tela; o ícone é a parte visual. */
#socket .social_bookmarks .avia_hidden_link_text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
@media (max-width: 720px) {
	/* Rodape todo centrado no celular.
	 *
	 * Centralizar so o .container nao bastava: o #socket .copyright tem
	 * text-align:left explicito (ele existe para o layout de desktop, onde
	 * o copyright ocupa a faixa livre com flex:1 e o texto tem de comecar
	 * na margem). Regra explicita vence heranca, entao o texto continuava a
	 * esquerda mesmo com o container centralizado.
	 *
	 * Aqui as duas partes viram linhas proprias, uma sobre a outra, cada
	 * uma centrada -- que e como a faixa se le numa tela estreita. */
	#socket .container {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		gap: 12px;
	}
	#socket .copyright {
		flex: 0 0 auto;
		width: 100%;
		text-align: center !important;
		line-height: 1.6;
	}
	#socket .social_bookmarks {
		margin: 0 auto !important;
		justify-content: center;
		width: 100%;
	}
}
#socket .container { background: transparent !important; }
@media (max-width: 780px) { #footer .bcg-footer-columns { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 520px) { #footer .bcg-footer-columns { grid-template-columns: 1fr !important; } }

/* ═══ 5. NAV: GTRANSLATE ═══════════════════════════════════════════
 * O widget injeta a própria marcação (lista vertical de bandeiras) sem
 * saber do flex do nav, e o item de menu vem como <ul> simples — este
 * tema não tem CSS genérico de submenu, então virava lista fixa em vez de
 * dropdown. */
.nav .gtranslate_wrapper,
.nav .nav-in .gtranslate_wrapper {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 8px !important;
	width: auto !important;
	height: auto !important;
}
.nav .gtranslate_wrapper a { display: inline-flex !important; }
.nav .gtranslate_wrapper img,
.nav .gtranslate_wrapper .gflag { width: 24px !important; height: auto !important; display: block !important; }
.nav .nav-in {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
}
.nav .nav-in > * { flex: 0 0 auto !important; flex-shrink: 0 !important; width: auto !important; max-width: none !important; }
.nav .nav-city { display: none !important; }
/* Marca do nav. Era um style inline no <img> do header.php. */
/* Marca do nav: a imagem inteira, sem corte.
 *
 * Era width:50px + height:50px + object-fit:cover -- ou seja, a imagem
 * era forçada num quadrado e o excesso cortado, que é o "brazilc..."
 * aparecendo pela metade. Agora a altura manda e a largura acompanha a
 * proporção real; object-fit:contain garante que nada seja cortado nem se
 * a imagem enviada tiver outra proporção. */
.nav .nav-logo { display: flex; align-items: center; }
.nav .nav-logo .nav-mark {
	/* 90px (1.7.94). A largura acompanha a proporção do arquivo. */
	height: 90px;
	width: auto;
	max-width: 420px;
	object-fit: contain;
	display: block;
}
@media (max-width: 720px) {
	/* Tamanho original no celular: a imagem sai nas dimensões próprias do
	 * arquivo enviado no painel, sem redução. O único limite é a largura
	 * disponível ao lado do hambúrguer, para ele nunca ser empurrado para
	 * fora da tela -- e a barra cresce em altura para acomodar. */
	.nav .nav-logo .nav-mark {
		height: auto;
		width: auto;
		max-width: calc(100vw - 6rem);
		max-height: none;
	}
	.nav .nav-in { height: auto !important; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
}
.nav-tabs li.menu-item { list-style: none; position: relative; display: inline-flex; align-items: center; }
.nav-tabs li.menu-item > a { display: inline-flex; align-items: center; padding: .5rem .75rem; }
.nav-tabs li.menu-item .sub-menu,
.nav-tabs li.menu-item .dropdown-menu {
	display: none !important;
	position: absolute !important;
	top: 100% !important;
	right: 0 !important;
	left: auto !important;
	flex-direction: column !important;
	background: #fff !important;
	border: 1px solid rgba(26,26,26,.12) !important;
	border-radius: 8px !important;
	padding: 6px !important;
	margin: 8px 0 0 !important;
	min-width: 140px !important;
	list-style: none !important;
	box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
	z-index: 200 !important;
	transition: opacity .15s linear;
}
/* Ponte invisível sobre o vão entre gatilho e dropdown. */
.nav-tabs li.menu-item.menu-item-has-children::after {
	content: ''; position: absolute;
	top: 100%; right: 0; left: auto;
	width: 100%; height: 8px;
}
.nav-tabs li.menu-item:hover > .sub-menu,
.nav-tabs li.menu-item:hover > .dropdown-menu,
.nav-tabs li.menu-item:focus-within > .sub-menu,
.nav-tabs li.menu-item:focus-within > .dropdown-menu { display: flex !important; }
.nav-tabs li.menu-item .sub-menu li,
.nav-tabs li.menu-item .dropdown-menu li { list-style: none; }
.nav-tabs li.menu-item .sub-menu a,
.nav-tabs li.menu-item .dropdown-menu a {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 6px 8px !important;
	font-family: var(--font-b) !important;
	font-size: .8rem !important;
	color: var(--ink) !important;
	white-space: nowrap !important;
}
/* O modo "Flags" do GTranslate não traz rótulo de texto na marcação; o
 * nome do idioma só existe no atributo title. */
.nav-tabs li.menu-item .sub-menu a[title]::after,
.nav-tabs li.menu-item .dropdown-menu a[title]::after {
	content: attr(title) !important;
	font-family: var(--font-b) !important;
	font-size: .8rem !important;
	color: var(--ink) !important;
}
/* O idioma ATIVO não aparece no dropdown.
 *
 * O GTranslate marca o item atual de formas diferentes conforme a versão
 * e o modo do widget (li.current, li.selected, a.selected, e às vezes
 * marcação nenhuma). Por isso são duas camadas: as variantes conhecidas
 * aqui, e um data-attribute posto por assets/js/drawer.js, que lê o
 * idioma ativo do cookie googtrans e não depende da marcação do plugin. */
.nav-tabs li.menu-item .sub-menu > li.current,
.nav-tabs li.menu-item .sub-menu > li.selected,
.nav-tabs li.menu-item .dropdown-menu > li.current,
.nav-tabs li.menu-item .dropdown-menu > li.selected,
.nav-tabs li.menu-item .sub-menu > li:has(> a.selected),
.nav-tabs li.menu-item .sub-menu > li[data-bcg-current-lang],
.nav-tabs li.menu-item .dropdown-menu > li[data-bcg-current-lang] { display: none !important; }

/* ═══ 6. VISIBILIDADE POR PÁGINA ═══════════════════════════════════
 * Respeita a escolha do próprio Enfold em "Header visibility and
 * transparency" / "Footer Settings". */
body:not(.bcg-view-home) .hero { display: none !important; }
body.bcg-header-hidden .nav { display: none !important; }
body.bcg-footer-hidden .footer,
body.bcg-footer-hidden .site-foot { display: none !important; }

/* A barra e a faixa do hamburguer empilham: .nav-in em cima, .nav-burger
 * logo abaixo, os dois com a largura toda. No desktop o botao esta
 * display:none, entao a coluna tem um filho so e nada muda. */
.nav { display: flex; flex-direction: column; }
.nav > .nav-in { width: 100%; }

/* ═══ 7. FAILOVER DO NAV MOBILE ════════════════════════════════════
 * As media queries do nav mobile vivem em main.css. body.bcg-mobile é
 * aplicada por JS quando innerWidth <= 720, para o caso de um proxy de
 * CSS bloquear aquelas regras. */
body.bcg-mobile .nav .nav-in        { height: auto !important; min-height: 64px; padding: 8px var(--pad, 1rem) !important; }
body.bcg-mobile .nav .nav-burger    { position: static !important; transform: none !important; width: 100% !important; height: 52px !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; }
body.bcg-mobile .nav .nav-mark      { height: auto !important; width: auto !important; max-width: calc(100vw - 6rem) !important; }
body.bcg-mobile .nav .nav-tabs      { display: none !important; }
body.bcg-mobile .nav .nav-city      { display: none !important; }
body.bcg-mobile .nav .nav-burger    { display: inline-flex !important; align-items: center; justify-content: center; }
body.bcg-mobile .nav .nav-lbl-full  { display: none !important; }
body.bcg-mobile .nav .nav-lbl-short { display: block !important; }

/* ═══ 8. PEQUENOS ELEMENTOS QUE ERAM style INLINE ══════════════════ */

/* Estado vazio da página de restaurante (assets/js/detail.js). */
.det-missing { padding: 60px 20px; text-align: center; color: #666; }
.det-missing a { color: var(--green); }

/* Página 404. */
.bcg-404 { text-align: center; padding: 80px 24px; }
.bcg-404-title { font-family: var(--font-d); font-size: 64px; margin-bottom: 16px; }
.bcg-404-text { font-size: 18px; color: #666; }
.bcg-404-back { margin-top: 24px; }
.bcg-404-back a { color: var(--green); font-weight: 600; }

/* Card do bloco "Random Restaurants". */
.card .card-link { display: block; color: inherit; text-decoration: none; }

/* Página comum do WordPress (sem blocos do Guide). */
.bcg-plain-page { max-width: 760px; margin: 64px auto; padding: 0 var(--pad, 24px); }
.bcg-plain-title { font-family: var(--font-d); font-size: 48px; margin-bottom: 24px; }
.bcg-plain-content { font-size: 18px; line-height: 1.7; color: var(--ink-2, #222); }

/* ═══ 9. RESPONSIVIDADE ════════════════════════════════════════════
 *
 * Governada pelo painel: Enfold > Layout > Responsive Layout. O
 * header.php traduz essa opção na classe 'responsive' do <html> -- a
 * mesma que o Enfold usa -- e tudo abaixo é escopado nela. Desligar no
 * painel devolve o layout fixo, sem editar CSS.
 *
 * Os pontos de quebra são os do próprio Enfold (989px tablet, 767px
 * celular, 480px celular estreito), para que o construtor se comporte
 * aqui exatamente como se comporta na documentação dele.
 */

/* ── Tablet: colunas largas do construtor viram meia largura ────── */
@media only screen and (max-width: 989px) {
	.responsive .av_one_fourth,
	.responsive .av_one_fifth,
	.responsive .av_one_sixth {
		width: 48% !important;
		margin-left: 4% !important;
	}
	.responsive .av_one_fourth:nth-child(2n+1),
	.responsive .av_one_fifth:nth-child(2n+1),
	.responsive .av_one_sixth:nth-child(2n+1) { margin-left: 0 !important; clear: both; }
}

/* ── Celular: tudo em coluna única ─────────────────────────────── */
@media only screen and (max-width: 767px) {
	/* Empilhamento das colunas do construtor. Esta é a regra que o
	 * Enfold aplicaria sozinho se a classe .responsive existisse. */
	.responsive .flex_column,
	.responsive .av_one_full,
	.responsive .av_one_half,
	.responsive .av_one_third,
	.responsive .av_two_third,
	.responsive .av_one_fourth,
	.responsive .av_three_fourth,
	.responsive .av_one_fifth,
	.responsive .av_two_fifth,
	.responsive .av_three_fifth,
	.responsive .av_four_fifth,
	.responsive .av_one_sixth,
	.responsive .av_five_sixth {
		width: 100% !important;
		margin: 0 0 24px !important;
		float: none !important;
		clear: both;
	}
	.responsive .flex_column:last-child { margin-bottom: 0 !important; }

	/* Color Section: o padding vertical de desktop é grande demais na
	 * tela do celular. Proporcional, não fixo.
	 *
	 * 1.9.25 — exceto quando o painel definiu o padding da seção. */
	.responsive .avia-section:not([style*="padding"]) .container { padding-top: 0 !important; padding-bottom: 0 !important; }

	/* Tipografia do construtor na medida do celular. O clamp já reduz,
	 * mas o teto de 6vw ainda deixa títulos grandes demais em telas
	 * estreitas. */
	/* 1.9.28 -- guarda para o tamanho definido no painel (que o Enfold
	 * escreve inline, com breakpoint próprio) continuar valendo. */
	.responsive body.bcg-app-page .avia_textblock h1:not([style*="font-size"]),
	.responsive body.bcg-app-page h1.av-special-heading-tag:not([style*="font-size"]) { font-size: clamp(2rem, 9vw, 2.75rem); }
	.responsive body.bcg-app-page .avia_textblock h2:not([style*="font-size"]),
	.responsive body.bcg-app-page h2.av-special-heading-tag:not([style*="font-size"]) { font-size: clamp(1.75rem, 7.5vw, 2.25rem); }

	/* Botões do construtor: alvo de toque cheio e largura total, em vez
	 * de dois botões espremidos lado a lado. */
	.responsive body.bcg-app-page .avia-button {
		display: flex !important;
		width: 100% !important;
		min-height: 52px !important;
	}
	.responsive body.bcg-app-page .avia-buttonrow-wrap {
		display: flex !important;
		flex-direction: column !important;
		gap: 12px !important;
	}

	/* Tabela dentro do construtor rola em vez de estourar a tela. */
	.responsive .avia_textblock table { display: block; overflow-x: auto; }
}

/* ── Celular estreito ──────────────────────────────────────────── */
@media only screen and (max-width: 480px) {
	.responsive body.bcg-app-page .avia_textblock h1:not([style*="font-size"]),
	.responsive body.bcg-app-page h1.av-special-heading-tag:not([style*="font-size"]) { font-size: clamp(1.75rem, 9vw, 2.25rem); }
}

/* ── Layout fixo (painel com Responsive Layout desligado) ───────── */
.fixed_layout body { min-width: var(--maxw, 1340px); }

/* ── Nav no celular: logo centralizado, hambúrguer à direita ────── */
@media only screen and (max-width: 720px) {
	/* O logo deixa de ser o primeiro item de uma linha flex e passa a
	 * ocupar o centro ótico da barra; o hambúrguer sai do fluxo e fica
	 * ancorado à direita, então a centralização do logo não depende da
	 * largura dele. */
	.nav .nav-in {
		position: relative;
		justify-content: center !important;
		gap: 0 !important;
	}
	.nav .nav-logo { margin: 0 auto; }

	/* Hamburguer numa faixa propria, abaixo do header (1.8.11).
	 *
	 * Ele continua sendo filho de .nav-in no HTML -- CSS nao reparenta
	 * elemento. O efeito de "faixa embaixo" vem de deixar .nav-in quebrar
	 * linha e dar ao botao uma linha inteira so dele (flex-basis: 100%),
	 * depois de todos os outros itens (order alto).
	 *
	 * As margens negativas cancelam o padding lateral de .nav-in, para que
	 * a faixa chegue de fato as duas bordas da tela; o padding-bottom da
	 * barra e zerado para que ela termine exatamente na faixa. */
	/* O botao e irmao de .nav-in desde a 1.8.12, entao ja ocupa uma linha
	 * inteira abaixo da barra. Aqui so a forma da faixa. */
	.nav .nav-burger {
		position: static !important;
		transform: none !important;
		display: flex !important;
		width: 100% !important;
		height: 52px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		border-radius: 0 !important;
		align-items: center;
		justify-content: center;
	}
	/* O seletor de idioma e o botão de sair vivem no drawer no celular. */
	.nav .gtranslate_wrapper,
	.nav .nav-logout { display: none !important; }
}

/* ── Tipografia e respiro lateral no celular ────────────────────── */
@media only screen and (max-width: 767px) {
	/* Respiro lateral maior: 1rem deixava o texto quase colado na borda
	 * em tela estreita. Vale para todos os blocos de uma vez, porque
	 * todos usam --pad. */
	:root { --pad: 1.25rem; }

	/* Título do hero. O clamp de desktop tem piso de 2.5rem (40px), que
	 * numa tela de 360px estoura em palavras longas como "ACTUALLY" --
	 * era o texto saindo pela lateral. Aqui o piso desce e a quebra por
	 * palavra é permitida como último recurso. */
	/* ATENCAO a especificidade: main.css declara .hero .hero-title (duas
	 * classes) com !important. Uma regra .hero-title (uma classe) aqui
	 * perde a disputa mesmo dentro da media query -- era por isso que o
	 * titulo continuava no tamanho de desktop no celular. Os seletores
	 * abaixo repetem o mesmo peso. */
	.hero .hero-title {
		font-size: clamp(1.75rem, 8.5vw, 2.5rem) !important;
		line-height: 1 !important;
		letter-spacing: -.015em !important;
		overflow-wrap: break-word !important;
		word-break: normal !important;
		hyphens: none !important;
	}
	.hero .hero-lede { font-size: .9375rem !important; max-width: none !important; }
	.hero .hero-eyebrow { font-size: .6rem !important; letter-spacing: .12em !important; }
	.hero .hero-inner { gap: 1.5rem !important; }
	.hero .hero-inner > * { min-width: 0 !important; }
	/* O hero recorta o proprio overflow; sem isto qualquer estouro de
	 * largura vira conteudo cortado na borda em vez de texto quebrado. */
	.hero { overflow-x: clip; }

	/* Títulos de seção dos blocos do app, na mesma lógica. */
	.sec-title,
	.itin-title,
	.vocab-title,
	.ap-title { font-size: clamp(1.5rem, 7vw, 2rem) !important; line-height: 1.08 !important; }
	.sec-lede,
	.itin-lede,
	.vocab-intro { font-size: .95rem !important; }

	/* Nada de texto colado na borda em elemento nenhum. */
	.section,
	.hero-inner,
	.searchbar-wrap,
	.map-wrap,
	.itin-wrap,
	.saved-wrap {
		padding-left: var(--pad, 1.25rem) !important;
		padding-right: var(--pad, 1.25rem) !important;
	}

	/* Respiro lateral tambem no conteudo montado no construtor: o
	 * .container do Enfold e o entry-content-wrapper das secoes 100%
	 * sao os dois unicos niveis que carregam a margem lateral. */
	.responsive .container:not(.av-section-cont-open),
	.responsive .av-section-cont-open .entry-content-wrapper {
		padding-left: var(--pad, 1.25rem) !important;
		padding-right: var(--pad, 1.25rem) !important;
	}
	.responsive .bcg-fullwidth-section .entry-content-wrapper,
	.responsive .bcg-edge .entry-content-wrapper {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Titulos: encolher antes de quebrar.
	 *
	 * Todo texto tem overflow-wrap:break-word para que palavra longa nunca
	 * alargue a pagina. Em TITULO isso saia caro: numa tela estreita o
	 * navegador partia a palavra ao meio ("RESTAURAN / TS", "WHER / E").
	 * Nos titulos de display a ordem se inverte -- a fonte encolhe pelo
	 * clamp em vw ate a palavra caber, e a quebra no meio so acontece se
	 * nem no tamanho minimo couber. */
	.sec-title, .card-title, .entry-title, .av-special-heading-tag {
		font-size: clamp(1.375rem, 5.5vw, 2.375rem) !important;
		line-height: 1.1 !important;
		overflow-wrap: normal !important;
		word-break: keep-all !important;
		hyphens: none !important;
	}

	/* Palavra longa nunca empurra a largura da página. */
	h1, h2, h3, p, li, a { overflow-wrap: break-word; word-break: normal; hyphens: none; }
}

/* Topo do drawer: rótulo "Navigate" e botão de fechar na mesma linha.
 * O cabeçalho com logo + nome da marca saiu na 1.7.79 -- o painel abre
 * logo abaixo da barra, que já mostra o logo. */
.bcg-drawer-eyebrow-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px var(--pad, 1.25rem) 0;
}
.bcg-drawer-eyebrow-row .bcg-drawer-eyebrow { margin: 0 !important; padding: 0 !important; }
.bcg-drawer-eyebrow-row .bcg-drawer-close {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid rgba(26,26,26,.15);
	background: transparent;
	color: var(--ink);
	cursor: pointer;
}
.bcg-drawer-eyebrow-row .bcg-drawer-close:hover { background: rgba(26,26,26,.06); }

/* Color Section vazia não ocupa espaço.
 *
 * Lido no HTML da Main Guide: sobrou na página uma seção do construtor
 * (av_section_3) cujo único conteúdo é um Text Block vazio --
 * <div class="avia_textblock"></div>. Ela não tem texto, mas tem o
 * padding e as bordas de uma seção, e era a faixa vazia com dois traços
 * acima do socket.
 *
 * O certo é apagá-la no construtor; esta regra existe para que uma seção
 * esvaziada no editor não deixe rastro visível em nenhuma página. Só
 * atinge seção cujo bloco de texto está literalmente vazio: qualquer
 * conteúdo, inclusive uma imagem ou um espaço, mantém a seção visível. */
.container_wrap:has(.entry-content-wrapper > section.av_textblock_section:only-child > .avia_textblock:empty),
.avia-section:has(.entry-content-wrapper > section.av_textblock_section:only-child > .avia_textblock:empty) {
	display: none !important;
}

/* Sem borda entre seções.
 *
 * A linha vinha do grid.css do Enfold, carregado desde a 1.7.67: ele dá
 * border-top a todo .container_wrap. No Enfold completo essa borda é
 * neutralizada pela folha dinâmica dele (a mesma que aplica a opção
 * "Border" do painel); como este tema carrega só a grade, a borda ficava
 * visível e a opção do painel não tinha como desligá-la.
 *
 * Aqui ela é removida na origem. Seções que precisem de separador
 * continuam podendo defini-lo no construtor (Color Section > Styling >
 * Border), porque isso o Enfold escreve na seção, não no wrapper. */
.container_wrap,
.container_wrap_first,
#main .container_wrap,
#main > .container_wrap,
div.container_wrap,
body .container_wrap { border-top: none !important; border-bottom: none !important; }
/* A borda de separação do Enfold não é só border no wrapper: em várias
 * versões ela é desenhada como uma linha em ::before/::after do
 * .container_wrap (o mesmo mecanismo do "border styling" da seção), e
 * nesse caso zerar border não apaga nada -- era o que acontecia aqui. */
.container_wrap::before,
.container_wrap::after,
.avia-section::before,
.avia-section::after {
	border: none !important;
	background: none !important;
	content: none !important;
}
/* Rodapé e socket seguem a mesma decisão. */
#footer, #socket { border-top: none !important; }
#footer::before, #socket::before { border: none !important; content: none !important; }

/* Todo texto do construtor começa na MESMA vertical.
 *
 * A coluna de leitura estava sendo aplicada em dois níveis ao mesmo
 * tempo: no .avia_textblock (regra c) e, em alguns casos, também em cada
 * filho dele (p/h1/h2...). Onde as duas coincidiam o texto ganhava --pad
 * duas vezes e nascia deslocado; onde só uma valia, nascia na margem --
 * daí "Explore the Guide" e "FEATURED TABLES" alinhados numa vertical e
 * o título e o parágrafo noutra.
 *
 * Agora o recuo mora num lugar só: o bloco de texto. Os filhos herdam a
 * mesma origem, então tudo alinha à esquerda na mesma linha. */
.avia_textblock > p,
.avia_textblock > h1,
.avia_textblock > h2,
.avia_textblock > h3,
.avia_textblock > h4,
.avia_textblock > h5,
.avia_textblock > h6,
.avia_textblock > ul,
.avia_textblock > ol,
.avia_textblock > blockquote {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
}
/* Alinhamento à esquerda como DEFAULT (1.9.33).
 *
 * Era uma regra normal, e por isso ganhava do painel: o campo de
 * alinhamento do Text Block e do Special Heading não tinha efeito -- o
 * Enfold escreve a escolha numa regra com a classe do elemento
 * (av-xxxxx-hash), de especificidade parecida, e a ordem de carga decidia.
 *
 * Com :where() a especificidade vai a zero: continua sendo o alinhamento
 * padrão quando ninguém escolhe nada, e cede na hora em que o painel
 * escolhe. Também saiu do bloco acima, onde vinha junto de regras de
 * margem que precisam de !important por outro motivo. */
:where(.avia_textblock > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote)),
:where(.avia_textblock),
:where(.av-special-heading .av-special-heading-tag),
:where(.av-special-heading .av-subheading) { text-align: left; }

/* ═══ TITULOS: ENCOLHER ATE CABER ══════════════════════════════════
 *
 * Terceira tentativa, e desta vez sem media query nenhuma -- porque o
 * problema nunca foi o breakpoint, foi o PISO do clamp.
 *
 * Os titulos do construtor tinham pisos de 2rem / 1.75rem (32px / 28px).
 * Numa tela de 360px sobram ~324px de linha; em Playfair Display caixa
 * alta cada caractere ocupa cerca de 0.87em, entao a 32px uma palavra de
 * 10 letras pede ~278px e "EVERYTHING", "CONFIDENCE" e "RESTAURANTS"
 * passavam do limite. O navegador, obedecendo ao overflow-wrap:break-word
 * que protege a largura da pagina, partia a palavra ao meio.
 *
 * Com piso de 1.5rem e o meio do clamp em vw, a fonte encolhe junto com a
 * tela e a palavra cabe inteira -- em 360px o h1 fica em 25px, onde uma
 * palavra de 10 letras pede ~218px.
 *
 * Este bloco fica no FIM do arquivo de proposito: as regras que ele
 * substitui estao espalhadas em tres media queries diferentes, e empatar
 * em especificidade nao bastava -- quem vem depois vence o empate.
 */
/* 1.9.34 — este bloco era o que sobrepunha o construtor.
 *
 * Ele foi escrito para um problema real: em 360px, um h1 com piso de 32px
 * partia "ACTUALLY" ao meio. A solução (clamp com piso baixo e meio em vw)
 * continua certa. O que estava errado era o !important em toda largura —
 * ele vencia o tamanho escolhido no painel, em qualquer tela, e o bloco
 * está no FIM do arquivo justamente para ganhar de tudo.
 *
 * Agora o !important vale só no CELULAR, onde ele impede um defeito
 * concreto (palavra partida). No desktop as mesmas regras entram como
 * default via :where(), então o campo de tamanho do elemento manda.
 *
 * Em resumo: o tema garante que o título caiba; o painel decide o quanto
 * ele é grande. */
:where(h1.av-special-heading-tag,
body.bcg-app-page h1.av-special-heading-tag,
body.bcg-app-page .avia_textblock h1) {
	/* Teto de 64px (4rem), pedido pelo cliente. O piso continua baixo e o
	 * meio em vw: 64px e o tamanho que o titulo assume quando ha largura
	 * para ele (a partir de ~915px de viewport). Fixar 64px em toda largura
	 * traria de volta a palavra partida no celular -- em 360px cabem ~25px
	 * de altura de fonte antes de "ACTUALLY" estourar a linha. */
	font-size: clamp(1.5rem, 7vw, 4rem);
	line-height: 1.05;
}
:where(h2.av-special-heading-tag,
body.bcg-app-page h2.av-special-heading-tag,
body.bcg-app-page .avia_textblock h2) {
	font-size: clamp(1.375rem, 6vw, 4rem);
	line-height: 1.1;
}
/* .sec-title é do tema, não do construtor: continua imperativo. */
.sec-title {
	font-size: clamp(1.375rem, 6vw, 4rem) !important;
	line-height: 1.1 !important;
}
:where(h3.av-special-heading-tag,
body.bcg-app-page .avia_textblock h3) {
	font-size: clamp(1.25rem, 5vw, 1.75rem);
	line-height: 1.15;
}

/* No celular o teto volta a ser imperativo: aqui a palavra partida é um
 * defeito visível, e nenhum tamanho de desktop cabe em 360px. */
@media only screen and (max-width: 767px) {
	h1.av-special-heading-tag,
	body.bcg-app-page .avia_textblock h1 {
		font-size: clamp(1.5rem, 7vw, 2.25rem) !important;
		line-height: 1.05 !important;
	}
	h2.av-special-heading-tag,
	body.bcg-app-page .avia_textblock h2 {
		font-size: clamp(1.375rem, 6vw, 2rem) !important;
		line-height: 1.1 !important;
	}
}

/* Palavra so quebra entre palavras. O tamanho acima ja garante que ela
 * cabe; isto e a rede de seguranca para um nome proprio muito longo. */
h1.av-special-heading-tag, h2.av-special-heading-tag, h3.av-special-heading-tag,
body.bcg-app-page .avia_textblock h1,
body.bcg-app-page .avia_textblock h2,
body.bcg-app-page .avia_textblock h3,
.sec-title, .card-title, .entry-title, .hero-title {
	word-break: normal !important;
	hyphens: none !important;
	-webkit-hyphens: none !important;
	text-wrap: balance;
}

/* Acima de 990px (desktop) os titulos voltam aos tamanhos de leitura
 * confortavel: o vw do clamp ja chegou ao teto, mas o teto do h1 e alto
 * para o hero -- titulo de secao nao deve herda-lo. */
@media only screen and (min-width: 990px) {
	.sec-title { font-size: 4rem !important; }
}

/* ═══ ESPACO ENTRE SECOES NO CELULAR: -20% ═════════════════════════
 *
 * O vazio entre uma secao e a seguinte nao vem de um lugar so: soma o
 * padding vertical do .content do Enfold (50px de cada lado por padrao,
 * entao 100px entre duas secoes vizinhas) com o padding proprio dos blocos
 * do tema (.section, 2.5rem) e a margem do titulo da secao.
 *
 * Reduzir "20%" exige reduzir as tres parcelas na mesma proporcao -- mexer
 * so numa delas mudaria o espaco em telas diferentes de forma desigual.
 * Valores: 50px -> 40px, 2.5rem -> 2rem, 1.75rem -> 1.4rem.
 *
 * Fim do arquivo e sem :has(), para nao depender de suporte a seletor.
 */
@media only screen and (max-width: 767px) {
	.responsive .avia-section .content,
	.responsive .avia-section .sidebar,
	.responsive #main .container_wrap .content {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}
	.section { padding-top: 2rem !important; padding-bottom: 2rem !important; }
	.sec-head { margin-bottom: 1.4rem !important; padding-bottom: .8rem !important; }
	.bcg-section > :first-child { margin-top: 0 !important; }
	.bcg-section > :last-child  { margin-bottom: 0 !important; }
}

/* ═══ H2 NO CELULAR: 36px FIXO ═════════════════════════════════════
 *
 * Pedido explicito: nada de clamp aqui -- 36px em toda largura de celular.
 *
 * Inclui .avia_textblock h2 e h2.av-special-heading-tag porque o titulo do
 * construtor traz font-size como estilo inline; sem !important o inline
 * venceria. O filtro bcg_cap_inline_heading_size() (1.8.17) reescreve o
 * inline para clamp(...,64px), e este bloco, sendo o ultimo do arquivo e
 * com !important, prevalece dentro do breakpoint.
 *
 * word-break/hyphens continuam desligados: a 36px "RESTAURANTS" cabe numa
 * linha de ~324px (tela de 360px menos o respiro), entao nao ha motivo
 * para o navegador partir a palavra.
 */
@media only screen and (max-width: 767px) {
	h2,
	.sec-title,
	h2.av-special-heading-tag,
	body.bcg-app-page h2.av-special-heading-tag,
	body.bcg-app-page .avia_textblock h2,
	.responsive body.bcg-app-page h2.av-special-heading-tag,
	.responsive body.bcg-app-page .avia_textblock h2 {
		font-size: 36px !important;
		line-height: 1.1 !important;
		word-break: normal !important;
		hyphens: none !important;
		-webkit-hyphens: none !important;
	}
}

/* ═══ HERO NO CELULAR: TOPO MAIS CURTO + H1 36px ═══════════════════
 *
 * O respiro acima do eyebrow ("THE GUIDE · RIO DE JANEIRO") vinha do
 * padding vertical do .hero somado ao padding do .content da secao do
 * Enfold -- as duas parcelas empilhadas davam a faixa verde vazia entre a
 * barra do hamburguer e a primeira linha de texto. O corte e no topo do
 * hero; a base fica, para o texto nao encostar no botao.
 *
 * H1 em 36px fixo, como o H2 (1.8.19). O seletor repete .hero .hero-title
 * porque main.css declara essa dupla de classes com !important, e ainda
 * cobre o titulo do construtor, cujo tamanho vem inline.
 */
@media only screen and (max-width: 767px) {
	.hero { padding-top: 1.25rem !important; }
	.hero .hero-inner { padding-top: 0 !important; }
	.avia-section:first-of-type .content,
	.responsive .avia-section:first-of-type .content { padding-top: 16px !important; }

	h1,
	.hero .hero-title,
	h1.av-special-heading-tag,
	body.bcg-app-page h1.av-special-heading-tag,
	body.bcg-app-page .avia_textblock h1,
	.responsive body.bcg-app-page h1.av-special-heading-tag,
	.responsive body.bcg-app-page .avia_textblock h1 {
		font-size: 36px !important;
		line-height: 1.1 !important;
		word-break: normal !important;
		hyphens: none !important;
		-webkit-hyphens: none !important;
	}
}

/* A reserva da faixa de calcada nunca pode ser apagada por atalho.
 * Ultima palavra sobre o padding-bottom do hero no celular: 120px da
 * calcada + respiro. Sem isto, qualquer regra futura escrita como
 * 'padding: X Y Z' faz a calcada voltar a cobrir o texto. */
@media only screen and (max-width: 767px) {
	.hero { padding-bottom: calc(2.5rem + 120px) !important; }
}

/* ─── Homepage como icone na barra de navegacao (1.8.35) ──────────────
 * O <a> continua sendo o mesmo .nav-tab: mesma altura, mesmo alvo de
 * clique, mesma cor. So o conteudo virou desenho, entao o que falta e
 * centrar o glifo e dar a ele a mesma area de toque que uma palavra tinha
 * -- sem isso o item vira um alvo pequeno demais no meio dos vizinhos. */
.nav-tab.nav-tab-home {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	line-height: 1;
}
.nav-tab.nav-tab-home .nav-tab-home-icon {
	display: block;
	width: 20px;
	height: 20px;
	/* Optico, nao geometrico: o telhado deixa um vazio no alto do desenho,
	 * e sem esse meio pixel a casa parece flutuar acima da linha de base
	 * das palavras vizinhas. */
	transform: translateY(0.5px);
}

/* ─── Marca do cartao do hero: favicon (1.9.6) ────────────────────────
 * A imagem antiga era o logo de 112px, largo e com lettering proprio. O
 * favicon e quadrado e feito para tamanho pequeno: fica do tamanho de uma
 * inicial ao lado do rotulo, alinhado pelo centro optico do texto. */
.hc-stamp-icon {
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	object-fit: contain;
	border-radius: 6px;
}

/* ─── Seletor de idioma (1.9.12) ──────────────────────────────────────
 *
 * O item do idioma ativo sai da lista. O :has() é a trava que faltava nas
 * tentativas anteriores: a regra se recusa a esconder qualquer elemento que
 * contenha mais de um link de idioma, porque um container não é um item —
 * era assim que o seletor inteiro desaparecia ao trocar de idioma. */
/* 1.9.14 — nenhuma regra global aqui, de propósito.
 *
 * Quem esconde o idioma ativo é a regra da 1.9.4, mais acima neste arquivo,
 * escopada a "> li" de .sub-menu / .dropdown-menu. Ela só alcança um item
 * DENTRO da lista aberta — então uma marca colocada por engano no item de
 * menu do topo não tem efeito, e a bandeira que abre o dropdown não pode
 * desaparecer.
 *
 * Foi essa a falha das versões 1.9.5, 1.9.9 e 1.9.12: cada uma ampliou o
 * alcance da regra para pegar mais casos, e cada uma acabou escondendo o
 * seletor inteiro. O alcance estreito é a correção. */

/* Fechar o dropdown depois de escolher. O GTranslate traduz sem recarregar,
 * então o ponteiro segue sobre o menu e o :hover o mantém aberto por cima da
 * página já traduzida. A marca vem do JS e sai quando o mouse sai. */
[data-bcg-lang-closed] > .sub-menu,
[data-bcg-lang-closed] > .dropdown-menu,
[data-bcg-lang-closed] .gt_options { display: none !important; }

/* ─── Taxonomia clicável na ficha do restaurante (1.9.23) ─────────────
 *
 * Bairro, cozinha e tags viraram <button> para filtrar a listagem. O botão
 * traz consigo estilo de formulário (fundo, borda, fonte do sistema,
 * padding) que não tem nada a ver com o texto ao redor — o reset abaixo
 * devolve a aparência que esses rótulos já tinham.
 *
 * O que se acrescenta é só o convite ao clique: sublinhado discreto no
 * bairro e na cozinha, que são texto corrido; nas tags, que já parecem
 * botão, apenas o cursor e o realce no hover. */
.det-meta .det-link {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-underline-offset: 3px;
	text-decoration: underline;
	text-decoration-color: color-mix(in oklch, currentColor 25%, transparent);
	transition: text-decoration-color 120ms ease;
}
.det-meta .det-link:hover,
.det-meta .det-link:focus-visible {
	text-decoration-color: currentColor;
}

/* As tags: eram <span> com aparência de etiqueta, agora <button>. Herdam
 * .card-tag; aqui só se remove o que o botão traz de fábrica. */
.det-tags .card-tag {
	appearance: none;
	border-width: 1px;
	font: inherit;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 120ms ease, filter 120ms ease;
}
.det-tags .card-tag:hover,
.det-tags .card-tag:focus-visible {
	filter: brightness(0.94);
	transform: translateY(-1px);
}

/* ─── Herança do construtor (1.9.31) ─────────────────────────────────
 *
 * As versões 1.9.26 e 1.9.29 tentaram fazer o texto herdar o que o painel
 * definia no invólucro. O inspetor desmentiu a premissa: a regra do tema
 * aplicava certo, e não havia valor nenhum no invólucro para herdar — a
 * classe do elemento (av-xxxxx-hash) estava no HTML sem nenhuma regra
 * correspondente em stylesheet algum.
 *
 * Ou seja, o problema nunca foi disputa de cascata: é o arquivo de CSS por
 * elemento do Enfold (uploads/dynamic_avia/) que não está sendo escrito.
 * Nada em CSS de tema corrige isso, e regra especulativa sobre um valor que
 * não existe só acrescenta risco — foi por isso que aquelas duas saíram.
 *
 * Fica apenas a herança dentro do Text Block, que é o contrato do elemento
 * (o invólucro define, o texto herda) e não depende de adivinhar valor
 * nenhum. Escopo exclui os blocos do guia, que trazem tipografia própria. */
/* 1.9.34 — sem forçar herança, para não competir com o Enfold.
 *
 * A 1.9.33 punha font-size/color: inherit !important no <p>. Isso vencia a
 * herança perdida, mas vencia TAMBÉM a regra que o Enfold gera para o
 * elemento — se ele escreve o tamanho no próprio <p>, o inherit forçado o
 * apagava e o texto voltava ao tamanho do invólucro. Dois !important
 * disputando, e o resultado dependia de qual arquivo carregou depois.
 *
 * Herança sem !important: vale quando ninguém mais fala, cede quando o
 * painel fala. Nenhuma disputa. */
:where(.avia_textblock:not(:has(.hero, .searchbar-wrap, .bcg-section, .map-wrap, .itin-wrap, .saved-wrap, .ap-wrap, .bcg-random-restaurants)) > :is(p, ul, ol, blockquote)) {
	font-size: inherit;
	color: inherit;
}

/* ─── .disableLinks ───────────────────────────────────────────────────
 *
 * Desliga o clique num elemento e em tudo o que ele contém. Uso: escreva
 * disableLinks no campo Custom CSS Class do elemento, no construtor.
 *
 * Fica aqui e não em style.css: aquele arquivo é só o cabeçalho do tema
 * (nome, versão, "Template: enfold") e não é enfileirado -- quem carrega o
 * CSS é main.css e esta folha. Uma regra escrita lá não teria efeito.
 *
 * pointer-events: none também apaga o cursor de link e o foco por teclado
 * do que está dentro. É o comportamento certo para um bloco decorativo;
 * para um link que deve continuar acessível mas não navegar, o caminho é
 * outro (remover o href), como é feito com o logo. */
.disableLinks { pointer-events: none; }


/* ═══ AVALIAÇÕES DOS LEITORES (1.9.36) ═══════════════════════════════
 *
 * A seção fica fora do #detail-content e por isso precisa repetir a
 * largura e a caixa branca do .det-main -- ela não herda nada dele.
 * ─────────────────────────────────────────────────────────────────── */

.bcg-reviews {
  max-width: var(--maxw);
  margin: 1rem auto 3rem;
  padding: 0 1.25rem;
}
.bcg-reviews-in {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 2rem 2.25rem 2.25rem;
}
@media (max-width: 700px) {
  .bcg-reviews-in { padding: 1.5rem 1.25rem 1.75rem; }
}

/* ── O ícone ──
 *
 * currentColor de propósito: quem define a cor é o contexto (média,
 * lista, formulário), então trocar o desenho não obriga a rever cor
 * nenhuma. */
.bcg-rev-ico {
  width: 1em; height: 1em;
  display: block;
  fill: currentColor;
}

.bcg-rev-stars {
  display: inline-flex;
  gap: .1em;
  font-size: 1rem;
  line-height: 1;
  color: var(--yellow-dark);
}
.bcg-rev-star {
  position: relative;
  display: block;
  width: 1em; height: 1em;
  color: var(--border-2);
}
/* A parte cheia é uma segunda cópia do mesmo ícone, recortada por largura.
 * É o que permite meia nota aparecer como meio ícone em vez de arredondar
 * -- média de 4,5 com 2 avaliações é o caso comum, não a exceção. */
.bcg-rev-star-fill {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  color: var(--yellow-dark);
}
.bcg-rev-star-fill .bcg-rev-ico { width: 1em; }

/* ── Média no topo ── */
.bcg-reviews-head { margin-bottom: 1.5rem; }
.bcg-reviews-avg {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex-wrap: wrap;
}
.bcg-reviews-avg-n {
  font-family: var(--font-d);
  font-size: 2rem; font-weight: 600; line-height: 1;
  color: var(--ink);
}
.bcg-reviews-avg .bcg-rev-stars { font-size: 1.125rem; }
.bcg-reviews-avg-c { font-size: .8rem; color: var(--muted); }
.bcg-reviews-empty { font-size: .9rem; color: var(--muted); line-height: 1.6; }

/* ── Lista ── */
.bcg-review-list { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.bcg-review { padding: 1.25rem 0; border-top: 1px solid var(--border); }
.bcg-review:first-child { border-top: none; padding-top: 0; }
.bcg-review-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .625rem;
}
.bcg-review-who { font-size: .88rem; font-weight: 600; color: var(--ink); }
.bcg-review-when { font-size: .72rem; color: var(--light); margin-left: auto; }
.bcg-review-text { font-size: .92rem; line-height: 1.65; color: var(--ink-2); }
.bcg-review-text p { margin: 0 0 .75rem; }
.bcg-review-text p:last-child { margin-bottom: 0; }

/* Comentário na fila, visível só para quem escreveu. */
.bcg-review.is-held { background: var(--yellow-50); border-radius: var(--r); padding: 1.25rem; }
.bcg-review-held {
  font-size: .78rem; color: var(--green-dark);
  margin: 0 0 .5rem;
}

.bcg-reviews-gate {
  font-size: .88rem; color: var(--muted);
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.bcg-reviews-gate a { color: var(--green); font-weight: 500; }

/* ── Formulário ──
 *
 * row-reverse não é enfeite: os cinco botões estão no HTML em ordem
 * decrescente (5 → 1) para que `input:checked ~ label` alcance as notas
 * MENORES, que são as que devem ficar pintadas. O irmão anterior não tem
 * seletor em CSS. Aqui a ordem visual volta a 1 → 5. */
.bcg-rate-form { padding-top: 1.75rem; border-top: 1px solid var(--border); }
.bcg-rate-title { margin-bottom: 1.25rem !important; }
.bcg-rate-field { margin-bottom: 1.25rem; }
.bcg-rate-lbl,
.bcg-rate-text label {
  display: block;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--muted);
  margin-bottom: .5rem;
}
.bcg-rate {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: .25rem;
  font-size: 1.75rem;
}
.bcg-rate input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.bcg-rate label {
  cursor: pointer;
  color: var(--border-2);
  line-height: 1;
  transition: color .12s, transform .12s;
}
.bcg-rate input:checked ~ label { color: var(--yellow-dark); }
/* Enquanto o mouse está sobre a fila, o que manda é a pré-visualização e
 * não a escolha já feita -- senão as duas se somam e a fila fica pintada
 * até a maior das duas. */
.bcg-rate:hover input:checked ~ label { color: var(--border-2); }
.bcg-rate label:hover,
.bcg-rate label:hover ~ label { color: var(--yellow-dark); }
.bcg-rate label:hover { transform: scale(1.08); }
.bcg-rate input:focus-visible + label {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 3px;
}

.bcg-rate-text textarea {
  width: 100%;
  font-family: var(--font-b);
  font-size: .92rem; line-height: 1.6;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--border-2);
  border-radius: var(--r);
  padding: .875rem 1rem;
  resize: vertical;
}
.bcg-rate-text textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-50);
}
.bcg-rate-note { font-size: .75rem; color: var(--light); margin: .75rem 0 1rem; }
.bcg-rate-form .form-submit { margin: 0; }
.bcg-rate-submit { width: auto; padding: .875rem 1.75rem; }

/* ── Chip da média no card e na linha do detalhe ── */
.bcg-rate-chip {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: inherit;
  color: var(--yellow-dark);
  white-space: nowrap;
}
.bcg-rate-chip .bcg-rev-ico { width: .95em; height: .95em; }
.bcg-rate-chip-n { font-weight: 600; color: var(--ink-2); }
.bcg-rate-chip-c { color: var(--light); }
.bcg-rate-chip-link { text-decoration: none; }
.bcg-rate-chip-link:hover .bcg-rate-chip-n { text-decoration: underline; }

/* Rótulo só para leitor de tela (as notas 1..5 do formulário). Definido
 * aqui porque não se pode contar com o Enfold tê-lo em toda versão. */
.bcg-rate .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ═══ AVALIAÇÕES NA COLUNA DIREITA (1.9.42) ══════════════════════════
 *
 * O bloco é movido pelo JS para dentro da .det-side (ver renderDetail em
 * main.js). Aqui ele perde a largura e o recuo de seção solta e assume a
 * caixa da coluna -- as mesmas medidas do .side-card ao lado, para os dois
 * cartões parecerem irmãos.
 * ─────────────────────────────────────────────────────────────────── */

.det-side .bcg-reviews {
  max-width: none;
  margin: 0;
  padding: 0;
}
.det-side .bcg-reviews-in {
  padding: 1.5rem 1.5rem 1.625rem;
}
/* A coluna deixa de ser fixa quando recebe o formulário: um cartão alto
 * preso na tela ficaria com o botão de enviar fora do alcance. */
.det-side:has(.bcg-reviews) {
  position: static;
}
/* Na coluna estreita a média fica menor, e a fila de cinco ícones do
 * formulário também -- 1.75rem cada não caberia. */
.det-side .bcg-reviews-avg-n { font-size: 1.5rem; }
.det-side .bcg-rate { font-size: 1.5rem; }
.det-side .bcg-review-text { font-size: .86rem; }
.det-side .bcg-reviews-head { margin-bottom: 1.125rem; }

/* ── A média na linha de meta do título ──
 *
 * margin-left:auto é o que joga só ela para a direita: a .det-meta é uma
 * linha flex, e o resto (bairro, tipo, preço) continua à esquerda. */
.det-rating {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-left: auto;
  text-decoration: none;
  color: var(--muted);
}
.det-rating .bcg-rev-stars { font-size: .95rem; }
.det-rating-n {
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.det-rating:hover .det-rating-n { text-decoration: underline; }
@media (max-width: 560px) {
  /* Em tela estreita a linha quebra; a média volta para a esquerda, porque
   * "alinhado à direita" numa linha só dela viraria um texto órfão. */
  .det-rating { margin-left: 0; }
}


/* ═══ VISITANTE SEM ACESSO (1.9.43) ═════════════════════════════════
 *
 * O #app envolve o conteúdo da página inteira, então escondê-lo apagava a
 * página de vendas junto (ver a nota em header.php). O que se esconde aqui
 * são só as peças do produto: a barra de navegação do guia, o menu lateral
 * e o overlay dele. O conteúdo do construtor continua visível.
 * ─────────────────────────────────────────────────────────────────── */

/* 1.9.45 -- a regra que escondia a nav saiu daqui.
 *
 * Quem decide e o header.php, que simplesmente nao imprime a navegacao para
 * quem nao tem acesso. Duas fontes para a mesma decisao -- uma no PHP e uma
 * no CSS -- e como o site chegou a mostrar telas diferentes conforme a
 * versao do CSS que o navegador tinha em cache. A classe .is-locked
 * continua no #app, disponivel para estilo do conteudo, sem esconder nada. */