/* =============================================================================
   COMPONENTES  —  só consome var(--lbc-*) (semantic / component tokens)
   -----------------------------------------------------------------------------
   Sem hex, sem px de cor/tipo/raio. Os var(--e-global-*) trazem fallback --lbc-*
   para funcionar sem Kit do Elementor e respeitar o Kit quando existe.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Acessibilidade — skip link  (.skip-link.screen-reader-text)
   Serve o link do header.php E o widget "LBC Skip to Content" (mesmo comportamento).
   Princípios:
     · FORA DO FLUXO em todos os estados (position: fixed) → nunca empurra o
       header nem desloca a página, na 1.ª página ou nas interiores;
     · no foco por teclado: barra fixa no topo da viewport, à largura total, por
       cima de qualquer header/sticky (z-index no topo absoluto) → corrige o
       2.º header das páginas interiores, onde ficava por baixo e invisível, e
       o salto que só acontecia ao carregar na seta para baixo;
     · fundo a 100% da largura; texto/zona clicável dentro das margens do layout
       (padding-inline até --lbc-container-max);
     · cores por token, editáveis (Definições → Tema LBC → Cores, ou o controlo
       do widget): fundo preto e texto branco por defeito.
   --------------------------------------------------------------------------- */
.skip-link.screen-reader-text,
.elementor .elementor-element .skip-link.screen-reader-text {
  position: fixed;
  inset: 0 0 auto 0;                     /* top:0; left:0; right:0 */
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
  transform: translateY(-100%);          /* escondido acima da viewport */
  z-index: var(--lbc-skip-link-z);
  background-color: var(--lbc-skip-link-bg);
  color: var(--lbc-skip-link-fg);
  text-decoration: underline;
  text-decoration-thickness: var(--lbc-border-width-md);
  text-underline-offset: 0.3em;
}

.skip-link.screen-reader-text:focus,
.elementor .elementor-element .skip-link.screen-reader-text:focus {
  /* !important nas propriedades críticas de visibilidade: vence uma regra
     genérica .screen-reader-text{position:absolute!important;clip:…} de plugin
     ou de outro header, que era o que deixava o link invisível nas interiores. */
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: var(--lbc-touch-target);
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal;
  transform: none !important;             /* aparece no topo, sem deslocar nada */
  z-index: var(--lbc-skip-link-z);
  display: flex;
  align-items: center;
  padding-block: var(--lbc-space-sm);
  /* fundo a 100%; texto alinhado às margens do layout do site */
  padding-inline: max(var(--lbc-gutter), calc((100% - var(--lbc-container-max)) / 2));
  font-size: var(--lbc-text-size-body);
  line-height: var(--lbc-line-height-body);
}

/* No editor do Elementor: mostrar o link para poder ser selecionado/estilizado */
.elementor-editor-active .elementor-element .skip-link.screen-reader-text {
  position: relative;
  inset: auto;
  transform: none;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  opacity: 0.6;
}

/* -----------------------------------------------------------------------------
   Menu — submenu por clique (ver assets/js/main.js)
   --------------------------------------------------------------------------- */
.elementor-nav-menu .elementor-item.has-submenu > .elementor-sub-menu {
  display: none !important;
}

.elementor-nav-menu .elementor-item.has-submenu.submenu-open > .elementor-sub-menu {
  display: block !important;
}

/* -----------------------------------------------------------------------------
   Breadcrumbs (Yoast) — ver core/settings/settings-breadcrumbs.php
   Cobre a lista acessível (.yoast-breadcrumb), o widget Elementor Breadcrumbs,
   e o markup em spans do Yoast (#breadcrumbs / .breadcrumbs) sem filtro.
   --------------------------------------------------------------------------- */
.elementor .yoast-breadcrumb,
.yoast-breadcrumb,
.elementor-widget-breadcrumbs .elementor-widget-container,
nav[aria-label^="Breadcrumb"] {
  display: flex;
  flex-flow: row wrap;
  gap: var(--lbc-space-xs);
  padding-left: 0;
  margin: 0;
  align-items: center;
  justify-content: flex-start;
  list-style: none;
}

.elementor .yoast-breadcrumb a,
.elementor .yoast-breadcrumb span,
.yoast-breadcrumb,
.yoast-breadcrumb a,
.yoast-breadcrumb span,
#breadcrumbs,
#breadcrumbs a,
#breadcrumbs span,
.breadcrumbs,
.breadcrumbs a,
.breadcrumbs span {
  font-family: var(--e-global-typography-text-font-family, var(--lbc-font-body));
  font-size: var(--e-global-typography-text-font-size, var(--lbc-text-size-body));
  line-height: var(--e-global-typography-text-line-height, var(--lbc-line-height-body));
  color: var(--e-global-color-text, var(--lbc-text));
}

.elementor .yoast-breadcrumb a,
.yoast-breadcrumb a,
#breadcrumbs a,
.breadcrumbs a {
  text-decoration: underline;
  text-decoration-thickness: var(--lbc-border-width-md);
  text-underline-offset: 0.3em;
}

.elementor .yoast-breadcrumb a:hover,
.yoast-breadcrumb a:hover,
#breadcrumbs a:hover {
  color: var(--e-global-color-primary, var(--lbc-color-primary));
}

/* separador ">" nos breadcrumbs em spans do Yoast */
.yoast-breadcrumb > span[aria-hidden="true"],
#breadcrumbs > span[aria-hidden="true"] {
  color: var(--lbc-text-muted);
}

/* modificador para breadcrumbs sobre fundo escuro */
.breadcrumb-light .yoast-breadcrumb,
.breadcrumb-light .yoast-breadcrumb a,
.breadcrumb-light .yoast-breadcrumb span,
.breadcrumb-light #breadcrumbs,
.breadcrumb-light #breadcrumbs a,
.breadcrumb-light #breadcrumbs span,
.lbc-on-dark .yoast-breadcrumb,
.lbc-on-dark .yoast-breadcrumb a,
.lbc-on-dark .yoast-breadcrumb span {
  color: var(--lbc-on-dark-fg, var(--lbc-text-inverse));
}

/* -----------------------------------------------------------------------------
   Links em conteúdo de texto (Elementor Text Editor)
   --------------------------------------------------------------------------- */
.elementor .elementor-widget-text-editor a {
  color: var(--e-global-color-text, var(--lbc-text-link));
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 0.3em;
  text-decoration-thickness: var(--lbc-border-width-md);
}

.elementor .elementor-widget-text-editor a:hover {
  text-decoration-thickness: var(--lbc-border-width-lg);
}

/* -----------------------------------------------------------------------------
   .lbc-on-dark  —  utilitário para secções com fundo escuro
   Adicionar a classe à secção/coluna Elementor. Inverte texto e links (brancos
   por defeito) e alinha o breadcrumb com o modificador .breadcrumb-light.
   Sobreponível por projeto via --lbc-on-dark-* .
   --------------------------------------------------------------------------- */
.lbc-on-dark {
  color: var(--lbc-on-dark-fg, var(--lbc-text-inverse));
}

.lbc-on-dark a,
.lbc-on-dark .elementor-widget-text-editor a,
.lbc-on-dark .yoast-breadcrumb,
.lbc-on-dark .yoast-breadcrumb a,
.lbc-on-dark .yoast-breadcrumb span {
  color: var(--lbc-on-dark-fg, var(--lbc-text-inverse));
  text-decoration-color: currentColor;
}

.lbc-on-dark a:hover,
.lbc-on-dark .elementor-widget-text-editor a:hover {
  color: var(--lbc-on-dark-fg, var(--lbc-text-inverse));
}

/* -----------------------------------------------------------------------------
   Listas dentro de conteúdo Elementor / blocos
   O Elementor por vezes reduz o espaçamento; reforçamos os papéis de lista.
   --------------------------------------------------------------------------- */
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol,
.elementor-widget-theme-post-content ul,
.elementor-widget-theme-post-content ol,
.e-con .elementor-widget-container > ul,
.e-con .elementor-widget-container > ol {
  padding-left: var(--lbc-list-padding-start);
}

.elementor-widget-text-editor li,
.elementor-widget-theme-post-content li {
  line-height: var(--lbc-list-line-height);
}

.elementor-widget-text-editor li + li,
.elementor-widget-theme-post-content li + li {
  margin-top: var(--lbc-list-item-gap);
}

.elementor-widget-text-editor li::marker,
.elementor-widget-theme-post-content li::marker {
  color: var(--lbc-list-marker-color);
}

/* Compensação de âncora sob header fixo (--lbc-anchor-offset editável no painel) */
body:not(.elementor-editor-active) .elementor-menu-anchor::before {
  content: "";
  display: block;
  height: var(--lbc-anchor-offset, 150px);
  margin-top: calc(-1 * var(--lbc-anchor-offset, 150px));
  visibility: hidden;
  pointer-events: none;
}

/* Headings com id (ex.: gerados pelo widget Table of Contents) — o salto
   por âncora respeita a altura do header fixo. */
:where(h2, h3, h4, h5, h6)[id],
.lbc-anchor,
[id].wp-block-heading {
  scroll-margin-top: var(--lbc-anchor-offset, 150px);
}

