/* Arena B3 v2 — Tema conforme layout recebido (SITE@B3-1400X3000px)
   Paleta extraida do mockup:
     royal   #1818B7  (header links/logo, secao A#ArenaB3, card bilheteria, footer)
     salmao  #F5BB94  (titulo A#ArenaB3, card endereco)
     claro   #DDE9F6  (fundo secao Programacao)
     navy    #0A0349  (titulos escuros, fundo Informacoes)
   Aplicado somente no staging (overlay sobre o build compilado). */

/* ============ 1. HEADER branco com menu horizontal ============ */

app-navbar nav.navbar {
  background: #fff !important;
  box-shadow: 0 1px 6px rgba(10, 3, 73, 0.08);
}

/* tagline "Ministerio da Cultura e B3 apresentam" nao existe no mockup */
.navbar .col.text-center::before {
  content: none !important;
}

/* hamburguer: icone azul sobre fundo branco (mobile) */
app-navbar app-menu svg,
app-navbar app-menu svg path {
  fill: #1818B7;
}

/* logo branco recolorido para royal via mask (cor exata) */
app-navbar .col.text-center a[title] app-image {
  display: inline-block;
  position: relative;
  width: 198.5px;
  height: 63px;
}

app-navbar .col.text-center a[title] app-image img {
  opacity: 0;
}

app-navbar .col.text-center a[title] app-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #1818B7;
  -webkit-mask: url("assets/images/arena-b3-logo.png") center / contain no-repeat;
  mask: url("assets/images/arena-b3-logo.png") center / contain no-repeat;
}

/* menu horizontal (injetado por v2-header.js) */
.ab3-v2-hnav {
  display: none;
  align-items: center;
  gap: 1.5rem;
}

