/**
 * SITE-001 — CSS do site público institucional.
 *
 * Reaproveita por REFERÊNCIA (var(--cliente-*)) todos os tokens de cor,
 * tipografia, espaçamento, raio e sombra já definidos em
 * css/cliente/tokens.css (FRONT-002) — nenhum Design System novo, nenhuma
 * cor/fonte/raio redefinido por valor aqui. Só o CHROME (cabeçalho
 * horizontal, hero, rodapé, grades de seção) é novo, porque a Home
 * institucional é uma composição de página diferente do chrome de app do
 * portal (bottom-nav/desktop-nav fixos, sem hero) — ver
 * views/layouts/site-publico.php.
 */

:root {
  --site-pub-header-altura: 72px;
  --site-pub-largura-conteudo: var(--cliente-largura-pagina-desktop, 1280px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* RC-003 — rodapé "flutuando" com um vão vazio embaixo em qualquer página
   com pouco conteúdo (ex.: Galeria antes das primeiras fotos reais, "Em
   breve..."). Header/main/footer eram três filhos soltos de `<body>`, sem
   nenhum mecanismo de altura mínima — o rodapé terminava onde o conteúdo
   acabava, nunca ficava ancorado ao fim da viewport. Padrão "sticky
   footer" de coluna flex — nunca altera a ordem/markup existente, só a
   distribuição de altura. */
html, body.site-pub {
  min-height: 100%;
}

body.site-pub {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--cliente-fonte);
  color: var(--cliente-texto-escuro-principal);
  background: var(--cliente-fundo-claro);
  line-height: var(--cliente-lh-corpo);
}

body.site-pub > main {
  flex: 1 0 auto;
}

.site-pub-container {
  max-width: var(--site-pub-largura-conteudo);
  margin: 0 auto;
  padding: 0 var(--cliente-margem-lateral-mobile, 18px);
}

/* ---------------- Skip link ---------------- */
.site-pub-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cliente-verde);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 1000;
  font-weight: var(--cliente-fw-semibold);
}
.site-pub-skip-link:focus {
  left: 0;
}

/* ---------------- Foco visível ---------------- */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--cliente-azul-claro);
  outline-offset: 2px;
}

/* ---------------- Botões ---------------- */
.site-pub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--cliente-altura-botao, 44px);
  padding: 0 22px;
  border-radius: var(--cliente-raio-botao);
  font-size: var(--cliente-fs-botao);
  font-weight: var(--cliente-fw-semibold);
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: var(--cliente-transicao-padrao);
}
.site-pub-btn--primario {
  background: var(--cliente-verde);
  color: #fff;
}
.site-pub-btn--primario:hover { background: var(--cliente-verde-hover); }
.site-pub-btn--fantasma {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}
.site-pub-btn--grande { padding: 0 28px; font-size: 16px; }
.site-pub-btn--largo { width: 100%; }

/* ---------------- Cabeçalho ---------------- */
.site-pub-header {
  position: sticky;
  top: 0;
  z-index: var(--cliente-z-header, 110);
  background: var(--cliente-fundo-escuro);
  color: var(--cliente-texto-claro-principal);
  border-bottom: 1px solid var(--cliente-divisoria-escura);
}
.site-pub-header__barra {
  max-width: var(--site-pub-largura-conteudo);
  margin: 0 auto;
  min-height: var(--site-pub-header-altura);
  padding: 0 var(--cliente-margem-lateral-mobile, 18px);
  display: flex;
  align-items: center;
  gap: 20px;
}
.site-pub-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  font-weight: var(--cliente-fw-black);
  margin-right: auto;
}
.site-pub-logo img { border-radius: var(--cliente-raio-chip); display: block; }
.site-pub-logo__texto { font-size: 16px; }