/* =============================================================================
   MENU DE NAVEGAÇÃO  —  .lbc-menu   (campo "Classes CSS" do widget de menu)
   -----------------------------------------------------------------------------
   Substitui o CSS personalizado que estava preso a "selector" num widget.
   Cobre os menus usados no site: Elementor Nav Menu (.elementor-item…),
   WP Nav Menu / widget_nav_menu (.menu / .nav-menu / .menu-item),
   wp_page_menu (.page_item) e o bloco Navigation (.wp-block-navigation,
   a[aria-current="page"]).

   Comportamento (todas as linhas na cor --lbc-menu-underline; currentColor →
   fica branca dentro de .lbc-on-dark):
     · hover / foco por teclado ....... linha 2px (fade, não desloca layout)
     · item da página atual .......... linha 1px persistente
     · item parent / ancestor ........ linha 2px persistente
     · item ativo NÃO fica bold ...... font-weight normal
   As linhas persistentes usam box-shadow inset (equivale a border-bottom de
   1px / 2px, mas sem empurrar o texto nem os itens vizinhos).
   ========================================================================== */

/* Âncora dos pseudo-elementos das linhas */
.lbc-menu .elementor-item,
.lbc-menu .menu-item > a,
.lbc-menu .page_item > a,
.lbc-menu .wp-block-navigation-item > a {
  position: relative;
}

/* --- Linha de hover / foco — ::after 2px, opacidade 0→1 (sem deslocamento) --- */
.lbc-menu .elementor-item::after,
.lbc-menu .menu-item > a::after,
.lbc-menu .page_item > a::after,
.lbc-menu .wp-block-navigation-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--lbc-menu-underline-size-hover);   /* 2px */
  background: var(--lbc-menu-underline);
  opacity: 0;
  transition: opacity var(--lbc-transition-fast);
  pointer-events: none;
}

.lbc-menu .elementor-item:hover::after,
.lbc-menu .elementor-item:focus-visible::after,
.lbc-menu .menu-item > a:hover::after,
.lbc-menu .menu-item > a:focus-visible::after,
.lbc-menu .page_item > a:hover::after,
.lbc-menu .page_item > a:focus-visible::after,
.lbc-menu .wp-block-navigation-item > a:hover::after,
.lbc-menu .wp-block-navigation-item > a:focus-visible::after {
  opacity: 1;
}

/* --- Item da página atual — linha 1px persistente ------------------------- */
.lbc-menu .elementor-item-active,
.lbc-menu .current-menu-item > a,
.lbc-menu .current_page_item > a,
.lbc-menu li.current-menu-item > a,
.lbc-menu a[aria-current="page"] {
  box-shadow: inset 0 calc(-1 * var(--lbc-menu-underline-size)) 0 0 var(--lbc-menu-underline);
  font-weight: var(--lbc-menu-item-weight-active) !important;
}

/* --- Item parent / ancestor — linha 2px persistente ---------------------- */
.lbc-menu li.current-menu-parent > a,
.lbc-menu li.current-menu-ancestor > a,
.lbc-menu li.current_page_parent > a,
.lbc-menu li.current_page_ancestor > a,
.lbc-menu .elementor-nav-menu li.current-menu-parent > a.elementor-item,
.lbc-menu .elementor-nav-menu li.current-menu-ancestor > a.elementor-item {
  box-shadow: inset 0 calc(-1 * var(--lbc-menu-underline-size-parent)) 0 0 var(--lbc-menu-underline);
  font-weight: var(--lbc-menu-item-weight-active) !important;
}

/* --- Submenu — remove a border-left herdada (Elementor e menus nativos) --- */
.lbc-menu .sub-menu .elementor-sub-item,
.lbc-menu .elementor-sub-menu .elementor-sub-item,
.lbc-menu .sub-menu .menu-item > a,
.lbc-menu .sub-menu li > a,
.lbc-menu ul ul .menu-item > a {
  border-left: 0;
}

/* --- Seta de submenu (Elementor Nav Menu) ------------------------------- */
.lbc-menu .elementor-nav-menu .sub-arrow,
.lbc-menu .sub-arrow {
  padding: var(--lbc-menu-sub-arrow-padding);
  padding-top: var(--lbc-menu-sub-arrow-padding-top);
}
.lbc-menu .elementor-nav-menu .sub-arrow i,
.lbc-menu .sub-arrow i,
.lbc-menu .sub-arrow svg {
  font-size: var(--lbc-menu-sub-arrow-icon-size);   /* 14px */
}
.lbc-menu .sub-arrow svg {
  width: 1em;
  height: 1em;
}

/* =============================================================================
   BOTÃO  —  .lbc-button  (+ variantes: primary … highlight-2)
   Cada variante só redefine as custom properties locais --_*.
   ========================================================================== */
.elementor-element .lbc-button,
.lbc-button {
  /* --lbc-btn-* = overrides por instância (widget); vazios por defeito. */
  --_bg: var(--lbc-btn-bg, transparent);
  --_fg: var(--lbc-btn-fg, var(--lbc-color-primary));
  --_border: var(--lbc-btn-border, currentColor);
  --_bg-hover: var(--lbc-btn-bg-hover, var(--lbc-color-primary));
  --_fg-hover: var(--lbc-btn-fg-hover, var(--lbc-color-primary-contrast));
  --_border-hover: var(--lbc-btn-border-hover, var(--_bg-hover));

  display: inline-flex;
  gap: var(--lbc-button-gap);
  align-items: center;
  justify-content: center;
  padding: var(--lbc-button-padding-y) var(--lbc-button-padding-x);
  font-family: var(--e-global-typography-text-font-family, var(--lbc-font-body));
  font-size: var(--e-global-typography-text-font-size, var(--lbc-button-font-size));
  line-height: var(--e-global-typography-text-line-height, var(--lbc-line-height-body));
  font-weight: var(--lbc-button-font-weight);
  text-decoration: none;
  color: var(--_fg);
  background-color: var(--_bg);
  border: var(--lbc-border-width-md) solid var(--_border);
  border-radius: var(--lbc-btn-radius, var(--lbc-button-radius));
  transition: background-color var(--lbc-transition-fast),
              color var(--lbc-transition-fast),
              border-color var(--lbc-transition-fast),
              box-shadow var(--lbc-transition-fast);
}

.elementor-element .lbc-button:hover,
.lbc-button:hover {
  color: var(--_fg-hover);
  background-color: var(--_bg-hover);
  border-color: var(--_border-hover);
}

.elementor-element .lbc-button:focus-visible,
.lbc-button:focus-visible {
  outline: none;
  box-shadow: var(--lbc-focus-ring);
}

.elementor-element .lbc-button .elementor-icon,
.lbc-button .elementor-icon {
  font-size: var(--lbc-font-size-md);
  color: inherit;
  margin: 0;
}

.elementor-element .lbc-button .elementor-icon svg,
.lbc-button .elementor-icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.elementor-element .lbc-button .elementor-icon svg path {
  fill: currentColor;
}

.elementor-element .lbc-button i,
.lbc-button i {
  font-size: var(--lbc-font-size-md);
  color: inherit;
}

/* Tamanhos */
.elementor-element .lbc-button.small,
.lbc-button.small {
  padding: var(--lbc-button-padding-y-sm) var(--lbc-button-padding-x-sm);
  font-size: var(--lbc-button-font-size-sm);
}

.elementor-element .lbc-button.large,
.lbc-button.large {
  padding: var(--lbc-button-padding-y-lg) var(--lbc-button-padding-x-lg);
  font-size: var(--lbc-button-font-size-lg);
}

/* Variante: Primário — fundo/borda na cor primária, texto branco, radius 50px,
   peso bold. Hover: fundo/borda na cor SECUNDÁRIA (--lbc-button-bg-hover), texto branco. */
.elementor-element .lbc-button.primary,
.lbc-button.primary {
  --_bg: var(--lbc-btn-bg, var(--lbc-button-bg));
  --_fg: var(--lbc-btn-fg, var(--lbc-button-fg));
  --_border: var(--lbc-btn-border, var(--lbc-button-bg));
  --_bg-hover: var(--lbc-btn-bg-hover, var(--lbc-button-bg-hover));
  --_fg-hover: var(--lbc-btn-fg-hover, var(--lbc-button-fg));
  --_border-hover: var(--lbc-btn-border-hover, var(--lbc-button-bg-hover));
}

/* Variante: Secundário (contorno primário → preenche primário no hover; radius 50px, bold) */
.elementor-element .lbc-button.secondary,
.lbc-button.secondary {
  --_bg: var(--lbc-btn-bg, transparent);
  --_fg: var(--lbc-btn-fg, var(--lbc-color-primary));
  --_border: var(--lbc-btn-border, var(--lbc-color-primary));
  --_bg-hover: var(--lbc-btn-bg-hover, var(--lbc-color-primary));
  --_fg-hover: var(--lbc-btn-fg-hover, var(--lbc-color-primary-contrast));
  --_border-hover: var(--lbc-btn-border-hover, var(--lbc-color-primary));
}

/* Variante: Terciário — "link" com seta e sublinhado (design do sistema de botões).
   · Normal: texto (+ ícone/seta) em cor PRIMÁRIA, sublinhado com a largura do
     conteúdo (inset = padding horizontal, que dá folga ao anel de foco).
   · Hover: tudo o que é primário (texto, ícone, sublinhado) passa à cor SECUNDÁRIA;
     sem fundo e SEM alterar a espessura da linha (o Highlight-2 é que a engrossa).
   · Foco: anel de foco em retângulo de cantos suaves (não em "pílula"). */