.ab3-v2-hnav a.ab3-v2-hnav__link {
  color: #1818B7;
  font-family: Mulish, sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.ab3-v2-hnav a.ab3-v2-hnav__link:hover,
.ab3-v2-hnav a.ab3-v2-hnav__link:focus {
  text-decoration: underline;
  color: #0A0349;
}

.ab3-v2-hnav .ab3-v2-hnav__insta {
  display: inline-block;
  width: 22px;
  height: 22px;
  background: #1818B7;
  -webkit-mask: url("assets/images/social/instagram.png") center / contain no-repeat;
  mask: url("assets/images/social/instagram.png") center / contain no-repeat;
}

.ab3-v2-hnav a.ab3-v2-hnav__tickets {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1rem;
  border: 2px solid #1818B7;
  border-radius: 999px;
  background: #1818B7 !important;
  color: #fff !important;
  font-family: Mulish, sans-serif;
  font-size: 0.875rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ab3-v2-hnav a.ab3-v2-hnav__tickets:hover,
.ab3-v2-hnav a.ab3-v2-hnav__tickets:focus {
  background: #0A0349 !important;
  border-color: #0A0349;
  color: #fff !important;
  text-decoration: none;
}

@media (min-width: 992px) {
  .ab3-v2-hnav {
    display: flex;
    /* Bootstrap aplica ".row > *{ width:100%; flex-shrink:0; max-width:100% }"
       em QUALQUER filho direto do .row, mesmo sem classe .col (regra usada
       pelo grid do Bootstrap 5). Sem este reset o nav injetado herdava
       width:100% da .row inteira e "vazava" para a direita.
       IMPORTANTE: um margin:auto sozinho no nav (ou so na logo) NUNCA
       elimina de fato a sobra de espaco a direita — auto-margin em flex so
       reparte o espaco livre nas MARGENS do proprio item; com so um vizinho
       de um lado (a logo), metade desse espaco livre sempre sobra depois do
       nav. A solucao correta e o nav ocupar 100% do espaco restante
       (flex:1) e centralizar o CONTEUDO dele (os links) com
       justify-content, em vez de tentar centralizar a caixa do nav via
       margin. */
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  /* esconde hamburguer no desktop; logo alinhado a esquerda */
  app-navbar nav.navbar .row > .col-2 {
    display: none !important;
  }

  app-navbar nav.navbar .row > .col.text-center {
    flex: 0 0 auto;
    width: auto;
    text-align: left !important;
  }

  app-navbar nav.navbar .row {
    flex-wrap: nowrap;
  }
}

/* ============ 2. Ordem das secoes (home e footer) ============ */
/* Mockup: hero -> A#ArenaB3 -> Programacao | footer: mapa -> Informacoes -> sponsors */

app-home {
  display: flex;
  flex-direction: column;
}

app-home > app-carousel { order: 1; }
app-home > app-description { order: 2; }
app-home > app-agenda { order: 3; }

app-footer {
  display: flex;
  flex-direction: column;
}

app-footer > app-map { order: 1; }
app-footer > app-info-box { order: 2; }
app-footer > app-sponsor { order: 3; }
app-footer > footer { order: 4; }

/* ============ 2b. Hero: video do YouTube no cabecalho ============ */

app-home app-carousel {
  display: none;
}

/* O video foi produzido em 1910x588; o player do YouTube e 16:9 com tarjas.
   O wrapper usa a proporcao real do conteudo e corta as tarjas do iframe. */
#ab3-v2-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1910 / 588;
  overflow: hidden;
  background: #0A0349;
}

#ab3-v2-hero iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;
  border: 0;
  pointer-events: none;
}

/* ============ 3. Secao "A #ArenaB3" (description) em azul royal ============ */

app-description section.description {
  background: #1818B7;
  padding-top: 40px !important;
  overflow: visible;
}

app-description section.description .row,
app-description section.description .row > [class*="col"] {
  overflow: visible;
}

/* sem foto: fica so o colchete com o titulo (mockup) */
app-description section.description app-image {
  display: none;
}

/* Moldura QUADRADA (1:1) de colchetes, com o titulo sobreposto ao centro —
   referencia: card "Emprestimo de Ativos" enviado pela cliente. Ajuste do
   cliente: colchete estava fino/grande demais perto do da logo do header —
   engrossado (borda maior) e reduzido, faixa azul mais baixa.

   Nova rodada: cliente pediu para troca o colchete RETO (duas barras em
   CSS puro) por uma arte de linha ONDULADA/serpenteada (squiggle), no
   mesmo estilo do motivo usado na peca de marca B3 "MUITO MAIS QUE A
   BOLSA DO BRASIL" (linha rosa flanqueando o texto). A arte fornecida
   (public/assets/images/v2/bracket-wave.png) e uma mascara branca/alpha
   com as DUAS colunas onduladas (abre a esquerda, fecha a direita) e vao
   vazio no meio — quase quadrada (900x887), por isso mantem o mesmo
   aspect-ratio:1/1 do colchete antigo sem distorcer. Recolorida via
   mask-image + background-color (mesma tecnica ja usada pra recolorir o
   logo do header), preservando o alpha original da mascara. */
/* Fonte oficial B3 pro titulo "Arte e Cultura..." dentro do colchete —
   arquivo real (peso Black/900), sem sintetizar bold via stroke. Mesma
   familia usada na peca de marca "MUITO MAIS QUE A BOLSA DO BRASIL" que
   serviu de referencia visual pro colchete ondulado. */
@font-face {
  font-family: 'B3 Sans Text';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/b3-sans-text/B3SansText-Black.woff2') format('woff2');
}

.ab3-v2-bracket {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  width: min(100%, clamp(260px, 30vw, 420px));
  margin: 0.5rem auto;
  overflow: visible;
  container-type: inline-size;
}

.ab3-v2-bracket__art {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* colchete rosa (cor original, cliente pediu de volta 31/07 tarde) */
  background-color: #EE92DF;
  -webkit-mask: url("assets/images/v2/bracket-wave.png") center / 100% 100% no-repeat;
  mask: url("assets/images/v2/bracket-wave.png") center / 100% 100% no-repeat;
}

/* Layout: colchetes emolduram so "SOMOS"; "ARTE"/"CULTURA" cruzam a onda
   da direita. Texto left-aligned, branco (cliente pediu de volta 31/07
   tarde — so a cor mudou, tamanho e overflow ficaram bons). A mascara tem
   gap interno ~27%-73% da largura; left:18% puxa o "S" um pouco mais
   pra esquerda (pedido cliente 31/07: "trazer um pouquinho mais para
   ca"), quase junto da onda, com ARTE/CULTURA cruzando a onda direita. */
.ab3-v2-bracket .description-title {
  position: absolute;
  left: 18%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: max-content;
  max-width: none;
  text-align: left;
  margin: 0;
  padding: 0;
  white-space: pre-line;
  color: #fff !important;
  font-family: 'B3 Sans Text', Mulish, sans-serif;
  font-weight: 900 !important;
  font-size: clamp(2.1rem, 15cqi, 4.5rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em;
}

@media (max-width: 991.98px) {
  .ab3-v2-bracket .description-title {
    font-size: clamp(1.85rem, 16cqi, 3rem) !important;
  }
}

@media (min-width: 992px) {
  /* Colchete a esquerda, paragrafo a direita.
     O titulo (ARTE/CULTURA) transborda o colchete de proposito — a coluna
     da direita precisa de padding-left suficiente pra nao sobrepor
     (regressao 04/08 com 42%/50% + 0.5rem). Mantemos respiro curto, sem
     colisao. */
  app-description section.description .row {
    gap: 0;
    align-items: center;
  }

  app-description section.description .row > div:first-child {
    width: 48%;
    flex: 0 0 48%;
    overflow: visible;
    z-index: 2;
  }

  app-description section.description .row > div:last-child {
    width: 52%;
    flex: 0 0 52%;
    padding-left: clamp(2rem, 4vw, 3.5rem);
    position: relative;
    z-index: 1;
  }
}

app-description section.description .ab3-v2-bracket .description-title {
  color: #fff !important;
}

/* cliente pediu letra maior no paragrafo (31/07 tarde) — estava herdando
   1rem/16px do build, pequeno perto do titulo do colchete. */
app-description section.description p.text-dark {
  color: #fff !important;
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem) !important;
  line-height: 1.5 !important;
}

app-description section.description app-link a {
  color: #fff !important;
  border-color: #fff !important;
}

app-description section.description app-link a:hover {
  background: #fff !important;
  color: #1818B7 !important;
}

/* ============ 4. Programacao (home + pagina) em azul claro ============ */

app-home app-agenda section.agenda,
app-agenda section.agenda {
  background: #DDE9F6 !important;
  background-image: none !important;
}

app-home app-agenda section.agenda .agenda-content,
app-agenda section.agenda .agenda-content {
  background: none !important;
  background-image: none !important;
}

app-home app-agenda section.agenda .section-title,
app-agenda section.agenda .section-title {
  color: #1818B7 !important;
  font-weight: 800 !important;
}

app-home app-agenda section.agenda .btn-agenda a,
app-agenda section.agenda .btn-agenda a {
  color: #1818B7 !important;
  border-color: #1818B7 !important;
}

app-home app-agenda section.agenda .btn-agenda a:hover,
app-agenda section.agenda .btn-agenda a:hover {
  background: #1818B7 !important;
  color: #fff !important;
}

/* ============ 5. INFORMACOES: fundo navy + cards coloridos ============ */

app-footer app-info-box section.info-box {
  background: #0A0349;
  padding: 3.5rem 0 4rem;
}

/* titulo injetado por v2-header.js */
.ab3-v2-info-title {
  color: #fff;
  font-family: Mulish, sans-serif;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 2.25rem;
}

app-footer app-info-box section.info-box .row > div[role="listitem"] {
  border-radius: 0.75rem;
  padding: 2rem 1.5rem;
  margin: 0.75rem 0;
}

@media (min-width: 992px) {
  app-footer app-info-box section.info-box .row {
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: nowrap;
  }

  app-footer app-info-box section.info-box .row > div[role="listitem"] {
    flex: 1 1 0;
    width: auto;
    max-width: 360px;
  }
}

/* card 1: ENDERECO — salmao */
app-footer app-info-box section.info-box .row > div[role="listitem"]:nth-child(1) {
  background: #F5BB94;
}

app-footer app-info-box section.info-box .row > div[role="listitem"]:nth-child(1) p.text-primary {
  color: #0A0349 !important;
}

app-footer app-info-box section.info-box .row > div[role="listitem"]:nth-child(1) p.text-dark {
  color: #1818B7 !important;
}

app-footer app-info-box section.info-box .row > div[role="listitem"]:nth-child(1) app-link a {
  color: #0A0349 !important;
  border-color: #0A0349 !important;
}

app-footer app-info-box section.info-box .row > div[role="listitem"]:nth-child(1) app-link a:hover {
  background: #0A0349 !important;
  color: #fff !important;
}

/* card 2: BILHETERIA/TOTEM — azul royal */
app-footer app-info-box section.info-box .row > div[role="listitem"]:nth-child(2) {
  background: #1818B7;
}

app-footer app-info-box section.info-box .row > div[role="listitem"]:nth-child(2) p.text-primary,
app-footer app-info-box section.info-box .row > div[role="listitem"]:nth-child(2) p.text-dark {
  color: #fff !important;
}

/* Pedido cliente 04/08: "19h" na mesma linha do horario (nao quebrar sozinho). */
@media (min-width: 992px) {
  app-footer app-info-box section.info-box .row > div[role="listitem"]:nth-child(2) p.text-dark {
    white-space: nowrap;
  }
}

/* card 3: CONTATOS — branco */
app-footer app-info-box section.info-box .row > div[role="listitem"]:nth-child(3) {
  background: #fff;
}

app-footer app-info-box section.info-box .row > div[role="listitem"]:nth-child(3) p.text-primary {
  color: #1818B7 !important;
}

app-footer app-info-box section.info-box .row > div[role="listitem"]:nth-child(3) p.text-dark {
  color: #0A0349 !important;
}

/* ============ 6. Mapa full-width ============ */

app-footer app-map section.map .container {
  max-width: 100%;
  padding: 0;
}

app-footer app-map section.map iframe {
  width: 100%;
  min-height: 420px;
  display: block;
}

/* ============ 7. Footer branco estilo BTG Pactual Hall ============ */

app-footer > footer {
  background: #fff !important;
  color: #1818B7;
  border-top: 1px solid rgba(24, 24, 183, 0.12);
}

.ab3-v2-footer-layout {
  width: 100%;
  padding: 2.5rem 1.25rem 1.5rem;
  font-family: Mulish, sans-serif;
}

.ab3-v2-footer-layout__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .ab3-v2-footer-layout__inner {
    grid-template-columns: repeat(2, 1fr);
  }

  /* No tablet, cadastro ocupa a linha inteira abaixo de logo + institucional */
  .ab3-v2-footer-layout__col--newsletter {
    grid-column: 1 / -1;
    max-width: 28rem;
  }
}