.site-pub-nav-desktop { display: none; gap: 22px; }
.site-pub-nav-desktop a {
  color: var(--cliente-texto-claro-secundario);
  text-decoration: none;
  font-size: var(--cliente-fs-corpo);
  font-weight: var(--cliente-fw-semibold);
}
.site-pub-nav-desktop a:hover { color: #fff; }

.site-pub-header__acoes { display: none; gap: 10px; }

.site-pub-menu-toggle {
  background: transparent;
  border: none;
  color: #fff;
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.site-pub-menu-toggle__icone,
.site-pub-menu-toggle__icone::before,
.site-pub-menu-toggle__icone::after {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  position: relative;
}
.site-pub-menu-toggle__icone::before,
.site-pub-menu-toggle__icone::after {
  content: "";
  position: absolute;
  left: 0;
}
.site-pub-menu-toggle__icone::before { top: -7px; }
.site-pub-menu-toggle__icone::after { top: 7px; }

.site-pub-u-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------- Menu mobile ---------------- */
.site-pub-menu-mobile {
  position: fixed;
  inset: 0;
  top: var(--site-pub-header-altura);
  background: var(--cliente-fundo-escuro);
  z-index: var(--cliente-z-overlay, 200);
  overflow-y: auto;
  padding: 20px var(--cliente-margem-lateral-mobile, 18px) 40px;
}
.site-pub-menu-mobile[hidden] { display: none; }
.site-pub-menu-mobile__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.site-pub-menu-fechar {
  background: transparent;
  border: 1.5px solid var(--cliente-borda-escura);
  color: #fff;
  width: 44px; height: 44px;
  border-radius: var(--cliente-raio-chip);
  font-size: 20px;
  cursor: pointer;
}
.site-pub-menu-mobile nav { display: flex; flex-direction: column; gap: 4px; }
.site-pub-menu-mobile nav a {
  color: #fff;
  text-decoration: none;
  padding: 14px 6px;
  min-height: var(--cliente-altura-toque-minima, 44px);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--cliente-divisoria-escura);
  font-weight: var(--cliente-fw-semibold);
}
body.site-pub--menu-aberto { overflow: hidden; }

/* ---------------- Hero ---------------- */
/* SITE-001-R3, item 1 — mais respiro vertical (era um valor fixo só
   pensado para mobile) e leitura garantida mesmo sem overlay forte
   (text-shadow como reforço, nunca dependendo só do overlay
   configurado por banner). */
.site-pub-hero {
  background:
    linear-gradient(180deg, rgba(15,23,42,.35), rgba(15,23,42,.85)),
    radial-gradient(circle at 20% 20%, var(--cliente-verde-escuro), var(--cliente-fundo-escuro) 60%);
  color: #fff;
  padding: 64px 0 56px;
}
.site-pub-hero__conteudo { max-width: 720px; }
.site-pub-hero__titulo {
  font-size: clamp(28px, 5vw, 44px);
  line-height: var(--cliente-lh-titulo);
  font-weight: var(--cliente-fw-black);
  margin: 0 0 14px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
.site-pub-hero__texto {
  font-size: 16px;
  opacity: .9;
  margin: 0 0 26px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}
.site-pub-hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.site-pub-hero__link-secundario {
  display: inline-block;
  margin-top: 18px;
  color: var(--cliente-texto-claro-secundario);
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .site-pub-hero { padding: 88px 0 72px; }
}

/* ---------------- Hero — carrossel de banners (SITE-001-R1) ---------------- */
/* Duração da transição de slide — espelhada em site-publico.js
   (TRANSICAO_MS). Mudar os dois juntos. */

.site-pub-hero--carrossel {
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: #050505;
}

.site-pub-hero__slides {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  /* O arquivo exportado pela ferramenta de geração vem em 1831x859,
     mas com uma barra preta embutida no próprio PNG (conteúdo real só
     de y=139 a y=738 — confirmado pixel a pixel). Por isso a proporção
     aqui é a do CONTEÚDO real (1831/599), não a do arquivo inteiro —
     com isso, object-fit:cover recorta só a barra (poucos px, quase
     imperceptível), nunca a arte em si. */
  aspect-ratio: 1831 / 599;
  overflow: hidden;
}

.site-pub-hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 1;
  transition: opacity 400ms ease;
}

.site-pub-hero__slide[hidden] {
  display: none;
}

.site-pub-hero__slide.is-saindo {
  opacity: 0;
}

.site-pub-hero__slide--esquerda {
  justify-content: flex-start;
  text-align: left;
}

.site-pub-hero__slide--centro {
  justify-content: center;
  text-align: center;
}

.site-pub-hero__slide--direita {
  justify-content: flex-end;
  text-align: right;
}

.site-pub-hero__midia {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
}

.site-pub-hero__midia img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.site-pub-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(15, 23, 42, var(--site-pub-overlay, 0));
  pointer-events: none;
}

.site-pub-hero__slide > .site-pub-hero__conteudo {
  position: relative;
  z-index: 2;
  color: #fff;
}

/* Use esta classe no slide quando o texto já estiver dentro da imagem */
.site-pub-hero__slide--arte-pronta > .site-pub-hero__conteudo {
  display: none;
}