.elementor-element .lbc-button.tertiary,
.lbc-button.tertiary {
  --_fg: var(--lbc-btn-fg, var(--lbc-color-primary));
  --_fg-hover: var(--lbc-btn-fg-hover, var(--lbc-color-secondary));
  --_bg-hover: var(--lbc-btn-bg-hover, transparent);
  --_border-hover: var(--lbc-btn-border-hover, transparent);
  position: relative;
  background-color: transparent;
  border-color: transparent;
  border-radius: var(--lbc-radius-control);
  padding: var(--lbc-button-padding-y) var(--lbc-space-xs);
}

.elementor-element .lbc-button.tertiary::after,
.lbc-button.tertiary::after {
  content: "";
  background-color: var(--_fg);
  display: block;
  height: var(--lbc-border-width-md);
  position: absolute;
  left: var(--lbc-space-xs);
  right: var(--lbc-space-xs);
  bottom: 0;
  transition: background-color var(--lbc-transition-fast);
}

.elementor-element .lbc-button.tertiary:hover,
.lbc-button.tertiary:hover {
  color: var(--_fg-hover);
  background-color: transparent;
  border-color: transparent;
}

.elementor-element .lbc-button.tertiary:hover::after,
.lbc-button.tertiary:hover::after {
  background-color: var(--_fg-hover);   /* sublinhado acompanha a cor do texto */
}

/* Variante: Quaternário (fundos escuros) — preenchido secundário; hover: sem fundo,
   contorno e texto claros (design do sistema de botões). */
.elementor-element .lbc-button.quaternary,
.lbc-button.quaternary {
  --_bg: var(--lbc-btn-bg, var(--lbc-color-secondary));
  --_fg: var(--lbc-btn-fg, var(--lbc-color-secondary-contrast));
  --_border: var(--lbc-btn-border, var(--lbc-color-secondary));
  --_bg-hover: var(--lbc-btn-bg-hover, transparent);
  --_fg-hover: var(--lbc-btn-fg-hover, var(--lbc-text-inverse));
  --_border-hover: var(--lbc-btn-border-hover, var(--lbc-text-inverse));
}

/* Variante: Highlight (fundos escuros) — preenchido a claro com texto na cor
   primária; hover: sem fundo, contorno e texto claros. */
.elementor-element .lbc-button.highlight,
.lbc-button.highlight {
  --_bg: var(--lbc-btn-bg, var(--lbc-text-inverse));
  --_fg: var(--lbc-btn-fg, var(--lbc-color-primary));
  --_border: var(--lbc-btn-border, var(--lbc-text-inverse));
  --_bg-hover: var(--lbc-btn-bg-hover, transparent);
  --_fg-hover: var(--lbc-btn-fg-hover, var(--lbc-text-inverse));
  --_border-hover: var(--lbc-btn-border-hover, var(--lbc-text-inverse));
}

/* Variante: Highlight-2 (link sublinhado, fundos escuros) */
.elementor-element .lbc-button.highlight-2,
.lbc-button.highlight-2 {
  --_fg: var(--lbc-btn-fg, var(--lbc-text-inverse));
  --_fg-hover: var(--lbc-btn-fg-hover, var(--lbc-text-inverse));
  --_bg-hover: transparent;      /* sem fundo no hover (o base pintava a cor primária) */
  --_border-hover: transparent;
  position: relative;
  background-color: transparent;
  border-color: transparent;
  border-radius: var(--lbc-radius-control);
  padding: var(--lbc-button-padding-y) var(--lbc-space-xs);
}

.elementor-element .lbc-button.highlight-2::after,
.lbc-button.highlight-2::after {
  content: "";
  background-color: var(--_fg);
  display: block;
  height: var(--lbc-border-width-md);
  position: absolute;
  left: var(--lbc-space-xs);
  right: var(--lbc-space-xs);
  bottom: 0;
}

.elementor-element .lbc-button.highlight-2:hover::after,
.lbc-button.highlight-2:hover::after {
  height: var(--lbc-border-width-lg);
  bottom: calc(-1 * var(--lbc-border-width-sm));
}

/* Estado desativado — todas as variantes (button:disabled, .disabled ou
   aria-disabled="true" num <a>). Só redefine as variáveis locais, por isso o
   hover/sublinhado herdam o cinzento. Preenchidos: fundo cinzento + texto claro;
   contorno / link: sem fundo, texto e linha cinzentos. */
.elementor-element .lbc-button.lbc-button:is(:disabled, .disabled, [aria-disabled="true"]),
.lbc-button.lbc-button:is(:disabled, .disabled, [aria-disabled="true"]) {
  --_bg: var(--lbc-grey-600);
  --_fg: var(--lbc-text-inverse);
  --_border: var(--lbc-grey-600);
  --_bg-hover: var(--lbc-grey-600);
  --_fg-hover: var(--lbc-text-inverse);
  --_border-hover: var(--lbc-grey-600);
  pointer-events: none;
  box-shadow: none;
}
.elementor-element .lbc-button.lbc-button.secondary:is(:disabled, .disabled, [aria-disabled="true"]),
.elementor-element .lbc-button.lbc-button.tertiary:is(:disabled, .disabled, [aria-disabled="true"]),
.lbc-button.lbc-button.secondary:is(:disabled, .disabled, [aria-disabled="true"]),
.lbc-button.lbc-button.tertiary:is(:disabled, .disabled, [aria-disabled="true"]) {
  --_bg: transparent;
  --_fg: var(--lbc-grey-600);
  --_border: var(--lbc-grey-600);
  --_bg-hover: transparent;
  --_fg-hover: var(--lbc-grey-600);
  --_border-hover: var(--lbc-grey-600);
}
.elementor-element .lbc-button.lbc-button.tertiary:is(:disabled, .disabled, [aria-disabled="true"]),
.lbc-button.lbc-button.tertiary:is(:disabled, .disabled, [aria-disabled="true"]),
.elementor-element .lbc-button.lbc-button.highlight-2:is(:disabled, .disabled, [aria-disabled="true"]),
.lbc-button.lbc-button.highlight-2:is(:disabled, .disabled, [aria-disabled="true"]) {
  --_border: transparent;          /* variantes "link": só o sublinhado, sem contorno */
  --_border-hover: transparent;
}
.elementor-element .lbc-button.lbc-button.highlight-2:is(:disabled, .disabled, [aria-disabled="true"]),
.lbc-button.lbc-button.highlight-2:is(:disabled, .disabled, [aria-disabled="true"]) {
  --_bg: transparent;
  --_fg: var(--lbc-grey-500);
  --_bg-hover: transparent;
  --_fg-hover: var(--lbc-grey-500);
}

/* =============================================================================
   BOTÃO DE PESQUISA  —  .lbc-search-button
   -----------------------------------------------------------------------------
   Reutilizável, independente de CSS por página/instância. Substitui o CSS
   personalizado que estava preso a "selector .elementor-button" num widget.

   Onde aplicar (qualquer um funciona):
     · Widget Elementor Button → Conteúdo → Botão → campo "Classes CSS"
       (recomendado — a classe cai no próprio <a class="elementor-button">);
     · Widget Elementor Button → Avançado → "Classes CSS"
       (a classe cai no wrapper .elementor-widget — também coberto abaixo);
     · Qualquer <a> / <button> em markup próprio.

   Comportamento:
     · ícone sempre a 18px             (--lbc-search-btn-icon-size)
     · linha inferior 2px no normal    (--lbc-search-btn-underline-size)
     · linha cresce para 3px no hover  (--lbc-search-btn-underline-size-hover)
     · linha colada imediatamente abaixo do botão (top: 100%), cresce p/ baixo
     · foco visível e acessível (anel de foco do sistema)
   Cor da linha: --lbc-search-btn-underline (currentColor → acompanha o texto,
   fica branca dentro de .lbc-on-dark porque o texto do botão também fica).
   ========================================================================== */

/* --- Alvo genérico: a classe está diretamente no <a>/<button> --------------- */
.lbc-search-button {
  position: relative;
  overflow: visible;   /* a linha assenta fora da caixa (top: 100%) */
}

/* --- Alvo no wrapper do widget: desenha no .elementor-button interno e anula
       a linha do próprio wrapper para não duplicar ---------------------------- */
.lbc-search-button.elementor-widget .elementor-button {
  position: relative;
  overflow: visible;
}
.lbc-search-button.elementor-widget::after {
  content: none;
}

/* Ícone a 18px (SVG ou icon-font, Elementor ou markup próprio) */
.lbc-search-button .elementor-button-icon,
.lbc-search-button .elementor-button-icon i,
.lbc-search-button .elementor-button-icon svg,
.lbc-search-button > i,
.lbc-search-button > svg {
  font-size: var(--lbc-search-btn-icon-size);
}
.lbc-search-button .elementor-button-icon svg,
.lbc-search-button > svg {
  width: 1em;
  height: 1em;
}

/* Linha inferior — pseudo-elemento sempre presente, exatamente abaixo do botão */
.lbc-search-button::after,
.lbc-search-button.elementor-widget .elementor-button::after {
  content: "";
  position: absolute;
  top: 100%;                                        /* imediatamente abaixo do botão */
  left: 0;
  width: 100%;
  height: var(--lbc-search-btn-underline-size);     /* 2px no estado normal */
  background-color: var(--lbc-search-btn-underline);
  transition: height var(--lbc-transition-fast);
  pointer-events: none;
}

/* Hover / foco — a linha cresce 1px para baixo (2px → 3px), sem deslocar nada */
.lbc-search-button:hover::after,
.lbc-search-button:focus-visible::after,
.lbc-search-button.elementor-widget .elementor-button:hover::after,
.lbc-search-button.elementor-widget .elementor-button:focus-visible::after {
  height: var(--lbc-search-btn-underline-size-hover);
}