@media (min-width: 992px) {
  /* logo + institucional + cadastro (newsletter) */
  .ab3-v2-footer-layout__inner {
    grid-template-columns: 1fr 1.1fr 1.4fr;
    align-items: start;
  }

  .ab3-v2-footer-layout__col--newsletter {
    grid-column: auto;
    max-width: none;
  }
}

.ab3-v2-footer-layout__col--newsletter {
  scroll-margin-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
  .ab3-v2-footer-layout__col--newsletter {
    scroll-margin-top: 72px;
  }
}

.ab3-v2-newsletter__intro {
  margin: 0 0 1rem;
  max-width: 22rem;
}

.ab3-v2-newsletter__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 22rem;
}

.ab3-v2-newsletter__field input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(24, 24, 183, 0.22);
  border-radius: 4px;
  background: #fff;
  color: #0A0349;
  font-family: Mulish, sans-serif;
  font-size: 0.9375rem;
}

.ab3-v2-newsletter__field input:focus {
  outline: 2px solid rgba(24, 24, 183, 0.35);
  outline-offset: 1px;
  border-color: #1818B7;
}

.ab3-v2-newsletter__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ab3-v2-newsletter__consent {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ab3-v2-newsletter__consent-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: #0A0349;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
}

.ab3-v2-newsletter__consent-label input {
  margin-top: 0.15rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  accent-color: #1818B7;
}

