/* Fontes locais. Licenças OFL e procedência no diretório fontes. */
@font-face {
  font-family: 'Fraunces';
  src: url('./fontes/Fraunces.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('./fontes/Albert-Sans.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Tokens do handoff. Cores, fontes e raios da E20 vêm do banco. */
:root {
  /* Marca */
  --marca-sol: #C8492A;
  --marca-noite: #0B211B;
  --marca-ambar: #E0A23B;
  --marca-rosa: var(--marca-secundaria); /* assinatura da casa, com tinta sobre ela */
  --marca-sol-escuro: var(--marca-destaque);
  --marca-verde: var(--marca-primaria);         /* estrutura, fundos escuros, texto principal (13,1:1 sobre creme) */
  --marca-verde-2: #17362D;       /* superfícies e divisórias sobre verde */
  --marca-creme: var(--marca-fundo);         /* fundo de leitura */
  --marca-creme-2: var(--marca-superficie-alternativa);       /* blocos alternados, estados vazios */
  --marca-papel-claro: var(--marca-superficie);        /* campos, cards de compra */

  /* Neutros de texto e linha */
  --marca-musgo: var(--marca-texto-suave);         /* texto secundário sobre claro, borda de campo (5,3:1 sobre creme) */
  --marca-musgo-claro: #A9BDB5;   /* texto secundário sobre verde */
  /* --marca-linha é fornecida pelo banco. */

  /* Feedback: sempre com ícone e texto, nunca só cor */
  --marca-erro: #B42318;      --marca-erro-fundo: #FBE4DF;
  --marca-sucesso: #1C6B45;   --marca-sucesso-fundo: #DCEEE2;
  --marca-aviso: #8A5300;     --marca-aviso-fundo: #F7E8C8;

  /* Tipografia */
  --marca-fonte-titulo: var(--marca-fonte-titulos);   /* títulos em Fraunces */
  /* --marca-fonte-texto é fornecida pelo banco. */
  --marca-largura-abertura: 100%;
  --marca-largura-secao: 100%;
  --marca-largura-card: 100%;
  --marca-titulo-abertura: clamp(64px, 12cqi, 212px);  /* entrelinha .92 */
  --marca-titulo-pagina: clamp(56px, 10cqi, 160px);    /* entrelinha .92 */
  --marca-titulo-secao: clamp(40px, 6cqi, 72px);       /* entrelinha .92 */
  --marca-titulo-card: 31px;                            /* entrelinha .98 */
  --marca-tamanho-texto: 17px;          /* entrelinha 1.5 */
  --marca-texto-pequeno: 15px;
  --marca-legenda: 14px;
  --marca-etiqueta: 12px;       /* 700, caixa alta, entreletra .12em–.16em */

  /* Espaço e grade */
  --marca-largura-site: 1440px;
  --marca-largura-compra: 1200px;
  --marca-margem: clamp(16px, 4cqi, 48px);
  --marca-secao: clamp(56px, 8cqi, 112px);
  --marca-cabecalho: 68px;
  --marca-espaco-1: 4px;  --marca-espaco-2: 8px;  --marca-espaco-3: 12px; --marca-espaco-4: 16px;
  --marca-espaco-5: 24px; --marca-espaco-6: 36px; --marca-espaco-7: 56px; --marca-espaco-8: 88px;
  --marca-ponto-largo: 980px;   /* largura do contêiner a partir da qual a navegação fica visível */

  /* Forma */
  /* --marca-raio-botao é fornecido pelo banco. */
  --marca-alvo-toque: 44px;     /* mínimo; ações principais usam 48–52px */
  --marca-foco: 3px solid var(--marca-primaria);
  --marca-foco-recuo: 3px;
  --marca-sombra-barra: 0 -6px 24px rgba(16, 45, 37, .18);
  --marca-sombra-ingresso: 0 10px 24px rgba(16, 45, 37, .14);

  /* Recortes derivados do "a" (ver marca/recortes.json) */
  --marca-corte-4x3: polygon(0 0, 100% 0, 100% 76.9%, 70% 100%, 0 100%);   /* corte 30° no canto inferior direito */
  --marca-corte-3x2: polygon(0 0, 100% 0, 100% 74%, 70% 100%, 0 100%);

  /* Movimento */
  --marca-entrada: marcaEntra .28s ease-out both;   /* opacidade 0→1 e translateY 10px→0 */
}

@keyframes marcaEntra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Esta folha só é carregada para o pacote de identidade da Ailha. */
h1, h2 { font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0; line-height: .92; letter-spacing: -.02em; }

/* G1: verde estrutural, creme para ler, rosa para agir. */
:root {
  --marca-verde: #102D25;
  --marca-creme: #F3EBDD;
  --marca-foco: 3px solid var(--marca-secundaria);
  --ailha-verde: var(--marca-verde);
  --ailha-verde-2: var(--marca-verde-2);
  --ailha-creme: var(--marca-creme);
  --ailha-rosa: var(--marca-secundaria);
  --base-operacao-fundo: #0B211B;
  --base-operacao-superficie: #17362D;
  --base-operacao-texto: #F3EBDD;
  --base-operacao-texto-suave: #B9C6BD;
  --base-operacao-acao: #F46891;
  --base-fonte: 'Albert Sans', system-ui, sans-serif;
}
html { background: transparent; }
:focus-visible { outline: var(--marca-foco); outline-offset: 3px; }
::selection { background: var(--marca-secundaria); color: var(--marca-verde); }
.casa-card[data-area=clube], .casa-card[data-area=match] { background: var(--marca-superficie-alternativa); color: var(--marca-texto); }
.casa-icone, .casa-seta, .rotulo-cartaz { color: var(--marca-secundaria); }
.cartaz-ponto { color: var(--marca-secundaria); }
.evento-cartaz-fixo { border: 1px solid var(--marca-linha); }
.shell-painel .conteudo, .equipe main, .plat-principal > *, .formulario, .evento-descricao {
  background: var(--marca-superficie); border-radius: var(--marca-raio-card); padding: 1.25rem;
}
.equipe { --marca-primaria: var(--marca-secundaria); --marca-sobre-primaria: var(--marca-verde); --marca-fonte-titulos: 'Fraunces', Georgia, serif; }
.plataforma { min-height: 100dvh; color: var(--marca-texto); }
.plat-lateral { background: var(--marca-superficie); color: var(--marca-texto); }
.plat-indicador strong { font-size: 1.4rem; }
.plat-principal h1, .shell-painel h1 { font-size: 2rem; }
.plat-identidade span { color: var(--marca-texto-suave); }
.mural-marcas { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05; overflow: hidden; }
.mural-marcas .ailha-jardim { height: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; align-content: space-around; gap: 3vh 4vw; }
.mural-marcas .ailha-medalhao { width: 110px; height: 110px; }
.mural-marcas .ailha-medalhao, .mural-marcas .ailha-medalhao:hover { background: none; border-radius: 0; box-shadow: none; }
.mural-marcas .ailha-medalhao img { object-fit: contain; border-radius: 0; }
.mural-marcas .ailha-medalhao-nome { display: none; }
/* Folhas de primeiro plano também ficam atrás da leitura. */
html[data-identidade="jardim"] canvas.ailha-fundo-frente { z-index: -1; }
html[data-mural=desligado] :is(canvas.ailha-fundo, canvas.ailha-fundo-frente, canvas.ailha-fundo-grao, .mural-marcas) { display: none; }
.marcas-casa ul { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem 2rem; padding: 1rem 0; margin: 0; }
.marcas-casa li > :is(a,div) { display: grid; justify-items: center; gap: .8rem; text-align: center; text-decoration: none; color: var(--marca-creme); font-size: .8rem; line-height: 1.4; }
.marcas-casa img { width: 100%; max-width: 180px; height: 140px; object-fit: contain; filter: drop-shadow(0 1px 1px var(--marca-creme)); }
.marcas-casa a:hover span { text-decoration: underline; text-decoration-color: var(--marca-secundaria); }
@media (max-width: 699px) { .marcas-casa ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; } }
.erro { color: var(--marca-texto); }
.mural-marcas .ailha-medalhao img { filter: drop-shadow(0 1px 1px var(--marca-creme)); }
/* Contorno no alfa das duas logos escuras, sem mudar os arquivos fornecidos. */
.marcas-casa img:is([src$="/cozinha-chef.webp"], [src$="/biscoitei.webp"]),
.mural-marcas img:is([src$="/cozinha-chef.webp"], [src$="/biscoitei.webp"]) {
  filter: drop-shadow(1px 0 0 var(--marca-creme)) drop-shadow(-1px 0 0 var(--marca-creme)) drop-shadow(0 1px 0 var(--marca-creme)) drop-shadow(0 -1px 0 var(--marca-creme));
}
@media (max-width: 899px) {
  .shell-painel > .menu { display: flex; gap: .5rem; overflow-x: auto; padding: .75rem 1rem; background: var(--marca-superficie); }
  .shell-painel > .menu a { flex-shrink: 0; }
  .plat-shell { grid-template-columns: minmax(0, 1fr); }
  .plat-lateral { padding: 1rem; gap: .75rem; min-width: 0; }
  .plat-menu { display: flex; overflow-x: auto; }
  .plat-menu a { flex-shrink: 0; white-space: nowrap; }
  .plat-operador { display: flex; align-items: center; justify-content: space-between; padding-top: .5rem; }
  .plat-principal { padding: 1rem; }
  .plat-grade-2, .plat-grade-tema, .plat-prancha { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 699px) { .mural-marcas .ailha-jardim { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mural-marcas .ailha-medalhao { width: 72px; height: 72px; } }
/* Grão discreto e superfície de leitura no fluxo de compra. */
html[data-identidade="jardim"] canvas.ailha-fundo-grao { opacity: .12; }
.conteudo > section:has(.ingresso-colunas) { background: var(--marca-superficie); padding: 1.25rem; border: 1px solid var(--marca-linha); border-radius: var(--marca-raio-card); }

/* Valores compactos: mantém o valor monetário inteiro na grade móvel. */
.shell-painel [data-indicador-valor] { font-size: 1.25rem; }
@media (max-width: 699px) { .shell-painel [data-indicador-valor] { font-size: 1rem; } }

.bilhete-cabecalho .cartaz-reserva-titulo { font-size: 1.75rem; }