/* Foco acessível e visível — anel de foco do sistema */
.lbc-search-button:focus-visible,
.lbc-search-button.elementor-widget .elementor-button:focus-visible {
  outline: var(--lbc-focus-outline);
  outline-offset: var(--lbc-focus-offset);
}

/* =============================================================================
   CARTÃO
   ========================================================================== */

/* Cartão simples com "stretched link" (a::before cobre o cartão) */
.lbc-card {
  position: relative;
}

.lbc-card .link:hover {
  cursor: pointer;
}

.lbc-card .link a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--lbc-z-base);
}

/* Cartão acessível (widget)
   Cada "zona" (imagem / texto / ícone) controla o seu próprio padding via token;
   o cartão em si não tem padding — assim, 0px numa zona fica mesmo a 0px. */
/* O cartão preenche a altura disponível: a sua própria "Altura mínima do cartão"
   (--lbc-card-min-height) OU a altura dada ao container/coluna do Elementor
   (widget e .elementor-widget-container a height:100% → quando o pai não tem
   altura, 100% resolve para auto e não tem efeito). Com o cartão esticado,
   .lbc-card-content cresce (flex:1) e os botões ficam no fundo (margin-top:auto). */
.elementor-widget-lbc_accessible_card,
.elementor-widget-lbc_accessible_card > .elementor-widget-container {
  height: 100%;
}

.elementor-element .lbc-accessible-card,
.lbc-accessible-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: var(--lbc-card-min-height, auto);
  gap: var(--lbc-card-gap);
  padding: 0;
  border: var(--lbc-card-border-width) solid var(--lbc-card-border-color);
  border-radius: var(--lbc-card-radius);
  overflow: hidden;
  background-color: var(--lbc-card-bg);
  color: var(--lbc-card-fg);
  box-shadow: var(--lbc-card-shadow);
}

/* Sobreposição de fundo (Background Overlay) — sobre a cor de fundo, sob o conteúdo */
.lbc-accessible-card .lbc-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}

/* Fundo no hover — camada por cima da sobreposição normal, invisível até o cartão
   receber hover/foco; o fade é por opacidade (uma background-image não transiciona).
   Só existe no DOM quando o widget tem um fundo de hover definido. */
.lbc-accessible-card .lbc-card-overlay-hover {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--lbc-card-hover-transition, var(--lbc-transition-slow));
}

.lbc-accessible-card:hover .lbc-card-overlay-hover,
.lbc-accessible-card:focus-within .lbc-card-overlay-hover {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .lbc-accessible-card .lbc-card-overlay-hover { transition: none; }
}

/* Conteúdo acima da sobreposição */
.lbc-accessible-card .lbc-card-image,
.lbc-accessible-card .lbc-card-icon,
.lbc-accessible-card .lbc-card-content {
  position: relative;
  z-index: 1;
}

.lbc-accessible-card .lbc-card-icon {
  display: flex;
  justify-content: center;
  /* base do token; o controlo "Padding da zona do ícone" (DIMENSIONS) sobrepõe-se
     via seletor por-instância do Elementor. */
  padding: var(--lbc-card-icon-padding);
  width: 2.5rem;
  height: auto;
  align-self: center;
  color: var(--lbc-color-accent);
}

.lbc-accessible-card .lbc-card-icon svg,
.lbc-accessible-card .lbc-card-icon i {
  width: 100%;
  height: auto;
  fill: currentColor;
  font-size: var(--lbc-font-size-xl);
}

.lbc-accessible-card .lbc-card-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;   /* preenche a altura do cartão (p/ "Altura mínima do cartão") */
  /* base (do controlo "Espaçamento interno (base das zonas)"); o controlo
     "Padding da zona de texto" (DIMENSIONS, 4 lados) sobrepõe-se via seletor
     por-instância do Elementor. */
  padding: var(--lbc-card-content-padding);
}

.lbc-accessible-card .lbc-card-title {
  font-family: var(--lbc-title-font);
  font-size: var(--lbc-font-size-lg);
  line-height: var(--lbc-title-line-height);
  margin: 0 0 var(--lbc-space-xs);
}

.lbc-accessible-card .lbc-card-description {
  font-size: var(--lbc-text-size-body);
  margin: 0;
}

.lbc-accessible-card .lbc-card-image {
  /* base do token; o controlo "Padding da zona da imagem" (DIMENSIONS) sobrepõe-se
     via seletor por-instância do Elementor. */
  padding: var(--lbc-card-image-padding);
}

.lbc-accessible-card .lbc-card-image img {
  display: block;
  width: 100%;
  height: var(--lbc-card-image-height, auto);
  object-fit: cover;
}

/* --- Posição da imagem: ao lado do texto (>= tablet) ------------------------ */
@media (min-width: 768px) {
  .elementor-element .lbc-accessible-card--img-left,
  .lbc-accessible-card--img-left  { flex-direction: row; }
  .elementor-element .lbc-accessible-card--img-right,
  .lbc-accessible-card--img-right { flex-direction: row-reverse; }

  .lbc-accessible-card--img-left .lbc-card-image,
  .lbc-accessible-card--img-right .lbc-card-image {
    flex: 0 0 var(--lbc-card-image-width, 40%);
    width: var(--lbc-card-image-width, 40%);
    align-self: stretch;
  }
  /* imagem preenche a altura da coluna quando está ao lado do texto */
  .lbc-accessible-card--img-left .lbc-card-image img,
  .lbc-accessible-card--img-right .lbc-card-image img {
    height: var(--lbc-card-image-height, 100%);
    min-height: 100%;
  }
}

.lbc-accessible-card .lbc-card-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lbc-space-xs);
  margin-top: auto;          /* encosta os botões ao fundo do cartão */
  padding-top: var(--lbc-space-xs);
}

.lbc-accessible-card[style*="text-align: center"] .lbc-card-buttons,
.lbc-accessible-card.is-centered .lbc-card-buttons {
  justify-content: center;
}

/* Ícones dos botões do cartão */
.lbc-accessible-card .lbc-card-buttons .lbc-button .elementor-icon {
  display: inline-flex;
  font-size: var(--lbc-card-btn-icon-size);
}
.lbc-accessible-card .lbc-card-buttons .lbc-button .elementor-icon svg,
.lbc-accessible-card .lbc-card-buttons .lbc-button .elementor-icon i {
  width: 1em;
  height: 1em;
  font-size: 1em;
  fill: currentColor;
}
.lbc-accessible-card .lbc-card-buttons .lbc-button.lbc-card-btn--icon-right  { flex-direction: row-reverse; }
.lbc-accessible-card .lbc-card-buttons .lbc-button.lbc-card-btn--icon-center { flex-direction: column; }

/* =============================================================================
   ETIQUETA / BADGE  —  .lbc-label
   ========================================================================== */
.lbc-label {
  display: inline-flex;
  align-items: center;
  gap: var(--lbc-space-3xs);
  padding: var(--lbc-label-padding-y) var(--lbc-label-padding-x);
  background-color: var(--lbc-label-bg);
  color: var(--lbc-label-fg);
  border-radius: var(--lbc-label-radius);
  font-size: var(--lbc-label-font-size);
  font-weight: var(--lbc-label-font-weight);
  letter-spacing: var(--lbc-label-letter-spacing);
  text-transform: uppercase;
  line-height: 1;
}

/* =============================================================================
   TÍTULO DE SECÇÃO  —  .lbc-title
   ========================================================================== */
.lbc-title {
  font-family: var(--lbc-title-font);
  color: var(--lbc-title-color);
  font-weight: var(--lbc-title-weight);
  line-height: var(--lbc-title-line-height);
  margin: var(--lbc-title-margin);
}

/* =============================================================================
   SLIDER ACESSÍVEL  —  .lbc-carousel
   ========================================================================== */
.lbc-carousel {
  display: flex;
  flex-direction: column;
  /* Largura herda do container do Elementor; altura mínima definível no widget
     (vazio = auto → altura pelo conteúdo / proporção da imagem). */
  min-height: var(--lbc-carousel-min-height, auto);
}
.lbc-carousel .carousel-inner { order: 1; flex: 1 1 auto; min-height: 0; }
.lbc-carousel .slider-controls { order: 2; }
.lbc-carousel.lbc-carousel--nav-top .slider-controls { order: 0; margin-top: 0; }

/* O slide e as suas colunas esticam-se à altura disponível — quando há "Altura
   mínima do slider" definida, a imagem passa a respeitar essa altura (cover);
   sem altura definida, isto resolve para a altura do conteúdo (sem efeito). */
.lbc-carousel .carousel-item.active,
.lbc-carousel .carousel-item.carousel-item-next,
.lbc-carousel .carousel-item.carousel-item-prev { height: 100%; }
.lbc-carousel .carousel-item > .container-fluid {
  height: 100%;
  padding: var(--lbc-carousel-slide-padding, 0);
}
.lbc-carousel .carousel-item .row { height: 100%; }

.lbc-carousel .carousel-control-next,
.lbc-carousel .carousel-control-prev,
.lbc-carousel .carousel-control-pause {
  /* anula o position:absolute / inset / opacity do Bootstrap: os botões fluem
     dentro de .slider-controls (flex), para as 4 posições funcionarem */
  position: static;
  inset: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--lbc-space-sm);
  color: var(--lbc-carousel-control-fg);
  background-color: var(--lbc-carousel-control-bg);
  border: var(--lbc-border-width-md) solid var(--lbc-carousel-control-border);
  border-radius: var(--lbc-carousel-control-radius);
  background-image: none;
  font-size: var(--lbc-carousel-control-icon);
  font-weight: var(--lbc-font-weight-semibold);
  height: var(--lbc-carousel-control-size);
  width: var(--lbc-carousel-control-size);
  margin: 0;
  opacity: 1;
  flex: 0 0 auto;
  transition: background-color var(--lbc-transition-fast),
              color var(--lbc-transition-fast),
              border-color var(--lbc-transition-fast),
              box-shadow var(--lbc-transition-fast);
}