.ab3-v2-newsletter__help {
  margin: 0;
  padding-left: 1.5rem;
  color: #5c6380;
  font-size: 0.6875rem;
  line-height: 1.45;
}

.ab3-v2-newsletter__help a {
  color: #1818B7;
  font-weight: 700;
}

.ab3-v2-newsletter__submit {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: 4px;
  background: #1818B7;
  color: #fff;
  font-family: Mulish, sans-serif;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.ab3-v2-newsletter__submit:hover:not(:disabled) {
  background: #12129a;
}

.ab3-v2-newsletter__submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ab3-v2-newsletter__status {
  min-height: 1.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
}

.ab3-v2-newsletter__status.is-success {
  color: #0f7a3a;
}

.ab3-v2-newsletter__status.is-error {
  color: #b42318;
}

.ab3-v2-footer-layout__col--logo {
  display: flex;
  align-items: flex-start;
}

.ab3-v2-footer-layout__logo {
  height: 48px;
  width: auto;
  filter: brightness(0) saturate(100%) invert(12%) sepia(98%) saturate(7492%) hue-rotate(246deg) brightness(88%) contrast(101%);
}

.ab3-v2-footer-layout__heading {
  margin: 0 0 0.75rem;
  color: #1818B7;
  font-size: 0.9375rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ab3-v2-footer-layout__text {
  margin: 0;
  color: #0A0349;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.ab3-v2-footer-layout nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ab3-v2-footer-layout__link {
  color: #1818B7;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}

.ab3-v2-footer-layout__link:hover {
  text-decoration: underline;
}

.ab3-v2-footer-layout__link[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.ab3-v2-footer-layout__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(24, 24, 183, 0.2);
  border-radius: 50%;
}

.ab3-v2-footer-layout__bottom {
  max-width: 1200px;
  margin: 1.5rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(24, 24, 183, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.ab3-v2-footer-layout__copyright {
  margin: 0;
  color: #6c757d;
  font-size: 0.8125rem;
}

.ab3-v2-footer-layout__credit {
  color: #1818B7;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}

.ab3-v2-footer-layout__credit:hover {
  text-decoration: underline;
}

/* Esconde nav legado duplicado no footer nativo */
.ab3-v2-footer-shell > .container > .row:first-child,
.ab3-v2-footer-shell .ab3-v2-fnav {
  display: none !important;
}

/* Mantem seletor de idioma e acessibilidade visiveis */
.ab3-v2-footer-shell > .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem 1.5rem;
}

.ab3-v2-footer-shell > .container,
.ab3-v2-footer-shell > .container * {
  color: #1818B7;
}

/* Faixa inferior (copyright + redes + m2.br): pedido do cliente pra deixar
   em branco, como no site do BTG Pactual Hall (era a unica faixa navy
   sobrevivente do tema antigo, destoando do resto do footer branco novo).
   Instagram/m2.br sao PNGs brancos on-transparent (feitos pro fundo navy
   antigo) — recolorido pra royal via mask-image (mesma tecnica do logo do
   header), preservando a arte original sem precisar de asset novo. */
app-footer footer .bg-primary.py-4 {
  background: #fff !important;
  border-top: 1px solid #e7e9f5;
}

app-footer footer .bg-primary.py-4 .text-light {
  color: #1818B7 !important;
}

app-footer footer .bg-primary.py-4 app-social img,
app-footer footer .bg-primary.py-4 p app-image-link img {
  opacity: 0;
}

app-footer footer .bg-primary.py-4 app-social app-image {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
}

app-footer footer .bg-primary.py-4 app-social app-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #1818B7;
  -webkit-mask: url("assets/images/social/instagram.png") center / contain no-repeat;
  mask: url("assets/images/social/instagram.png") center / contain no-repeat;
}

app-footer footer .bg-primary.py-4 p app-image-link app-image {
  display: inline-block;
  position: relative;
  width: 72px;
  height: 35px;
}

app-footer footer .bg-primary.py-4 p app-image-link app-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #1818B7;
  -webkit-mask: url("assets/images/m2br-agencia.png") center / contain no-repeat;
  mask: url("assets/images/m2br-agencia.png") center / contain no-repeat;
}

/* Mapa + Informacoes so em Home e /contato */
body.ab3-v2-hide-footer-info app-footer > app-map,
body.ab3-v2-hide-footer-info app-footer > app-info-box {
  display: none !important;
}

/* Galeria oculta em /a-arena ate fragment #galeria */
app-gallery {
  display: none !important;
}

body.ab3-v2-show-gallery app-gallery {
  display: block !important;
}

/* Galeria como "pagina" propria (pedido/erro de link 05/08): ao abrir
   #/a-arena#galeria, esconde Quem somos / Infraestrutura / Acessibilidade
   pra o menu nao parecer que caiu na pagina errada.
   IMPORTANTE: app-gallery vive DENTRO de app-arena — nao esconder o host
   (senao a grade some com height 0 mesmo com display:block no filho). */
body.ab3-v2-show-gallery app-arena > .section-wrapper,
body.ab3-v2-show-gallery app-arena > section#estrutura,
body.ab3-v2-show-gallery app-arena > #ab3-a11y-content,
body.ab3-v2-show-gallery app-structure {
  display: none !important;
}

body.ab3-v2-show-gallery app-arena > section#galeria {
  display: block !important;
}

/* Menos vazio sob o titulo GALERIA DE FOTOS (linha vermelha do cliente). */
body.ab3-v2-show-gallery app-gallery .gallery .section-title {
  margin-top: 1.25rem !important;
  margin-bottom: 1.5rem !important;
}

/* Imprensa em /contato */
.ab3-v2-imprensa-title {
  color: #1818B7;
  font-family: Mulish, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 1rem;
  scroll-margin-top: 96px;
}

.ab3-v2-imprensa {
  scroll-margin-top: 96px;
}

/* Imprensa: evita vao enorme entre o bloco PUB e o mapa (coluna vazia
   do layout Angular + min-height nativo). */
body.ab3-v2-show-imprensa app-contact section.contact {
  min-height: 0 !important;
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

body.ab3-v2-show-imprensa app-contact .row {
  align-items: flex-start !important;
}

/* Imprensa / Como Chegar / FAQ "cada um em uma pagina" (pedido do cliente):
   os 3 itens de menu apontam para /contato com fragments proprios; sem
   rotas novas disponiveis (SPA compilada, sem source Angular), o efeito de
   pagina separada e obtido escondendo os 2 blocos que nao correspondem ao
   fragment ativo — so um dos 3 fica visivel por vez, em vez de stackados.
   Classes no body setadas por ensureRouteClasses() (v2-header.js). */
app-contact section.contact,
#como-chegar,
#faq {
  display: none !important;
}

body.ab3-v2-show-imprensa app-contact section.contact {
  display: block !important;
}

body.ab3-v2-show-como-chegar #como-chegar {
  display: block !important;
}

/* Como Chegar ja tem mapa proprio (v2-sections.js) — esconde o app-map
   nativo do footer pra nao duplicar (pedido cliente 04/08). */
body.ab3-v2-show-como-chegar app-footer > app-map {
  display: none !important;
}

body.ab3-v2-show-faq #faq {
  display: block !important;
}