.site-pub-hero__controles {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 12px;
}

.site-pub-hero__seta {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--cliente-raio-chip);
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.site-pub-hero__indicadores {
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-pub-hero__indicador {
  position: relative;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.site-pub-hero__indicador::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  transform: translate(-50%, -50%);
  transition: var(--cliente-transicao-padrao);
}

.site-pub-hero__indicador.is-ativo::before {
  width: 24px;
  background: #fff;
}

/* Tablet — mesma proporção do desktop (base), sem override aqui.
   .site-pub-hero__midia img já usa object-position: center center por
   padrão (ver regra base). */

/* Celular */
@media (max-width: 768px) {
  .site-pub-hero__slides {
    height: 260px;
    aspect-ratio: auto;
  }

  .site-pub-hero__midia img {
    object-fit: cover;
    object-position: center center;
  }

  .site-pub-hero__controles {
    bottom: 6px;
  }

  .site-pub-hero__seta {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }

  .site-pub-hero__indicador {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-pub-hero__slide {
    transition: none;
  }
}


/* ---------------- Seções genéricas ---------------- */
/* SITE-001-R3 — espaçamento vertical maior (era 48px fixo, ficava
   apertado em telas grandes) e progressivo por breakpoint — ver
   media queries no fim do arquivo. */
.site-pub-secao { padding: 56px 0; }
.site-pub-secao--alt { background: var(--cliente-superficie-clara); }
.site-pub-secao__titulo {
  font-size: var(--cliente-fs-display, 28px);
  font-weight: var(--cliente-fw-bold);
  margin: 0 0 18px;
}
.site-pub-secao__texto { font-size: var(--cliente-fs-corpo); max-width: 640px; }
.site-pub-vazio { opacity: .65; font-size: var(--cliente-fs-corpo); }

.site-pub-card {
  background: var(--cliente-superficie-clara);
  border: 1px solid var(--cliente-borda-clara);
  border-radius: var(--cliente-raio-card-grande);
  box-shadow: var(--cliente-sombra-card);
  padding: 20px;
}

/* ---------------- Par de colunas (SITE-001-R3, item 3) ---------------- */
/* Reorganiza seções que antes ocupavam uma faixa cheia com pouco
   conteúdo (Como reservar/Portal, Organizar pelada/Bar) em colunas
   lado a lado a partir do desktop — mesmo breakpoint de 1024px já usado
   por .site-pub-portal. Cada coluna vira um cartão com identidade
   própria (nunca um "bloco gigante" de texto solto). */
.site-pub-secao-par {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
.site-pub-secao-par__coluna {
  background: var(--cliente-superficie-clara);
  border: 1px solid var(--cliente-borda-clara);
  border-top: 4px solid var(--cliente-verde);
  border-radius: var(--cliente-raio-card-grande);
  box-shadow: var(--cliente-sombra-card);
  padding: 28px 24px;
}
.site-pub-secao-par__coluna:nth-child(2) { border-top-color: var(--cliente-azul-claro); }
.site-pub-secao-par--unica { grid-template-columns: 1fr; }
.site-pub-secao-par--unica .site-pub-secao-par__coluna { max-width: 640px; }

@media (max-width: 480px) {
  .site-pub-secao-par__coluna { padding: 22px 18px; }
}

/* ---------------- Eventos e locação (RC-001) ---------------- */
/* Antes era só título+texto+botão numa faixa cheia, quase vazia. Agora 2
   colunas no desktop (imagem fixa + conteúdo) — a ordem no HTML já é
   imagem-depois-conteúdo, então o empilhamento mobile (1 coluna) cai
   automaticamente em "imagem acima, conteúdo abaixo" sem precisar de
   `order` no CSS. Altura da mídia entre ~360-480px no desktop (dentro da
   faixa 380-520px pedida, já contando a borda/raio). */
.site-pub-eventos__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

.site-pub-eventos__midia {
  border-radius: var(--cliente-raio-card-grande);
  overflow: hidden;
  box-shadow: var(--cliente-sombra-card);
  aspect-ratio: 4 / 3;
}

.site-pub-eventos__midia img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Só aparece se a imagem configurada não existir no disco (ver
   SitePublicoService::montarEventos()) — nunca um ícone de imagem
   quebrada, sempre um painel com identidade visual própria. */
.site-pub-eventos__midia-fallback {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 75% 25%, rgba(245, 158, 11, .35), transparent 55%),
    linear-gradient(135deg, var(--cliente-verde-escuro), var(--cliente-fundo-escuro));
}

.site-pub-eventos__conteudo .site-pub-secao__texto { max-width: 520px; }

@media (min-width: 860px) {
  .site-pub-eventos__grade {
    grid-template-columns: minmax(0, 480px) 1fr;
    gap: 40px;
  }

  .site-pub-eventos__midia { aspect-ratio: auto; height: 420px; }
}

/* ---------------- Hero da Escolinha (ESC-001) ---------------- */
/* Mesmo padrão estrutural do Hero de Eventos (RC-001, .site-pub-eventos__*)
   — mantido como classes próprias em vez de reaproveitar aquelas
   diretamente para não acoplar duas seções de sprints diferentes por um
   nome de classe só; as propriedades são intencionalmente as mesmas. */
.site-pub-escolinha-hero__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
.site-pub-escolinha-hero__midia {
  border-radius: var(--cliente-raio-card-grande);
  overflow: hidden;
  box-shadow: var(--cliente-sombra-card);
  aspect-ratio: 4 / 3;
}
.site-pub-escolinha-hero__midia img { display: block; width: 100%; height: 100%; object-fit: cover; }
.site-pub-escolinha-hero__midia-fallback {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 75% 25%, rgba(245, 158, 11, .35), transparent 55%),
    linear-gradient(135deg, var(--cliente-verde-escuro), var(--cliente-fundo-escuro));
}
.site-pub-escolinha-hero__acoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
@media (min-width: 860px) {
  .site-pub-escolinha-hero__grade { grid-template-columns: minmax(0, 480px) 1fr; gap: 40px; }
  .site-pub-escolinha-hero__midia { aspect-ratio: auto; height: 420px; }
}

/* ---------------- Horários por dia (ESC-001) ---------------- */
/* Reaproveita .site-pub-card como envelope de cada dia; cada linha de
   horário dentro do card usa o mesmo par "rótulo à esquerda / valor à
   direita" já usado em .site-pub-footer__horario — nunca uma tabela
   larga (item 10 pede compacto e sem tabela excessivamente larga no
   mobile). */
.site-pub-horarios-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.site-pub-horarios-dia__titulo { font-weight: var(--cliente-fw-bold); margin: 0 0 10px; }
.site-pub-horarios-dia__linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--cliente-divisoria-clara);
  font-size: var(--cliente-fs-corpo-pequeno);
}
.site-pub-horarios-dia__linha:last-child { border-bottom: 0; }
.site-pub-horarios-dia__horario { font-weight: var(--cliente-fw-semibold); white-space: nowrap; }
.site-pub-horarios-dia__meta { opacity: .65; font-size: var(--cliente-fs-legenda); }