.lbc-carousel .carousel-control-next:hover,
.lbc-carousel .carousel-control-prev:hover,
.lbc-carousel .carousel-control-pause:hover {
  color: var(--lbc-carousel-control-fg-hover);
  background-color: var(--lbc-carousel-control-bg-hover);
  border-color: var(--lbc-carousel-control-border-hover);
}

.lbc-carousel .carousel-control-next:focus-visible,
.lbc-carousel .carousel-control-prev:focus-visible,
.lbc-carousel .carousel-control-pause:focus-visible {
  outline: none;
  box-shadow: var(--lbc-focus-ring);
}

/* Tipo de botão das setas — remapeia para o sistema de botões do Tema LBC.
   (mesmo esquema de tokens das variantes .lbc-button.*) */
.lbc-carousel--btn-primary {
  --lbc-carousel-control-fg: var(--lbc-button-fg);
  --lbc-carousel-control-bg: var(--lbc-button-bg);
  --lbc-carousel-control-border: var(--lbc-button-bg);
  --lbc-carousel-control-fg-hover: var(--lbc-button-fg);
  --lbc-carousel-control-bg-hover: var(--lbc-button-bg-hover);
  --lbc-carousel-control-border-hover: var(--lbc-button-bg-hover);
}
.lbc-carousel--btn-secondary {
  --lbc-carousel-control-fg: var(--lbc-color-primary);
  --lbc-carousel-control-bg: transparent;
  --lbc-carousel-control-border: var(--lbc-color-primary);
  --lbc-carousel-control-fg-hover: var(--lbc-color-primary-contrast);
  --lbc-carousel-control-bg-hover: var(--lbc-color-primary);
  --lbc-carousel-control-border-hover: var(--lbc-color-primary);
}
/* Terciário = "link": sem preenchimento; no hover o ícone e o sublinhado passam à
   cor SECUNDÁRIA — igual ao .lbc-button.tertiary (antes enchia o botão a secundário). */
.lbc-carousel--btn-tertiary {
  --lbc-carousel-control-fg: var(--lbc-color-primary);
  --lbc-carousel-control-bg: transparent;
  --lbc-carousel-control-border: transparent;
  --lbc-carousel-control-fg-hover: var(--lbc-color-secondary);
  --lbc-carousel-control-bg-hover: transparent;
  --lbc-carousel-control-border-hover: transparent;
}
.lbc-carousel--btn-tertiary .carousel-control-prev,
.lbc-carousel--btn-tertiary .carousel-control-next,
.lbc-carousel--btn-tertiary .carousel-control-pause {
  position: relative;
}
.lbc-carousel--btn-tertiary .carousel-control-prev::after,
.lbc-carousel--btn-tertiary .carousel-control-next::after,
.lbc-carousel--btn-tertiary .carousel-control-pause::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--lbc-border-width-md);
  background-color: var(--lbc-carousel-control-fg);
  transition: background-color var(--lbc-transition-fast);
}
.lbc-carousel--btn-tertiary .carousel-control-prev:hover::after,
.lbc-carousel--btn-tertiary .carousel-control-next:hover::after,
.lbc-carousel--btn-tertiary .carousel-control-pause:hover::after {
  background-color: var(--lbc-carousel-control-fg-hover);
}
.lbc-carousel--btn-quaternary {
  --lbc-carousel-control-fg: var(--lbc-color-secondary-contrast);
  --lbc-carousel-control-bg: var(--lbc-color-secondary);
  --lbc-carousel-control-border: var(--lbc-color-secondary);
  --lbc-carousel-control-fg-hover: var(--lbc-color-primary-contrast);
  --lbc-carousel-control-bg-hover: var(--lbc-color-primary);
  --lbc-carousel-control-border-hover: var(--lbc-color-primary);
}

.lbc-carousel .carousel-control-prev-icon,
.lbc-carousel .carousel-control-next-icon {
  background-size: var(--lbc-carousel-control-icon);
  width: var(--lbc-carousel-control-icon);
  height: var(--lbc-carousel-control-icon);
}

/* Ícone personalizado (Elementor) dentro dos botões */
.lbc-carousel .carousel-control-prev i,
.lbc-carousel .carousel-control-next i,
.lbc-carousel .carousel-control-prev svg,
.lbc-carousel .carousel-control-next svg {
  width: 1em;
  height: 1em;
  font-size: var(--lbc-carousel-control-icon);
  color: var(--lbc-carousel-control-fg);
  fill: currentColor;
}

.lbc-carousel .container-fluid {
  background: var(--lbc-surface);
  /* largura e espaçamento exterior herdam do container do Elementor onde o
     widget é colocado — sem padding/gutter próprios */
  padding-inline: 0;
}

.lbc-carousel .row {
  --bs-gutter-x: 0;
}

.lbc-carousel .first-column {
  padding: var(--lbc-carousel-info-padding);
  min-width: 0;
}

/* Ícone opcional no botão "Ler mais" do slide (herda de .lbc-button: inline-flex + gap).
   DOM = ícone + texto → "antes do texto" é a ordem natural; "depois" inverte. */
.lbc-carousel .first-column .lbc-button.lbc-slide-btn--icon-right {
  flex-direction: row-reverse;
}

.lbc-carousel .featured-img {
  /* raio dos 4 cantos da imagem (widget); overflow recorta a imagem ao raio */
  border-radius: var(--lbc-carousel-img-radius, 0);
  overflow: hidden;
  /* largura controlável pelo widget; vazio = ocupa toda a coluna */
  width: var(--lbc-carousel-img-width, 100%);
  height: 100%;
  margin-inline: auto;
  border-bottom: var(--lbc-space-xs) solid var(--e-global-color-primary, var(--lbc-color-primary));
}

.lbc-carousel .featured-img img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  /* altura: controlo do widget → altura do slider (se definida) → proporção acima.
     min-height: 100% garante que, com altura de slider definida, a imagem enche
     mesmo a coluna (o aspect-ratio senão limitava-a); sem altura definida,
     resolve para auto e não tem efeito. */
  height: var(--lbc-carousel-img-height, 100%);
  min-height: 100%;
}

.lbc-carousel .carousel-indicators button.active {
  background-color: var(--e-global-color-primary, var(--lbc-color-primary));
}

.lbc-carousel .carousel-indicators {
  position: absolute;
  bottom: var(--lbc-space-2xs);
  right: auto;
  left: auto;
  margin-left: 0;
}

/* Os botões de navegação ficam no mesmo espaço do conteúdo do slide: o recuo é o
   padding do slide + o da zona de texto (lados) e o do slide + --lbc-space-md
   (cima/baixo) — em vez de encostarem à borda do container. */
.lbc-carousel .slider-controls {
  --_nav-pb: calc(var(--lbc-carousel-slide-pb) + var(--lbc-space-md));
  padding-top:    calc(var(--lbc-carousel-slide-pt) + var(--lbc-space-md));
  padding-right:  calc(var(--lbc-carousel-slide-pr) + var(--lbc-carousel-info-pr));
  padding-bottom: var(--_nav-pb);
  padding-left:   calc(var(--lbc-carousel-slide-pl) + var(--lbc-carousel-info-pl));
  position: relative;
  z-index: var(--lbc-z-base);
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  gap: var(--lbc-carousel-control-gap);
  width: auto;
  height: var(--lbc-carousel-control-size);
  margin-top: calc(-1 * var(--lbc-carousel-control-size) - var(--_nav-pb));
  /* alinha ao limite do container do Elementor (sem largura fixa própria) */
  margin-left: 0;
}

@media (min-width: 768px) {
  .lbc-carousel .featured-img {
    border-bottom: none;
  }

  .lbc-carousel .featured-img img {
    aspect-ratio: 16 / 9;
  }
}

/* Navegação em cima — controlos fora da sobreposição do slide */
.lbc-carousel--nav-top .slider-controls {
  margin-top: 0;
  margin-bottom: var(--lbc-space-md);
}

/* Navegação à esquerda / à direita — controlos sobre o slide, centrados na
   vertical, empilhados (prev por cima de next). */
.lbc-carousel--nav-left,
.lbc-carousel--nav-right {
  position: relative;
}
.lbc-carousel--nav-left .slider-controls,
.lbc-carousel--nav-right .slider-controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  align-items: center;
  height: auto;
  width: auto;
  margin: 0;
}
.lbc-carousel--nav-left .slider-controls  { left: 0; }
.lbc-carousel--nav-right .slider-controls { right: 0; left: auto; }

@media (min-width: 1400px) {
  .lbc-carousel .carousel-indicators {
    bottom: var(--lbc-space-lg);
  }
}

/* =============================================================================
   ACORDEÃO  —  .lbc-accordion  (widget LBC Accordion)
   Padrão WAI-ARIA Accordion. Painel colapsado usa o atributo [hidden].
   ========================================================================== */
.lbc-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--lbc-accordion-gap);
}

/* Cada parte tem a SUA borda e o SEU raio (cabeçalho e caixa do descritivo), em vez
   de uma borda única no item. Por defeito a caixa não tem borda em cima — a do
   cabeçalho serve de separador — para o aspeto ser o de um bloco único. */