.ab3-v2-imprensa .text-primary,
app-contact .ab3-v2-imprensa p.text-primary {
  color: #1818B7 !important;
  font-weight: 800 !important;
}

app-contact .ab3-v2-imprensa p.text-dark {
  color: #0A0349 !important;
}

/* Titulos de secao em bold consistente */
app-structure .section-title,
app-gallery .gallery .section-title,
.ab3-v2-info-title,
.ab3-v2-quemsomos-title,
.ab3-v2-imprensa-title,
.ab3-v2-section__title {
  font-weight: 800 !important;
}

/* Respiro horizontal entre logos de patrocinadores */
app-footer app-sponsor section.sponsor .row {
  gap: 2rem 2.5rem !important;
  justify-content: center !important;
}

app-footer app-sponsor section.sponsor .row > div {
  margin: 0 !important;
}

app-footer app-sponsor section.sponsor img {
  margin: 0 0.75rem !important;
}

/* Footer legado (substituido) — mantido para referencia */
.ab3-v2-fnav {
  display: none !important;
}

/* ============ 8. Quem Somos (/a-arena): Estrutura e Galeria ============ */
/* Essas duas secoes ainda usavam o azul legado (#002C63, tema Bootstrap
   original) e uma imagem de fundo escura (arena-bg.jpg) de antes do
   rebranding v2. Migradas para a paleta atual: royal #1818B7 / navy #0A0349. */

app-structure .text-primary {
  color: #1818B7 !important;
}

app-structure .border-primary {
  border-color: #1818B7 !important;
}

app-structure .btn-outline-primary {
  --bs-btn-color: #1818B7;
  --bs-btn-border-color: #1818B7;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1818B7;
  --bs-btn-hover-border-color: #1818B7;
  --bs-btn-focus-shadow-rgb: 24, 24, 183;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1818B7;
  --bs-btn-active-border-color: #1818B7;
}

/* Abas Terreo/Andar Arena vinham com cores diferentes entre si (o preenchido
   usava o azul legado #002C63 do Bootstrap, so a borda usava o royal) —
   forcado direto pra garantir a MESMA cor (royal) nos dois estados. */
app-structure .nav-tabs .nav-link {
  color: #1818B7 !important;
  background-color: #fff !important;
  border-color: #1818B7 !important;
}

app-structure .nav-tabs .nav-link.active {
  color: #fff !important;
  background-color: #1818B7 !important;
  border-color: #1818B7 !important;
}

/* Pedido cliente 05/08: "alinhar Terreo com texto". As abas ficam soltas
   no .row (margin negativa do gutter Bootstrap), enquanto o texto vive
   dentro de .col-lg-4 com padding-left de 12px — Terreo ficava ~12px a
   esquerda do paragrafo. Compensa com o mesmo half-gutter. */
app-structure .structure-content > .container > .row > ul.nav-tabs {
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5) !important;
  margin-left: 0 !important;
  border-bottom: 0 !important;
}

/* Reduz o vao entre as abas e o conteudo (lista + foto), pra foto ficar
   mais "colada" nos botoes. */
app-structure .structure-content .mt-3 {
  margin-top: 0.5rem !important;
}

/* Pedido cliente 05/08: galeria/carrossel da Infraestrutura comeca na
   mesma altura do titulo (nao abaixo das abas + texto). Em desktop,
   grid no .container + display:contents nos wrappers Bootstrap/ngbNav
   faz col-lg-8 ocupar a coluna direita desde a linha do titulo. */