/* ---------------- Formulário público (ESC-001) ---------------- */
/* Primeiro formulário do site público (RC-001/SITE-001 nunca precisaram
   de um) — `views/layouts/site-publico.php` só carrega tokens.css +
   site-publico.css (nunca cliente/forms.css, que é do portal
   autenticado), então os campos precisam de estilo próprio aqui. Mesmos
   tokens de cor/raio já usados no resto do site, nunca um Design System
   novo. Alvo de toque mínimo de 44px (item 35) em todo campo/botão. */
.site-pub-form { max-width: 640px; }
.site-pub-campo { margin-bottom: 18px; }
.site-pub-campo__label {
  display: block;
  font-weight: var(--cliente-fw-semibold);
  font-size: var(--cliente-fs-corpo-pequeno);
  margin-bottom: 6px;
}
.site-pub-campo__input,
.site-pub-campo__select,
.site-pub-campo__textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--cliente-borda-clara);
  border-radius: var(--cliente-raio-campo);
  background: #fff;
  color: var(--cliente-texto-escuro-principal);
  font-size: var(--cliente-fs-corpo);
  font-family: inherit;
}
.site-pub-campo__textarea { min-height: 90px; resize: vertical; }
.site-pub-campo__input:focus,
.site-pub-campo__select:focus,
.site-pub-campo__textarea:focus {
  outline: 2px solid var(--cliente-verde);
  outline-offset: 1px;
}
.site-pub-campo__ajuda { font-size: var(--cliente-fs-legenda); opacity: .65; margin-top: 4px; }
.site-pub-campo__erro { color: var(--cliente-erro); font-size: var(--cliente-fs-corpo-pequeno); margin-top: 4px; }
.site-pub-campo--checkbox { display: flex; align-items: flex-start; gap: 10px; }
.site-pub-campo--checkbox input[type="checkbox"] { width: 20px; height: 20px; min-width: 20px; margin-top: 2px; }
.site-pub-campo-linha { display: flex; gap: 16px; flex-wrap: wrap; }
.site-pub-campo-linha > .site-pub-campo { flex: 1; min-width: 200px; }
.site-pub-alerta {
  padding: 12px 16px;
  border-radius: var(--cliente-raio-campo);
  font-size: var(--cliente-fs-corpo-pequeno);
  margin-bottom: 18px;
}
.site-pub-alerta--erro { background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .35); color: var(--cliente-erro); }
.site-pub-alerta--sucesso { background: rgba(22, 163, 74, .1); border: 1px solid rgba(22, 163, 74, .35); color: var(--cliente-verde-escuro); }
/* Honeypot — escondido de forma que ainda é "visível" para leitores de
   tela ingênuos que ignoram display:none simples (por isso off-screen,
   não display:none), mas nunca aparece nem recebe foco por Tab para uma
   pessoa de verdade. */