.lbc-accordion__item {
  border: 0;
}

.lbc-accordion__header {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

/* Estados do cabeçalho (escopo .lbc-accordion para vencer qualquer
   normalização de <button> do Elementor):
     · normal  → fundo branco (--lbc-accordion-header-bg = --lbc-surface)
     · hover   → cor principal (--lbc-color-primary), texto de contraste
     · aberto  → cor principal (aria-expanded="true"), texto de contraste
   Todos editáveis nos separadores Normal / Hover / Ativo do widget. */
.lbc-accordion .lbc-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lbc-space-sm);
  padding: var(--lbc-accordion-header-padding);
  background: var(--lbc-accordion-header-bg);
  color: var(--lbc-accordion-header-fg);
  border-style: solid;
  border-color: var(--lbc-accordion-header-border-color);
  border-width: var(--lbc-accordion-header-border-width);
  border-radius: var(--lbc-accordion-header-radius);
  font: inherit;
  font-weight: var(--lbc-accordion-header-weight);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--lbc-transition-fast),
              color var(--lbc-transition-fast);
}

.lbc-accordion .lbc-accordion__trigger:hover {
  background: var(--lbc-accordion-header-bg-hover);
  color: var(--lbc-accordion-header-fg-hover);
}

/* Depois do :hover e com uma classe extra → o estado "aberto" vence sempre,
   mesmo quando o item aberto também está sob o rato. */
.lbc-accordion .lbc-accordion__trigger[aria-expanded="true"],
.lbc-accordion .lbc-accordion__trigger[aria-expanded="true"]:hover {
  background: var(--lbc-accordion-header-bg-active);
  color: var(--lbc-accordion-header-fg-active);
}

.lbc-accordion__trigger:focus-visible {
  outline: none;
  box-shadow: var(--lbc-focus-ring);
}

.lbc-accordion__icon {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  transition: transform var(--lbc-transition-fast);
}

.lbc-accordion__trigger[aria-expanded="true"] .lbc-accordion__icon {
  transform: rotate(180deg);
}

.lbc-accordion__panel {
  padding: var(--lbc-accordion-panel-padding);
  background: var(--lbc-accordion-panel-bg);
  color: var(--lbc-accordion-panel-fg);
  border-style: solid;
  border-color: var(--lbc-accordion-panel-border-color);
  border-width: var(--lbc-accordion-panel-border-width);
  border-radius: var(--lbc-accordion-panel-radius);
}

.lbc-accordion__panel[hidden] {
  display: none;
}

.lbc-accordion__panel > :first-child { margin-top: 0; }
.lbc-accordion__panel > :last-child  { margin-bottom: 0; }

/* =============================================================================
   SEPARADORES  —  .lbc-tabs  (widget LBC Tabs)
   Padrão WAI-ARIA Tabs. Ativação automática, roving tabindex (via JS).
   ========================================================================== */
.lbc-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  margin: 0 0 var(--lbc-space-md);
  list-style: none;
  border-bottom: var(--lbc-border-width) solid var(--lbc-tabs-border);
}

.lbc-tabs__tab {
  padding: var(--lbc-tab-padding-y) var(--lbc-tab-padding-x);
  background: transparent;
  border: 0;
  border-bottom: var(--lbc-border-width-md) solid transparent;
  margin-bottom: calc(-1 * var(--lbc-border-width));
  font: inherit;
  font-weight: var(--lbc-tab-weight);
  color: var(--lbc-tab-fg);
  cursor: pointer;
  transition: color var(--lbc-transition-fast), border-color var(--lbc-transition-fast);
}

.lbc-tabs__tab:hover {
  color: var(--lbc-tab-fg-active);
}

.lbc-tabs__tab[aria-selected="true"] {
  color: var(--lbc-tab-fg-active);
  border-bottom-color: var(--lbc-tab-indicator);
}

.lbc-tabs__tab:focus-visible {
  outline: none;
  box-shadow: var(--lbc-focus-ring);
}

.lbc-tabs__panel {
  padding: var(--lbc-tabpanel-padding);
}

.lbc-tabs__panel[hidden] {
  display: none;
}

.lbc-tabs__panel > :first-child { margin-top: 0; }
.lbc-tabs__panel > :last-child  { margin-bottom: 0; }

/* Variante vertical */
.lbc-tabs--vertical {
  display: flex;
  gap: var(--lbc-space-lg);
}

.lbc-tabs--vertical .lbc-tabs__list {
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0;
  border-bottom: 0;
  border-inline-start: var(--lbc-border-width) solid var(--lbc-tabs-border);
}

.lbc-tabs--vertical .lbc-tabs__tab {
  border-bottom: 0;
  border-inline-start: var(--lbc-border-width-md) solid transparent;
  margin-bottom: 0;
  margin-inline-start: calc(-1 * var(--lbc-border-width));
}

.lbc-tabs--vertical .lbc-tabs__tab[aria-selected="true"] {
  border-inline-start-color: var(--lbc-tab-indicator);
}

/* =============================================================================
   FORMULÁRIOS  —  estilo base partilhado
   Cobre: Formidable Forms (.frm_forms), Elementor Pro Form (.elementor-field)
   e campos nativos do WordPress. Guiado por tokens --lbc-input-* / --lbc-form-*,
   editáveis em Definições → Tema LBC → Formulários.

   Nota: o Formidable Forms traz uma folha de estilos própria e agressiva; para
   os campos .frm_* usamos !important para garantir que os tokens do tema ganham.
   ========================================================================== */

/* ---- Rótulos: estilo do "texto" base, mas a bold ---- */
.frm_forms .frm_primary_label {
  color: var(--lbc-form-label-color) !important;
  font-family: var(--lbc-input-font-family) !important;
  font-size: var(--lbc-form-label-size) !important;
  font-weight: var(--lbc-form-label-weight) !important;
  line-height: var(--e-global-typography-text-line-height, var(--lbc-line-height-body)) !important;
}
.elementor-field-group > label,
.lbc-form label {
  color: var(--lbc-form-label-color);
  font-family: var(--lbc-input-font-family);
  font-size: var(--lbc-form-label-size);
  font-weight: var(--lbc-form-label-weight);
  line-height: var(--e-global-typography-text-line-height, var(--lbc-line-height-body));
}

/* Indicador de campo obrigatório (asterisco): acompanha a cor do rótulo em vez
   do vermelho por defeito do Formidable (.frm_required) e do Elementor Forms
   (.elementor-mark-required … :after). */
.frm_forms .frm_required,
.frm_forms .frm_primary_label .frm_required {
  color: var(--lbc-form-label-color) !important;
}
.elementor-mark-required .elementor-field-label::after,
.lbc-form .required,
.lbc-form label .required {
  color: var(--lbc-form-label-color) !important;
}

/* ---- Campos de texto / select / textarea ---- */
.frm_forms input[type="text"],
.frm_forms input[type="password"],
.frm_forms input[type="email"],
.frm_forms input[type="number"],
.frm_forms input[type="url"],
.frm_forms input[type="tel"],
.frm_forms input[type="search"],
.frm_forms input[type="date"],
.frm_forms select,
.frm_forms textarea {
  min-height: var(--lbc-input-min-height) !important;
  color: var(--lbc-input-fg) !important;
  background-color: var(--lbc-input-bg) !important;
  font-family: var(--lbc-input-font-family) !important;
  font-size: var(--lbc-input-font-size) !important;
  font-weight: var(--lbc-input-font-weight) !important;
  padding: var(--lbc-input-padding-y) var(--lbc-input-padding-x) !important;
  border-style: solid !important;
  border-width: var(--lbc-input-border-width) !important;
  border-color: var(--lbc-input-border-color) !important;
  border-radius: var(--lbc-input-radius) !important;
}

.elementor-field-group .elementor-field-textual,
.lbc-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.lbc-form select,
.lbc-form textarea {
  min-height: var(--lbc-input-min-height);
  color: var(--lbc-input-fg);
  background-color: var(--lbc-input-bg);
  font-family: var(--lbc-input-font-family);
  font-size: var(--lbc-input-font-size);
  font-weight: var(--lbc-input-font-weight);
  padding: var(--lbc-input-padding-y) var(--lbc-input-padding-x);
  border-style: solid;
  border-width: var(--lbc-input-border-width);
  border-color: var(--lbc-input-border-color);
  border-radius: var(--lbc-input-radius);
}

.frm_forms input:focus,
.frm_forms select:focus,
.frm_forms textarea:focus {
  outline: none !important;
  border-color: var(--lbc-input-border-color-focus) !important;
  box-shadow: var(--lbc-focus-ring) !important;
}
.elementor-field-group .elementor-field-textual:focus,
.lbc-form input:focus,
.lbc-form select:focus,
.lbc-form textarea:focus {
  outline: none;
  border-color: var(--lbc-input-border-color-focus);
  box-shadow: var(--lbc-focus-ring);
}

.frm_forms input::placeholder,
.frm_forms textarea::placeholder {
  color: var(--lbc-text-muted) !important;
  font-family: var(--lbc-form-placeholder-family) !important;
  font-weight: var(--lbc-form-placeholder-weight) !important;
  opacity: 1 !important;
}
.elementor-field-textual::placeholder,
.lbc-form ::placeholder {
  color: var(--lbc-text-muted);
  font-family: var(--lbc-form-placeholder-family);
  font-weight: var(--lbc-form-placeholder-weight);
  opacity: 1;
}