@media (min-width: 992px) {
  app-structure .structure-content > .container {
    display: grid;
    grid-template-columns: minmax(0, 33.333%) minmax(0, 66.666%);
    grid-template-areas:
      "title gallery"
      "tabs gallery"
      "content gallery";
    column-gap: var(--bs-gutter-x, 1.5rem);
    align-items: start;
  }

  app-structure .structure-content > .container > .row,
  app-structure .structure-content > .container > .row > .mt-3,
  app-structure .structure-content .tab-pane.active,
  app-structure .structure-content .tab-pane.active > .row {
    display: contents;
  }

  app-structure .structure-content .section-title {
    grid-area: title;
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
  }

  app-structure .structure-content > .container > .row > ul.nav-tabs {
    grid-area: tabs;
    align-self: start;
  }

  app-structure .structure-content .tab-pane.active .col-lg-4 {
    grid-area: content;
    align-self: start;
    flex: none;
    width: auto;
    max-width: none;
  }

  app-structure .structure-content .tab-pane.active .col-lg-8 {
    grid-area: gallery;
    grid-row: 1 / -1;
    align-self: start;
    flex: none;
    width: auto;
    max-width: none;
  }
}

/* Fallback mobile/tablet: texto e foto empilhados, topo alinhado. */
app-structure .structure-content .tab-content .row,
app-structure .structure-content .tab-pane.active > .row {
  align-items: flex-start !important;
}

/* Titulo "INFRAESTRUTURA" justificado a esquerda (pedido do cliente; vinha
   centralizado via .text-center do Bootstrap). */
app-structure .structure-content .section-title {
  text-align: left !important;
}

/* Pedido cliente 06/08: respiro entre a faixa navy (Quem Somos) e o titulo
   Infraestrutura — evita sensacao de palavra/secao colada no bloco de cima. */
app-arena > section#estrutura {
  padding-top: 2.5rem !important;
}

/* Lista de bullets (Lounge de Entrada, etc.) trocada por paragrafo + specs
   "Label: valor" (conteudo vem de patches/structure.patch.json via
   STRUCTURE.tabs[].text; decoracao do <strong> e feita em runtime por
   ensureStructureSpecs() em v2-header.js). Remove o bullet nativo e da
   tratamento visual distinto pro paragrafo (1a linha) vs. specs (demais). */
app-structure .structure-content ul.text-dark {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

app-structure .structure-content ul.text-dark li.ab3-v2-structure-lead {
  color: #212529;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

app-structure .structure-content ul.text-dark li.ab3-v2-structure-spec {
  color: #212529;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

app-structure .structure-content ul.text-dark li.ab3-v2-structure-spec strong {
  color: #1818B7;
}

/* ---- Institucional (topo da /a-arena): pedido do cliente foi replicar a
   MESMA diagramacao usada na secao "Acessibilidade" (public/a11y-content.css)
   nessa mesma pagina — fundo cinza claro com "selo" de borda superior royal,
   titulo alinhado a ESQUERDA (sem linha divisoria) e paragrafos em cinza
   escuro (nao mais azul/bold), com a mesma largura maxima de leitura
   (960px). Mantem a pequena GRADE de 4 fotos no rodape do bloco (reaproveita
   as fotos do carrossel institucional, sem o carrossel grande/deslizante
   nem a logo). Zera o padding-top nativo pra o titulo ficar coladinho no
   topo. */
app-arena section#institucional {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
  background: #f8f9fa;
  border-top: 4px solid #1818B7;
}

app-arena #institucional .col-lg-4 > div.mb-4.text-center {
  display: none !important;
}

app-arena #institucional .col-lg-4 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Apontamento do cliente: o bloco de texto (titulo + paragrafos) tinha uma
   margem direita/esquerda MAIOR que a fileira de 4 fotos abaixo — larguras
   desalinhadas entre os dois blocos. Causa raiz: a fileira de fotos
   (.col-lg-8, movida para o fim do .container por ensureInstitutionalPhotos-
   AtBottom() em v2-header.js) e um filho DIRETO do .container com width:100%
   e ZERO padding proprio (perde o gutter do Bootstrap ao sair de dentro do
   .row), enquanto o texto ficava com max-width:960px + margin:auto — um
   valor fixo desconectado da largura real do .container. Fix: zera a
   margem negativa das .row nativas (que so existe pra cancelar o padding
   dos .col-*, sem sentido depois que uma coluna foi movida pra fora do
   .row) e faz titulo/paragrafos ocuparem 100% do MESMO .container (sem
   padding proprio, sem max-width fixo) — resultado: sempre a mesma largura
   efetiva da fileira de fotos, em qualquer largura de tela, sem depender de
   um valor em pixels "chumbado" que so bate n uma unica resolucao. */
app-arena #institucional .container > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

app-arena #institucional p.text-dark {
  font-weight: 400 !important;
  text-align: left !important;
  color: #212529 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
}

app-arena #institucional p.text-dark:last-of-type {
  margin-bottom: 0 !important;
}

/* Titulo "QUEM SOMOS" injetado como PRIMEIRO FILHO do .container (nao mais
   da <section>, que nao tem padding/largura de leitura nenhuma — ver
   ensureQuemSomosTitle() em v2-header.js) — mesma tipografia do titulo
   "ACESSIBILIDADE" (a11y-content.css): alinhado a esquerda, sem linha
   divisoria. Cor royal #1818B7 (pedido do cliente: "quem somos em azul").
   Sem max-width proprio: ocupa 100% do .container, igual aos paragrafos e a
   fileira de fotos abaixo — mesma largura efetiva sempre. */