.site-pub-campo-armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------- Faixa institucional intermediária (SITE-001-R3, item 13) ---------------- */
.site-pub-faixa {
  background:
    linear-gradient(120deg, rgba(15, 23, 42, .8), rgba(21, 128, 61, .78)),
    radial-gradient(circle at 80% 30%, var(--cliente-verde-escuro), var(--cliente-fundo-escuro) 65%);
  padding: 40px 0;
}
.site-pub-faixa__conteudo { text-align: center; }
.site-pub-faixa__texto {
  color: #fff;
  font-size: clamp(18px, 3vw, 26px);
  font-weight: var(--cliente-fw-bold);
  font-style: italic;
  margin: 0 auto;
  max-width: 760px;
}

/* ---------------- Checklist (Portal do cliente / Organizar pelada) ---------------- */
.site-pub-checklist {
  list-style: none;
  padding: 0;
  margin: 4px 0 22px;
  display: grid;
  gap: 10px;
}
.site-pub-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--cliente-fs-corpo);
  font-weight: var(--cliente-fw-semibold);
}
.site-pub-checklist__icone {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--cliente-verde);
}
.site-pub-checklist__icone svg { width: 100%; height: 100%; stroke: currentColor; }

/* ---------------- Ações equilibradas (Entrar / Criar meu acesso) ---------------- */
.site-pub-acoes-equilibradas { display: flex; gap: 12px; }
.site-pub-acoes-equilibradas .site-pub-btn { flex: 1; }
@media (max-width: 420px) {
  .site-pub-acoes-equilibradas { flex-direction: column; }
}

/* ---------------- Itens do bar (SITE-001-R3, item 7) ---------------- */
/* Grade preparada para receber mais itens/porções no futuro sem
   nenhuma alteração estrutural — basta acrescentar <li> (nunca um card
   "em breve" fictício enquanto isso não existir de verdade). */
.site-pub-bar-itens {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.site-pub-bar-itens li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--cliente-fs-corpo-pequeno);
  font-weight: var(--cliente-fw-semibold);
  background: var(--cliente-fundo-claro);
  border-radius: var(--cliente-raio-campo);
  padding: 10px 12px;
}
.site-pub-bar-itens li span {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--cliente-verde);
}
.site-pub-bar-itens li span svg { width: 100%; height: 100%; stroke: currentColor; }

/* ---------------- Ícone inline em título (ex.: "Localização") ---------------- */
.site-pub-icone-inline {
  display: inline-flex;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: -2px;
  color: var(--cliente-verde);
}
.site-pub-icone-inline svg { width: 100%; height: 100%; stroke: currentColor; }

/* ---------------- Diferenciais ---------------- */
.site-pub-diferenciais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--cliente-gap-cards, 12px);
}
.site-pub-diferencial { text-align: center; }
.site-pub-diferencial__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin: 0 auto 12px;
  border-radius: var(--cliente-raio-chip);
  background: var(--cliente-verde);
}
.site-pub-diferencial__icone svg {
  width: 24px; height: 24px;
  stroke: #fff;
}
.site-pub-diferencial__titulo { font-weight: var(--cliente-fw-bold); margin: 0 0 4px; }
.site-pub-diferencial__texto { font-size: var(--cliente-fs-corpo-pequeno); opacity: .75; margin: 0; }