.frm_forms .frm_description,
.elementor-field-group .elementor-field-description,
.lbc-form .description {
  font-size: var(--lbc-form-hint-size);
  color: var(--lbc-text-muted);
}

.frm_forms .frm_checkbox input[type="checkbox"],
.frm_forms .frm_radio input[type="radio"],
.lbc-form input[type="checkbox"],
.lbc-form input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--lbc-color-primary);
}

.frm_forms .frm_checkbox input[type="checkbox"]:focus,
.frm_forms .frm_radio input[type="radio"]:focus,
.lbc-form input[type="checkbox"]:focus,
.lbc-form input[type="radio"]:focus {
  outline: none;
  box-shadow: var(--lbc-focus-ring);
}

/* Estado inválido / campo obrigatório em branco */
.frm_forms .frm_blank_field input,
.frm_forms .frm_blank_field select,
.frm_forms .frm_blank_field textarea {
  border-color: var(--lbc-input-border-color-invalid) !important;
  border-width: var(--lbc-border-width-md) !important;
}
.frm_form_field :invalid,
.lbc-form .has-error input,
.lbc-form input:user-invalid {
  border-color: var(--lbc-input-border-color-invalid);
  border-width: var(--lbc-border-width-md);
}

/* Botão de submissão — usa o estilo do Botão Primário do sistema (.lbc-button.primary) */
.frm_style_formidable-style.with_frm_style .frm_submit .frm_button_submit,
.elementor-field-group .elementor-button[type="submit"],
.lbc-form button[type="submit"],
.lbc-form input[type="submit"] {
  display: inline-flex;
  gap: var(--lbc-button-gap);
  align-items: center;
  justify-content: center;
  padding: var(--lbc-button-padding-y) var(--lbc-button-padding-x);
  color: var(--lbc-button-fg);
  background-color: var(--lbc-button-bg);
  border: var(--lbc-border-width-md) solid var(--lbc-button-bg);
  border-radius: var(--lbc-btn-radius, var(--lbc-button-radius));
  font-family: var(--e-global-typography-text-font-family, var(--lbc-font-body));
  font-size: var(--e-global-typography-text-font-size, var(--lbc-button-font-size));
  font-weight: var(--lbc-button-font-weight);
  line-height: var(--e-global-typography-text-line-height, var(--lbc-line-height-body));
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--lbc-transition-fast),
              color var(--lbc-transition-fast),
              border-color var(--lbc-transition-fast),
              box-shadow var(--lbc-transition-fast);
}

.frm_style_formidable-style.with_frm_style .frm_submit .frm_button_submit:hover,
.elementor-field-group .elementor-button[type="submit"]:hover,
.lbc-form button[type="submit"]:hover,
.lbc-form input[type="submit"]:hover {
  color: var(--lbc-button-fg);
  background-color: var(--lbc-button-bg-hover);
  border-color: var(--lbc-button-bg-hover);
}

.frm_forms .frm_submit .frm_button_submit:focus-visible,
.elementor-field-group .elementor-button[type="submit"]:focus-visible,
.lbc-form button[type="submit"]:focus-visible,
.lbc-form input[type="submit"]:focus-visible {
  outline: none;
  box-shadow: var(--lbc-focus-ring);
}

/* =============================================================================
   PAGINAÇÃO  —  .page-numbers  (loop grid, arquivos, widgets com numeração)
   Círculo com borda fixa de 2px; cor normal/hover/ativo e raio por token.
   Editável por instância (widget) ou globalmente em Definições → Tema LBC.
   ========================================================================== */
.elementor .page-numbers,
.nav-links .page-numbers,
.elementor-pagination .page-numbers,
.e-loop-nav .page-numbers {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--lbc-pagination-size);
  height: var(--lbc-pagination-size);
  margin: 0 var(--lbc-pagination-gap);
  padding: 0;
  border-radius: var(--lbc-pagination-radius);
  border: var(--lbc-pagination-border-width) solid var(--lbc-pagination-border);
  background-color: var(--lbc-pagination-bg);
  color: var(--lbc-pagination-fg);
  text-decoration: none;
  font-weight: var(--lbc-font-weight-medium);
  transition: background-color var(--lbc-transition-base),
              color var(--lbc-transition-base),
              border-color var(--lbc-transition-base);
}

.elementor a.page-numbers:hover,
.nav-links a.page-numbers:hover,
.elementor-pagination a.page-numbers:hover,
.e-loop-nav a.page-numbers:hover {
  background-color: var(--lbc-pagination-bg-hover);
  color: var(--lbc-pagination-fg-hover);
  border-color: var(--lbc-pagination-border-hover);
}

.elementor .page-numbers.current,
.nav-links .page-numbers.current,
.elementor-pagination .page-numbers.current,
.e-loop-nav .page-numbers.current {
  background-color: var(--lbc-pagination-bg-current);
  color: var(--lbc-pagination-fg-current);
  border-color: var(--lbc-pagination-border-current);
}

.elementor .page-numbers:focus-visible,
.nav-links .page-numbers:focus-visible {
  outline: none;
  box-shadow: var(--lbc-focus-ring);
}

/* Setas (prev/next) — ícone opcional via --lbc-pagination-arrow-prev/next */
.elementor .page-numbers.prev,
.elementor .page-numbers.next,
.nav-links .page-numbers.prev,
.nav-links .page-numbers.next {
  font-size: 0;
}

.elementor .page-numbers.prev::before,
.elementor .page-numbers.next::before,
.nav-links .page-numbers.prev::before,
.nav-links .page-numbers.next::before {
  content: "";
  width: 1em;
  height: 1em;
  font-size: var(--lbc-font-size-md);
  background-color: currentColor;
  -webkit-mask: var(--_arrow) center / contain no-repeat;
  mask: var(--_arrow) center / contain no-repeat;
}

.elementor .page-numbers.prev::before,
.nav-links .page-numbers.prev::before {
  --_arrow: var(--lbc-pagination-arrow-prev, url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12 4l-6 6 6 6" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'));
}

.elementor .page-numbers.next::before,
.nav-links .page-numbers.next::before {
  --_arrow: var(--lbc-pagination-arrow-next, url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M8 4l6 6-6 6" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'));
}

/* =============================================================================
   ÍNDICE DE CONTEÚDOS  —  .lbc-toc  (widget LBC Table of Contents)
   A lista é preenchida por assets/js/lbc-widgets.js a partir dos headings.
   ========================================================================== */
.lbc-toc {
  border-radius: var(--lbc-radius-card);
}

.lbc-toc__title {
  margin: 0 0 var(--lbc-space-sm);
}

.lbc-toc__list {
  margin: 0;
  padding: 0 0 0 var(--lbc-toc-indent);
  list-style-position: outside;
}

.lbc-toc__list--none {
  list-style: none;
  padding-left: 0;
}
.lbc-toc__list--unordered { list-style: disc; }
.lbc-toc__list--ordered { list-style: decimal; }

.lbc-toc__item + .lbc-toc__item {
  margin-top: var(--lbc-toc-gap);
}

/* Recuo por NÍVEL ABSOLUTO de heading — diferenciação visual clara e previsível
   (H2 encostado, H3 recuo, H4 recuo adicional, …). Classes emitidas pelo JS. */
.lbc-toc__item--h3 { margin-inline-start: var(--lbc-toc-indent); }
.lbc-toc__item--h4 { margin-inline-start: calc(2 * var(--lbc-toc-indent)); }
.lbc-toc__item--h5 { margin-inline-start: calc(3 * var(--lbc-toc-indent)); }
.lbc-toc__item--h6 { margin-inline-start: calc(4 * var(--lbc-toc-indent)); }

@media (max-width: 480px) {
  /* Ecrãs estreitos: recuo mais contido para não comprimir o texto */
  .lbc-toc__item--h3 { margin-inline-start: calc(0.75 * var(--lbc-toc-indent)); }
  .lbc-toc__item--h4 { margin-inline-start: calc(1.5 * var(--lbc-toc-indent)); }
  .lbc-toc__item--h5 { margin-inline-start: calc(2.25 * var(--lbc-toc-indent)); }
  .lbc-toc__item--h6 { margin-inline-start: calc(3 * var(--lbc-toc-indent)); }
}

.lbc-toc .lbc-toc__list .lbc-toc__link,
.elementor .lbc-toc .lbc-toc__list .lbc-toc__link,
a.lbc-toc__link {
  color: var(--lbc-toc-link);
  line-height: var(--lbc-line-height-normal);
  text-decoration: underline;
  text-decoration-color: var(--lbc-color-accent);
  text-underline-offset: var(--lbc-toc-underline-offset);
  text-decoration-thickness: var(--lbc-border-width-md);
}

.lbc-toc .lbc-toc__list .lbc-toc__link:hover,
.elementor .lbc-toc .lbc-toc__list .lbc-toc__link:hover,
a.lbc-toc__link:hover {
  color: var(--lbc-toc-link-hover);
  text-decoration-thickness: var(--lbc-border-width-lg);
}

.lbc-toc__link:focus-visible {
  outline: none;
  box-shadow: var(--lbc-focus-ring);
}

/* =============================================================================
   LOGÓTIPO ACESSÍVEL  —  .lbc-logo  (widget LBC Accessible Logo)
   ========================================================================== */
.lbc-logo {
  display: inline-flex;
  align-items: center;
}

.lbc-logo__img {
  display: block;
  height: auto;
}

.lbc-logo__img--dark { display: none; }

.lbc-on-dark .lbc-logo__img--light { display: none; }
.lbc-on-dark .lbc-logo__img--dark  { display: block; }

.lbc-logo:focus-visible {
  outline: none;
  box-shadow: var(--lbc-focus-ring);
  border-radius: var(--lbc-radius-xs);
}

/* =============================================================================
   SECÇÃO DE NOTÍCIAS  —  .lbc-news  (widget LBC Secção de Notícias)
   1 destaque em cima + N cartões em baixo. Cartão-ligação com hover.
   ========================================================================== */
.lbc-news {
  display: flex;
  flex-direction: column;
  gap: var(--lbc-news-gap);
}

.lbc-news__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lbc-news-gap);
}