.ab3-v2-quemsomos-title {
  display: block;
  background: none;
  color: #1818B7;
  font-family: Mulish, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.2;
  text-align: left;
  width: 100%;
  max-width: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

/* Grade de 4 fotos pequenas no rodape do bloco institucional (movida para
   o final do .container via v2-header.js — o carrossel original ficava
   "no meio" do texto, entre o 1o e o 2o paragrafo). Carrossel grande
   desativado: mostra so as 4 primeiras fotos, lado a lado, estaticas. */
app-arena #institucional .col-lg-8 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 2rem 0 0 !important;
}

app-arena #institucional .col-lg-8 .carousel-indicators,
app-arena #institucional .col-lg-8 .carousel-control-prev,
app-arena #institucional .col-lg-8 .carousel-control-next {
  display: none !important;
}

app-arena #institucional .col-lg-8 .carousel-inner {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.6rem !important;
  height: auto !important;
}

@media (min-width: 576px) {
  app-arena #institucional .col-lg-8 .carousel-inner {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

app-arena #institucional .col-lg-8 .carousel-item {
  display: none !important;
}

app-arena #institucional .col-lg-8 .carousel-item:nth-child(-n + 4) {
  display: block !important;
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  margin: 0 !important;
}

app-arena #institucional .col-lg-8 .picsum-img-wrapper {
  position: relative !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
}

app-arena #institucional .col-lg-8 .picsum-img-wrapper img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  margin: 0 !important;
}

/* Galeria: era imagem de fundo (arena-bg.jpg) no navy antigo; fundo branco
   com texto no royal do logo (ajuste do cliente). Borda superior + espaco
   extra para nao "grudar" visualmente na secao Estrutura logo acima (as
   duas ficaram brancas e sem nenhuma divisoria, parecendo uma coisa so). */
app-gallery .gallery {
  background-image: none !important;
  background-color: #fff;
  border-top: 1px solid rgba(24, 24, 183, 0.12);
  padding-top: 24px;
}

app-gallery .gallery .section-title {
  color: #1818B7 !important;
  font-weight: 800 !important;
}

/* ============ 9. Programacao: cards de evento (agenda) ============ */
/* O card nativo cobre 100% do poster com uma camada preta translucida
   (.card-body { background-color: #00000080 }) pra dar contraste ao
   titulo/data/botao brancos por cima da imagem — o "blur cinza" que o
   cliente pediu pra tirar. Reorganizado pro padrao do site do BTG
   Pactual Hall (mesma agencia): poster limpo em cima, faixa branca com
   titulo, data e "Comprar Ingresso" embaixo, fora da imagem.

   Ajuste fino (fase 2, referencia "MAMMA MIA" do BTG): .card-body vira
   CSS Grid com areas nomeadas (ao inves de flex-column) pra colocar a
   data e o botao "Comprar Ingresso" na MESMA linha, botao alinhado a
   direita — no lugar de ficarem empilhados. Tambem adiciona a linha
   divisoria fina abaixo do titulo e respiro (padding-bottom) abaixo do
   botao. Filhos diretos do .card-body (ordem fixa no DOM do Angular):
   p (titulo) -> p (subtitulo, pode vir vazio) -> small (data) -> app-link (botao). */
app-agenda-event .card {
  height: auto !important;
  display: flex !important;
  flex-direction: column-reverse !important;
}

app-agenda-event .card img {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  z-index: auto !important;
}

app-agenda-event .card-body {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  z-index: auto !important;
  background-color: #fff !important;
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "titulo    titulo"
    "subtitulo subtitulo"
    "data      botao";
  align-items: center;
  text-align: left !important;
  padding: 1rem 0.25rem 1.25rem !important;
  gap: 0.35rem 0.75rem !important;
}

app-agenda-event .card-body p,
app-agenda-event .card-body small {
  color: #0A0349 !important;
}

/* titulo: area "titulo" + linha divisoria fina abaixo (referencia BTG) */
app-agenda-event .card-body p:nth-of-type(1) {
  grid-area: titulo;
  margin-bottom: 0.6rem !important;
}

app-agenda-event .card-body p:nth-of-type(1)::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: #1818B7;
  margin-top: 0.5rem;
}

/* subtitulo: normalmente vazio (evento atual "Jane Duboc" nao usa esse
   campo) — some sozinho sem deixar buraco de espacamento no grid. Se
   algum evento futuro vier com esse campo preenchido, a regra :empty
   simplesmente nao se aplica e o texto aparece normalmente. */
app-agenda-event .card-body p:nth-of-type(2) {
  grid-area: subtitulo;
}

app-agenda-event .card-body p:nth-of-type(2):empty {
  display: none;
}

/* data: area "data", ao lado do botao. min-width:0 deixa o texto
   quebrar em ate 2-3 linhas em telas estreitas em vez de estourar a
   largura do card. */
app-agenda-event .card-body small {
  grid-area: data;
  margin-bottom: 0 !important;
  min-width: 0;
}

/* botao: area "botao", alinhado a direita/mesma linha da data (BTG) */
app-agenda-event .card-body app-link {
  grid-area: botao;
  justify-self: end;
  align-self: center;
}

app-agenda-event .card-body .btn-outline-light {
  --bs-btn-color: #1818B7;
  --bs-btn-border-color: #1818B7;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1818B7;
  --bs-btn-hover-border-color: #1818B7;
  --bs-btn-focus-shadow-rgb: 24, 24, 183;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1818B7;
  --bs-btn-active-border-color: #1818B7;
  color: #1818B7 !important;
  border-color: #1818B7 !important;
  white-space: nowrap;
}