/* ---------------- Quadras ---------------- */
/* SITE-001-R3, item 2 — todos os cards com a MESMA altura (a grade já
   estica os itens da mesma linha por padrão; o card e o corpo internos
   é que precisam ser flex para o botão ficar sempre na base, mesmo com
   descrição/características de tamanho variável). */
.site-pub-grade-quadras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--cliente-gap-cards, 12px);
  align-items: stretch;
}
.site-pub-quadra {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.site-pub-quadra__imagem { width: 100%; height: 160px; object-fit: cover; display: block; flex-shrink: 0; }
.site-pub-quadra__corpo {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.site-pub-quadra__topo { flex: 1; }
.site-pub-quadra__base { margin-top: 14px; }
.site-pub-quadra__nome { font-weight: var(--cliente-fw-bold); font-size: var(--cliente-fs-titulo-card); margin: 0 0 2px; }
.site-pub-quadra__tipo { font-size: var(--cliente-fs-legenda); opacity: .65; margin: 0 0 8px; text-transform: uppercase; }
.site-pub-quadra__descricao { font-size: var(--cliente-fs-corpo-pequeno); margin: 0 0 10px; }
.site-pub-quadra__caracteristicas {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.site-pub-quadra__caracteristicas li {
  font-size: var(--cliente-fs-legenda);
  background: var(--cliente-fundo-claro);
  border-radius: var(--cliente-raio-chip);
  padding: 4px 10px;
}
.site-pub-quadra__preco { font-weight: var(--cliente-fw-bold); font-size: var(--cliente-fs-valor); margin: 0 0 12px; }
.site-pub-quadra__preco span { font-size: var(--cliente-fs-corpo-pequeno); font-weight: var(--cliente-fw-regular); opacity: .7; }

/* ---------------- Passos "Como reservar" (SITE-001-R3 — fluxo visual numerado) ---------------- */
.site-pub-passos {
  list-style: none;
  padding: 0;
  margin: 4px 0 24px;
  max-width: 420px;
  counter-reset: site-pub-passo;
}
.site-pub-passos li {
  position: relative;
  counter-increment: site-pub-passo;
  padding: 0 0 26px 44px;
  min-height: 30px;
}
.site-pub-passos li:last-child { padding-bottom: 0; }
.site-pub-passos li::before {
  content: counter(site-pub-passo);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--cliente-raio-chip);
  background: var(--cliente-verde);
  color: #fff;
  font-weight: var(--cliente-fw-bold);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-pub-passos li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 30px;
  bottom: 0;
  width: 2px;
  background: var(--cliente-divisoria-clara);
}
.site-pub-passos__texto {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  font-weight: var(--cliente-fw-semibold);
}

/* ---------------- Portal / Organizar pelada (texto + ação) ---------------- */
.site-pub-portal {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}

/* ---------------- Acessos rápidos ---------------- */
/* SITE-001-R3, item 8 — ícone por acesso + visual claramente clicável
   (elevação/realce no hover, nunca só cor de fundo igual a um texto
   comum). */
.site-pub-acessos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--cliente-gap-cards, 12px);
}
.site-pub-acesso {
  text-decoration: none;
  color: inherit;
  font-weight: var(--cliente-fw-semibold);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 16px;
  cursor: pointer;
  transition: var(--cliente-transicao-padrao);
}
.site-pub-acesso:hover,
.site-pub-acesso:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--cliente-sombra-flutuante);
  border-color: var(--cliente-verde);
}
.site-pub-acesso__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--cliente-raio-chip);
  background: var(--cliente-fundo-claro);
  color: var(--cliente-verde);
}
.site-pub-acesso__icone svg { width: 24px; height: 24px; stroke: currentColor; }

/* ---------------- Contato ---------------- */
.site-pub-contato {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--cliente-gap-cards, 12px);
}
.site-pub-footer__titulo { font-weight: var(--cliente-fw-bold); margin: 0 0 10px; }
/* SITE-001-R3, item 11 — tabela elegante em vez de <ul> (mesmo dado,
   marcação semântica de tabela: melhor para leitor de tela associar dia
   ↔ horário, e visualmente mais "premium" que uma lista solta). */