@media (min-width: 768px) {
  .lbc-news__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Cartão */
.lbc-news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--lbc-news-card-bg);
  border: var(--lbc-news-card-border-width) solid var(--lbc-news-card-border);
  border-radius: var(--lbc-news-card-radius);
  overflow: hidden;
  transition: border-color var(--lbc-transition-fast);
}

/* "Altura mínima dos cartões" reflete-se SÓ nos cartões de baixo — o destaque
   tem layout próprio e não deve acompanhar. */
.lbc-news-card--secondary {
  min-height: var(--lbc-news-card-min-h);
}

.lbc-news-card:hover,
.lbc-news-card:focus-within {
  border-color: var(--lbc-news-card-border-hover);
}

.lbc-news-card__media { overflow: hidden; flex-shrink: 0; }

/* A altura vai no CONTENTOR (.__media); a imagem só a preenche. Assim há sempre
   caixa definida para o recorte (object-fit), nenhuma regra `img { height: auto }`
   (base / Elementor) interfere, e a altura reflete-se só na imagem — não estica
   o corpo do cartão. */
/* Especificidade reforçada (0,3,1) + !important em height/max-width/object-fit:
   `img { height: auto }` (base.css), `.elementor img` e o Kit do Elementor têm
   especificidade (0,1,1) e, conforme a ordem de carregamento, anulavam o
   recorte — Cover/Contain deixavam de fazer efeito. */
.lbc-news .lbc-news-card .lbc-news-card__media img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: var(--lbc-news-card-img-fit, cover) !important;
  object-position: var(--lbc-news-card-img-pos, center);
}

/* Altura da imagem — específica por tipo de cartão. A dos cartões de baixo
   (--lbc-news-card-img-h) reflete-se SÓ neles; o destaque usa a sua
   (--lbc-news-feature-img-h). */
.lbc-news-card--secondary .lbc-news-card__media {
  height: var(--lbc-news-card-img-h);
}

.lbc-news-card--feature .lbc-news-card__media {
  height: var(--lbc-news-feature-img-h);
}

@media (min-width: 768px) {
  .lbc-news-card--feature {
    flex-direction: row;
    align-items: flex-start;
  }
  /* Imagem do destaque: largura até ~metade do espaço e altura próprias, ambas
     editáveis (--lbc-news-feature-img-w / --lbc-news-feature-img-h). */
  .lbc-news-card--feature .lbc-news-card__media {
    flex: 0 0 var(--lbc-news-feature-img-w);
    width: var(--lbc-news-feature-img-w);
  }
  .lbc-news-card--feature .lbc-news-card__body {
    flex: 1;
    align-self: center;
  }
}

.lbc-news-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;   /* preenche a altura do cartão (grelha / "altura mínima") */
  gap: var(--lbc-space-xs);
  padding: var(--lbc-news-card-padding);
}

.lbc-news-card__date {
  color: var(--lbc-news-date);
  font-size: var(--lbc-font-size-sm);
}

.lbc-news-card__title {
  margin: 0;
  color: var(--lbc-news-title);
  /* folga suficiente para o sublinhado do hover não colidir com a linha seguinte */
  line-height: var(--lbc-line-height-snug);
}

/* A ligação está APENAS no título — o cartão não é um link esticado. */
.lbc-news-card__link {
  color: inherit;
  text-decoration: none;
}

/* Foco por teclado: o anel do sistema é desenhado à volta do texto do título
   (o próprio link), não do cartão. A cor do título NÃO muda no foco — o
   indicador de estado é a borda do cartão (ver :hover / :focus-within acima). */
.lbc-news-card__link:focus-visible {
  outline: var(--lbc-focus-outline);
  outline-offset: var(--lbc-focus-offset);
  border-radius: var(--lbc-radius-xs);
}

.lbc-news-card.is-underline-hover:hover .lbc-news-card__title,
.lbc-news-card.is-underline-hover:focus-within .lbc-news-card__title {
  text-decoration: underline;
  text-decoration-thickness: var(--lbc-border-width-md);
  text-underline-offset: var(--lbc-news-title-underline-offset);
}

.lbc-news-card__excerpt {
  margin: 0;
  color: var(--lbc-news-excerpt);
}

/* Botão do sistema dentro do cartão — afordância visual apenas (aria-hidden,
   tabindex="-1"); o link real e focável é o <a> do título.
   margin-top: auto → encosta ao fundo do cartão quando há altura a mais
   (grelha de alturas iguais ou "Altura mínima dos cartões"). */
.lbc-news-card__cta {
  align-self: start;
  margin-top: auto;
  padding-top: var(--lbc-space-xs);
}

/* =============================================================================
   VOLTAR AO TOPO  —  .lbc-back-to-top  (widget LBC Back to Top)
   Fixo à viewport, visível em toda a página. O JS (lbc-widgets.js) move o
   widget para o fim do <body> para escapar a ancestrais com transform
   (ex.: footer do Elementor) que prendem position:fixed.
   ========================================================================== */
.lbc-back-to-top {
  position: fixed;
  bottom: var(--lbc-b2t-offset);
  z-index: var(--lbc-b2t-z);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lbc-space-2xs);
  min-width: var(--lbc-b2t-size);
  height: var(--lbc-b2t-size);
  padding: 0 var(--lbc-space-sm);
  color: var(--lbc-b2t-fg);
  background-color: var(--lbc-b2t-bg);
  border: var(--lbc-border-width-md) solid var(--lbc-b2t-border);
  border-radius: var(--lbc-b2t-radius);
  cursor: pointer;
  opacity: 0;
  transform: translateY(var(--lbc-space-md));
  transition: opacity var(--lbc-transition-base),
              transform var(--lbc-transition-base),
              background-color var(--lbc-transition-fast),
              color var(--lbc-transition-fast),
              border-color var(--lbc-transition-fast);
}

.lbc-back-to-top--right { right: var(--lbc-b2t-offset); }
.lbc-back-to-top--left  { left: var(--lbc-b2t-offset); }

.lbc-back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.lbc-back-to-top:hover,
.lbc-back-to-top:focus-visible {
  color: var(--lbc-b2t-fg-hover);
  background-color: var(--lbc-b2t-bg-hover);
  border-color: var(--lbc-b2t-border-hover);
}

.lbc-back-to-top:focus-visible {
  outline: none;
  box-shadow: var(--lbc-focus-ring);
}

.lbc-back-to-top svg,
.lbc-back-to-top i {
  width: 1em;
  height: 1em;
  font-size: var(--lbc-font-size-md);
  fill: currentColor;
}

.lbc-back-to-top__text {
  font-size: var(--lbc-font-size-sm);
  font-weight: var(--lbc-font-weight-semibold);
}

/* No editor do Elementor mostra sempre o botão para ser selecionável */
.elementor-editor-active .lbc-back-to-top {
  position: relative;
  inset: auto;
  opacity: 1;
  transform: none;
}

/* =============================================================================
   BARRA DE PROGRESSO DE LEITURA  —  .lbc-progress  (widget LBC Progress Bar)
   Linha fina fixa que enche conforme o scroll da página. Cor e espessura por
   token. Posicionamento:
     · o JS move o widget para o fim do <body> → escapa a ancestrais com
       transform/filter (ex.: header ou footer do Elementor) que "prendem"
       position: fixed e criam um stacking context onde a barra ficava presa;
     · z-index = --lbc-progress-z (acima de qualquer header/sticky, mesmo de
       terceiros com z-index: 9999) → fica sempre visualmente por cima do header;
     · isolation: isolate → stacking context próprio, previsível em qualquer
       container do header.
   ========================================================================== */
.lbc-progress {
  position: fixed;
  left: 0;
  right: 0;
  height: var(--lbc-progress-thickness);
  background: var(--lbc-progress-track);
  z-index: var(--lbc-progress-z);
  isolation: isolate;
  pointer-events: none;
}

.lbc-progress--top    { top: 0; }
.lbc-progress--bottom { bottom: 0; }

.lbc-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--lbc-progress-fill);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 100ms linear;
}

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

.elementor-editor-active .lbc-progress {
  position: relative;
}
.elementor-editor-active .lbc-progress .lbc-progress__bar {
  transform: scaleX(0.4);
}

/* =============================================================================
   DATA DE ATUALIZAÇÃO  —  .lbc-updated-date  (widget LBC Data de Atualização)
   ========================================================================== */
.lbc-updated-date {
  margin: 0;
  color: var(--lbc-updated-date-color, var(--lbc-text-muted));
  font-size: var(--lbc-font-size-sm);
}

.lbc-updated-date__label {
  /* O peso do descritivo é controlado pelo interruptor "Descritivo a bold" do
     widget (aplica font-weight: 700 quando ligado). Sem hardcode aqui — quando
     o interruptor está desligado o descritivo herda o peso normal do sistema
     (ou o da tipografia definida no widget). */
  font-weight: inherit;
}

.lbc-updated-date time {
  color: inherit;
}