/* ============ 9b. Programacao: card HIBRIDO de evento (embedded) ============ */
/* Infraestrutura pro estilo alternativo de card avaliado pelo cliente (arte
   de referencia "GUIZADO & DJ MIYAB"): informacao (artista, data/hora, tag,
   logo) desenhada DENTRO da propria foto via degrade, sem a faixa branca
   nativa (.card-body) embaixo, com a imagem inteira funcionando como link
   unico de compra. O padrao atual (secao 9 acima) continua sendo o
   FALLBACK universal pra qualquer evento; este estilo so ativa quando o
   JS (public/v2-agenda-embedded.js — ver o cabecalho desse arquivo pra
   instrucoes completas de ativacao) adiciona a classe ".ab3-card--embedded"
   ao ".card", o que so acontece se o evento tiver "cardStyle": "embedded"
   no JSON de traducoes. NENHUM evento tem esse campo definido hoje — a
   classe nunca é adicionada, entao estas regras nunca entram em vigor (ver
   asserção correspondente em scripts/smoke-test-v2.js). Nao ha overlay de
   texto (titulo/data/tag) desenhado via CSS/JS aqui de proposito: essa
   informacao ja vem embutida na PROPRIA arte fornecida pelo cliente quando
   o estilo for ativado; o card so precisa esconder a faixa nativa e virar
   um link unico. */
app-agenda-event .card.ab3-card--embedded .card-body {
  display: none !important;
}

app-agenda-event .card.ab3-card--embedded {
  cursor: pointer;
}

/* link "esticado" cobrindo o card inteiro — o componente nativo Angular
   nao envolve o card num <a> unico (so o botao "Comprar Ingresso" dentro
   da faixa e um link); como aqui a faixa fica oculta, este link cobre
   100% da area do card (imagem inclusive) reaproveitando o mesmo
   href/target do botao nativo. text-indent/overflow escondem o texto
   (o aria-label, com o nome do evento, garante a acessibilidade —
   ver v2-agenda-embedded.js). */
app-agenda-event .card.ab3-card--embedded .ab3-card__embedded-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  overflow: hidden;
  text-indent: -9999px;
}

/* ============ 10. Contato: remove heading "Como podemos ajudar?" ============ */
/* Pedido do cliente: tirar esse titulo, mantendo o card "Endereco" abaixo e
   as secoes injetadas (Como Chegar / FAQ). O componente Angular reserva
   margin-bottom:80px pro h2 — zera junto pra nao sobrar vao em branco. */
app-contact .contact-title {
  display: none !important;
  margin-bottom: 0 !important;
}

/* ============ 11. Espacamento excessivo entre secoes (padronizacao) ============ */
/* Pedido do cliente: vao em branco enorme entre o fim da "Galeria de Fotos"
   e a borda azul superior da secao "Acessibilidade" em /a-arena. Medido via
   Playwright (getBoundingClientRect + getComputedStyle) contra a URL de
   producao: a causa raiz e o wrapper NATIVO .gallery-content (Angular,
   nao customizado por nos) — ele reserva padding:80px 0, herdado de quando
   a Galeria usava fundo de imagem (arena-bg.jpg) com grid fixo de 12 fotos
   e precisava desse respiro. Hoje o conteudo e o grid compacto de cards por
   evento (v2-gallery.js/css) — nao usa mais aquele espaco, e o
   padding-bottom de 80px soma com o padding-top de 64px que o
   .ab3-a11y-content JA tem (a11y-content.css), dobrando o vao (144px).

   Buscamos ativamente esse MESMO padrao (padding-bottom nativo de 80px,
   leftover do layout Bootstrap original com fundo de imagem, empilhando
   com o padding-top de secao seguinte) em outras transicoes do site — e
   apareceu de forma IDENTICA em 3 outros pontos: o wrapper .contact (antes
   de "Como Chegar" no /contato), o .map do rodape (antes de "INFORMACOES",
   em TODAS as paginas) e o .agenda-content da Programacao na Home (antes
   do Mapa). Reduzido de forma padronizada (mesmo valor, 24px) nos 4 casos —
   mantem respiro visual entre secoes sem o vao excessivo. */
app-gallery .gallery-content {
  padding-bottom: 24px !important;
}

app-contact section.contact {
  padding-bottom: 24px !important;
}

app-footer app-map section.map {
  padding-bottom: 24px !important;
}

app-home app-agenda section.agenda .agenda-content {
  padding-bottom: 24px !important;
}

/* ============ 12. "Apresentado Por": respiro acima/abaixo das logos ============ */
/* Apontamento do cliente: o bloco "APRESENTADO POR" (Lei Rouanet/Vale
   Cultura + B3 "Muito mais que a bolsa do Brasil") fica colado demais no
   limite de cima (fim do navy INFORMACOES) e no limite de baixo (antes do
   footer) — pediu respiro "leve" (nao exagerado) nos dois lados. O
   .container do app-sponsor nao tem padding proprio (0/0) — soma-se um
   valor enxuto (20px, mesma familia do padrao ~24px usado no ajuste de
   espacamento entre secoes) acima e abaixo de TODO o bloco de logos
   (chancela + chancela-bottom), sem alterar a margem nativa que ja existe
   depois da secao (mb-4/mb-5 do Bootstrap). */
app-footer app-sponsor section.sponsor .container {
  /* Pedido cliente 04/08: aumentar espaçamento vertical do bloco de logos. */
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}