.site-pub-horarios {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cliente-fs-corpo-pequeno);
}
.site-pub-horarios tr { border-bottom: 1px solid var(--cliente-divisoria-clara); }
.site-pub-horarios tr:last-child { border-bottom: 0; }
.site-pub-horarios th,
.site-pub-horarios td {
  padding: 9px 0;
  text-align: left;
  font-weight: var(--cliente-fw-regular);
}
.site-pub-horarios th { font-weight: var(--cliente-fw-semibold); }
.site-pub-horarios td { text-align: right; }
.site-pub-mapa {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 10px 0;
  border-radius: var(--cliente-raio-campo);
  overflow: hidden;
}
.site-pub-mapa iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* ---------------- Rodapé ---------------- */
.site-pub-footer {
  background: var(--cliente-fundo-escuro);
  color: var(--cliente-texto-claro-secundario);
  padding: 40px 0 20px;
}
.site-pub-footer__grade {
  max-width: var(--site-pub-largura-conteudo);
  margin: 0 auto;
  padding: 0 var(--cliente-margem-lateral-mobile, 18px);
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
.site-pub-footer__marca .site-pub-logo { color: #fff; }
.site-pub-footer__slogan { font-size: var(--cliente-fs-corpo-pequeno); margin-top: 8px; }
.site-pub-footer__coluna p { margin: 0 0 8px; font-size: var(--cliente-fs-corpo-pequeno); }
.site-pub-footer__coluna a { color: var(--cliente-texto-claro-secundario); text-decoration: none; }
.site-pub-footer__coluna a:hover { color: #fff; }
/* SITE-001-R3, item 12 — coluna de horários no rodapé (par dia/hora
   alinhado nas duas pontas, mesmo padrão visual da tabela em Contato). */
.site-pub-footer__horario { display: flex; justify-content: space-between; gap: 10px; }
.site-pub-footer__copyright {
  text-align: center;
  font-size: var(--cliente-fs-legenda);
  opacity: .6;
  margin: 32px 0 0;
}

.site-pub-indisponivel { text-align: center; padding: 80px 0; }

/* ---------------- Responsivo ---------------- */
@media (min-width: 768px) {
  .site-pub-footer__grade { grid-template-columns: 1.2fr 1fr 1fr; }
}

@media (min-width: 1024px) {
  .site-pub-nav-desktop { display: flex; }
  .site-pub-header__acoes { display: flex; }
  .site-pub-menu-toggle { display: none; }
  .site-pub-portal { flex-direction: row; align-items: center; justify-content: space-between; }
  .site-pub-portal > div:first-child { flex: 1; }

  /* SITE-001-R3 — mesmo breakpoint já usado por .site-pub-portal para
     ligar/desligar o layout em coluna x linha, agora reaproveitado
     pelas novas seções em par. */
  .site-pub-secao-par { grid-template-columns: 1fr 1fr; gap: 28px; }
  .site-pub-secao-par--unica { grid-template-columns: 1fr; }

  /* Item 14/15 — mais espaço vertical em telas grandes (era o mesmo
     padding fixo do mobile, ficava apertado em 1366/1600/1920). */
  .site-pub-secao { padding: 80px 0; }
  .site-pub-faixa { padding: 56px 0; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .site-pub-secao { padding: 64px 0; }
}

/* Rodapé com 4 colunas quando a de Horários existe (classe adicionada
   pelo próprio footer.php só quando $horarios não está vazio — nunca
   um seletor :has() para algo que a view já sabe decidir). */
@media (min-width: 1024px) {
  .site-pub-footer__grade--4col { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
}

/* ---------------- Movimento reduzido ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ==================== SITE-002 — Galeria (Home + /galeria) ==================== */
/* Item 4 da sprint: 2 colunas no mobile, 2-3 no tablet, 3-4 no desktop.
   Colunas explícitas (não auto-fit) para garantir a contagem pedida em
   cada breakpoint, mesmo padrão de .cliente-grid-cards--N-desktop. */
.site-pub-galeria-grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.site-pub-galeria-item {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--cliente-raio-card, 12px);
  overflow: hidden;
  cursor: pointer;
  background: none;
  aspect-ratio: 4 / 3;
}
.site-pub-galeria-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.site-pub-galeria-item:hover img, .site-pub-galeria-item:focus-visible img { transform: scale(1.04); }
.site-pub-galeria-item:focus-visible { outline: 3px solid var(--cliente-verde); outline-offset: 2px; }

@media (min-width: 768px) {
  .site-pub-galeria-grade { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (min-width: 1240px) {
  .site-pub-galeria-grade { grid-template-columns: repeat(4, 1fr); }
}

/* Filtro de categoria da página /galeria — botões simples, nunca rolagem
   horizontal obrigatória (envolve/quebra linha). */
.site-pub-galeria-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 24px;
}
.site-pub-galeria-filtro {
  padding: 8px 16px;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid var(--cliente-borda, #d0d5dd);
  background: var(--cliente-superficie, #fff);
  color: inherit;
  font-size: var(--cliente-fs-corpo-pequeno);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.site-pub-galeria-filtro[aria-current="true"] { background: var(--cliente-verde); color: #fff; border-color: var(--cliente-verde); }

.site-pub-galeria-legenda { font-size: var(--cliente-fs-corpo-pequeno); opacity: .7; margin: 6px 0 0; }

/* ---------------- Lightbox (item 4: próprio, sem biblioteca externa) ---------------- */
.site-pub-galeria-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 22, .92);
  padding: 16px;
}
/* O atributo `hidden` do HTML só tem efeito via a folha de estilos do
   próprio USER AGENT ([hidden]{display:none}) — uma regra de AUTOR como
   a de cima (`display: flex` incondicional) sempre vence a origem UA,
   independente de especificidade, então sem esta regra explícita o
   modal ficaria sempre visível por cima da página mesmo com
   `hidden` presente no HTML. Mesmo bug/mesma correção já documentados
   em outro módulo deste projeto (ESC-001, painel de atendimento). */
.site-pub-galeria-modal[hidden] { display: none; }
.site-pub-galeria-modal__figura {
  max-width: min(92vw, 1100px);
  max-height: 90vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.site-pub-galeria-modal__figura img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 8px;
}
.site-pub-galeria-modal__legenda { color: #fff; opacity: .85; font-size: var(--cliente-fs-corpo-pequeno); margin-top: 10px; text-align: center; }
.site-pub-galeria-modal__fechar {
  position: absolute;
  top: 16px; right: 16px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.site-pub-galeria-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.site-pub-galeria-modal__nav--anterior { left: 12px; }
.site-pub-galeria-modal__nav--proxima { right: 12px; }
.site-pub-galeria-modal__fechar:focus-visible,
.site-pub-galeria-modal__nav:focus-visible { outline: 3px solid #fff; }

@media (min-width: 768px) {
  .site-pub-galeria-modal__fechar { top: 24px; right: 24px; }
  .site-pub-galeria-modal__nav--anterior { left: 24px; }
  .site-pub-galeria-modal__nav--proxima { right: 24px; }
}

/* ==================== SITE-002 — FAQ ==================== */
/* Item 19: details/summary nativos — funciona por teclado/leitor de
   tela sem NENHUM JavaScript. */
.site-pub-faq { display: flex; flex-direction: column; gap: 10px; }
.site-pub-faq__item {
  border: 1px solid var(--cliente-borda, #d0d5dd);
  border-radius: var(--cliente-raio-card, 12px);
  padding: 4px 16px;
  background: var(--cliente-superficie, #fff);
}
.site-pub-faq__pergunta {
  padding: 14px 4px;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: var(--cliente-fw-bold);
  cursor: pointer;
  list-style: none;
}
.site-pub-faq__pergunta::-webkit-details-marker { display: none; }
.site-pub-faq__pergunta::before { content: '+'; margin-right: 10px; font-weight: 400; }
.site-pub-faq__item[open] .site-pub-faq__pergunta::before { content: '−'; }
.site-pub-faq__pergunta:focus-visible { outline: 3px solid var(--cliente-verde); outline-offset: 2px; }
.site-pub-faq__resposta { margin: 0 0 14px; padding-left: 20px; font-size: var(--cliente-fs-corpo-pequeno); opacity: .85; }

/* ==================== SITE-002 — CTA fixo mobile (item 21, configurável/desativável) ==================== */
.site-pub-cta-fixo {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--cliente-superficie, #fff);
  border-top: 1px solid var(--cliente-borda, #d0d5dd);
  box-shadow: 0 -4px 12px rgba(0,0,0,.08);
}
.site-pub-cta-fixo .site-pub-btn { width: 100%; min-height: 48px; }

@media (min-width: 768px) {
  .site-pub-cta-fixo { display: none; }
}

/* ---------------- Tema escuro do sistema (o site tem seu próprio esquema claro/escuro por seção; não segue prefers-color-scheme automaticamente, mesma decisão já tomada para a Comanda na FRONT-009) ---------------- */