/* ════════════════════════════════════════════════════════════════════════
   LAYOUT NOVO DAS PÁGINAS PÚBLICAS (10/11/2026, pedido do usuário; docs/46)
   ────────────────────────────────────────────────────────────────────────
   Calendário, agenda, rifa, excursão, perfil do consulente, perfil do
   membro, preferências e mensalidade. Cada página tem o próprio <style>, e
   esta folha entra DEPOIS dele (link no fim do <head>) com a mesma
   linguagem do app novo (app-v2.css): fundo cinza quente, cartões brancos
   arredondados sem borda, títulos em Bricolage, botões em pílula, campos de
   16 px (no iPhone, campo menor que 16 px faz a página dar zoom ao tocar).

   ⚠️ Vale para TODA casa, sem a chave `layout_v2`: as páginas são de quem é
   de fora e não carregam a config da casa. A cor continua sendo a da casa
   (`--red`, posta pelo JS de cada página).
   ⚠️ Os tokens abaixo cobrem os NOMES que as páginas usam (--bg, --card,
   --text, --grey-*, --radius): trocar aqui leva o desenho também ao estilo
   escrito na linha.
   ════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Bricolage V2";
  src: url("/fonts/BricolageGrotesque-SemiBold.ttf") format("truetype");
  font-weight: 500 650;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage V2";
  src: url("/fonts/BricolageGrotesque-ExtraBold.ttf") format("truetype");
  font-weight: 700 900;
  font-display: swap;
}

:root {
  --pv2-canvas: #f1f0ec;
  --pv2-card: #ffffff;
  --pv2-ink: #17171a;
  --pv2-muted: #5d5d64;
  --pv2-line: #e6e4de;
  --pv2-soft: #f6f5f2;
  --pv2-sombra: 0 1px 2px rgba(23, 23, 26, .04), 0 6px 20px rgba(23, 23, 26, .05);
  --pv2-display: "Bricolage V2", ui-sans-serif, system-ui, sans-serif;

  --bg: var(--pv2-canvas);
  --card: var(--pv2-card);
  --text: var(--pv2-ink);
  --black: var(--pv2-ink);
  --grey-1: var(--pv2-muted);
  --grey-2: #8c8b92;
  --grey-3: var(--pv2-line);
  --grey-4: var(--pv2-soft);
  --grey-5: #fbfaf8;
  --white: var(--pv2-card);
  --radius: 20px;
}

html, body {
  background: var(--pv2-canvas) !important;
  color: var(--pv2-ink);
  -webkit-font-smoothing: antialiased;
}

/* ── Títulos ─────────────────────────────────────────────────────────── */
h1, h2,
.titulo-cartao, .card-title, .casa-nome, .sucesso-titulo, .error-titulo {
  font-family: var(--pv2-display);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.titulo-cartao, .card-title { font-size: 19px; font-weight: 700; color: var(--pv2-ink); }
/* Nos perfis e nas preferências o título do cartão era um rótulo miúdo em
   caixa alta: vira título de verdade, como nos cartões do app. */
.card-title { font-size: 17px !important; text-transform: none !important; letter-spacing: -.01em !important; color: var(--pv2-ink) !important; }

/* ── Cartões ─────────────────────────────────────────────────────────── */
.cartao, .card, .sucesso-card {
  border: none !important;
  border-radius: 20px !important;
  background: var(--pv2-card);
  box-shadow: var(--pv2-sombra);
}
.cartao { padding: 20px; }

/* ── Botões e campos ─────────────────────────────────────────────────── */
.btn, .btn-primary, .btn-secondary, .btn-danger { border-radius: 999px !important; }
.btn, .btn-primary { padding-top: 14px; padding-bottom: 14px; }
.btn-secondary { background: var(--pv2-soft); }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),
select, textarea {
  border-radius: 12px !important;
  border-color: var(--pv2-line);
  font-size: 16px !important;
  background-color: var(--pv2-card);
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent);
}
:focus-visible { outline-color: var(--red); }

/* Texto de leitura um pouco maior (pedido do usuário: a letra era pequena). */
.texto, .card-desc, .hint, .casa-desc { font-size: 15px; line-height: 1.55; }
.nota { font-size: 12.5px; }

/* "Feito com Sou do Axé": sem o tracejado, como mais um cartão. */
.promo { border-style: none !important; background: var(--pv2-soft) !important; box-shadow: none !important; }

/* ════════════════════════════════════════════════════════════════════════
   CALENDÁRIO (/calendario)
   ════════════════════════════════════════════════════════════════════════ */
.cal-lado, .cal-principal { display: flex; flex-direction: column; gap: 14px; }

/* A identidade da casa abre com uma faixa na cor dela, e a logo sobre a
   faixa. O nome fica em tinta escura: em casa de cor clara (amarelo) o nome
   na cor da casa não se lia. */
.cal-grade .casa { border-top: none !important; padding-top: 0 !important; overflow: hidden; }
.cal-grade .casa::before {
  content: "";
  display: block;
  height: 96px;
  margin: 0 -20px;
  background: var(--red);
  background-image: radial-gradient(120% 160% at 100% 0%, rgba(255, 255, 255, .22), transparent 55%);
}
.cal-grade .casa-logo {
  width: 104px !important;
  height: 104px !important;
  margin-top: -54px;
  position: relative;
  box-shadow: 0 0 0 5px var(--pv2-card), 0 8px 24px rgba(23, 23, 26, .12);
}
.cal-grade .casa-sigla { margin-top: 12px; color: var(--red); }
.cal-grade .casa-nome { font-size: 28px !important; font-weight: 700; color: var(--pv2-ink) !important; }
.cal-grade .rede { background: var(--pv2-soft) !important; border: none !important; width: 42px !important; height: 42px !important; }
.cal-grade .rede:hover, .cal-grade .rede:focus-visible { background: var(--red) !important; color: #fff; }

.cal-grade .secao {
  font-family: var(--pv2-display);
  font-size: 22px !important;
  font-weight: 700;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  color: var(--pv2-ink) !important;
  margin: 6px 2px 0 !important;
}
.cal-grade .ev-card {
  border: none !important;
  border-radius: 18px !important;
  box-shadow: var(--pv2-sombra);
  padding: 16px !important;
}
.cal-grade .ev-card.proxima { box-shadow: 0 0 0 2px var(--red), var(--pv2-sombra) !important; }
.cal-grade .ev-arte { border: none !important; border-radius: 14px !important; }
.cal-grade .ev-arte img { border-radius: 14px !important; }
.cal-grade .ev-titulo { font-family: var(--pv2-display); font-size: 18px !important; letter-spacing: -.005em; }
.cal-grade .ev-data { font-size: 14px !important; }
.cal-grade .ev-obs { font-size: 14px !important; }
.cal-grade .ag-item {
  border: none !important;
  background: var(--pv2-soft);
  border-radius: 16px !important;
}
.cal-grade .ag-item:hover { background: color-mix(in srgb, var(--red) 8%, var(--pv2-soft)) !important; }
.cal-grade .ag-capa { border-radius: 12px !important; }
.cal-grade .ag-proxima { border: none !important; border-radius: 14px !important; }
.cal-grade .ag-proxima-bt { border-radius: 999px !important; }
.cal-grade .doacoes-lista li { border: none !important; background: var(--pv2-soft) !important; font-size: 13px !important; padding: 6px 12px !important; }

/* "Veja também" só com rifa, excursão ou doações à mostra. */
.cal-grade .cal-veja { display: none; }
.cal-grade .cal-lado:has(> #rifas:not([hidden]), > #excursoes:not([hidden]), > #loja:not([hidden]), > #doacoes:not([hidden])) > .cal-veja { display: block; }

/* Computador: as giras na coluna larga, o resto na lateral. */
@media (min-width: 900px) {
  .pagina:has(.cal-grade) { max-width: 1100px !important; padding: 32px 32px 48px !important; }
  .cal-grade {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 22px !important;
    align-items: start;
  }
  .cal-grade > * { grid-column: 1 / -1; }
  .cal-grade > .cal-principal { grid-column: 1; grid-row: 2; }
  .cal-grade > .cal-lado { grid-column: 2; grid-row: 2; }
  .cal-grade .casa::before { height: 120px; }
  .cal-grade .casa-logo { width: 120px !important; height: 120px !important; margin-top: -62px; }
  .cal-grade .casa-nome { font-size: 34px !important; }
  .cal-grade .ev-arte { width: 132px !important; height: 132px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   RIFA E EXCURSÃO (cabeçalho com a casa) e AGENDA
   ════════════════════════════════════════════════════════════════════════ */
/* A faixa de 4 px no alto dos cartões e a barra na esquerda das opções eram o
   jeito antigo de pôr a cor da casa; aqui ela vai nos botões e nos destaques. */
.casa, .quadro { border-top: none !important; }
.casa-nome { color: var(--pv2-ink) !important; }
.casa-sigla { color: var(--red) !important; }
.quadro { border: none !important; border-radius: 22px !important; box-shadow: var(--pv2-sombra); }
.opcao {
  border: none !important;
  background: var(--pv2-soft) !important;
  border-radius: 16px !important;
}
.opcao:hover { background: color-mix(in srgb, var(--red) 8%, var(--pv2-soft)) !important; }
.opcao-capa { border-radius: 12px !important; }
.contexto { border: none !important; background: color-mix(in srgb, var(--red) 7%, var(--pv2-card)) !important; border-radius: 14px !important; }

/* Mensalidade: os botões são <button> sem classe. */
.caixa button:not(.link) { border-radius: 999px !important; }

/* ════════════════════════════════════════════════════════════════════════
   PERFIL DO CONSULENTE, PERFIL DO MEMBRO, PREFERÊNCIAS
   ════════════════════════════════════════════════════════════════════════ */
.card { padding: 20px !important; }
.field input, .field select, .field textarea { padding: 12px 14px !important; }
.field label { font-size: 13px !important; }

/* ════════════════════════════════════════════════════════════════════════
   FUNDO VIVO (10/11/2026, pedido do usuário; o mesmo do app, docs/46)
   Três cores mescladas passeiam atrás da página: a da casa e as duas da
   tríade dela, clareadas e fracas. Os cartões viram vidro (translúcidos com
   desfoque) para o movimento aparecer por trás.
   ⚠️ Camadas do <body> com z-index -1 dentro de `isolation: isolate`: o fundo
   do body pinta primeiro, as cores por cima dele e o conteúdo por cima de tudo.
   ⚠️ A cor da casa (--red) é posta pelo JS de cada página ao carregar; a
   tríade é calculada dela, então acompanha sozinha.
   ⚠️ No celular o desfoque dos cartões é mais leve (pesa menos na rolagem).
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --pv2-cor-2: hsl(from var(--red) calc(h + 120) s l);
  --pv2-cor-3: hsl(from var(--red) calc(h + 240) s l);
  --pv2-mancha-1: color-mix(in srgb, var(--red) 72%, #fff);
  --pv2-mancha-2: color-mix(in srgb, var(--pv2-cor-2) 68%, #fff);
  --pv2-mancha-3: color-mix(in srgb, var(--pv2-cor-3) 68%, #fff);
  --pv2-vidro: color-mix(in srgb, #fff 62%, transparent);
  --pv2-vidro-borda: color-mix(in srgb, #fff 60%, transparent);
  --pv2-vidro-suave: color-mix(in srgb, #fff 45%, transparent);
}
@supports not (color: hsl(from red h s l)) {
  :root { --pv2-cor-2: #2fbf5a; --pv2-cor-3: #3f6df0; }
}
body { isolation: isolate; }
body::before, body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  opacity: .34;
  filter: blur(70px);
  will-change: transform;
}
/* Camada larga: a cor da casa (a maior) e a segunda da tríade. */
body::before {
  inset: -25%;
  background:
    radial-gradient(34% 40% at 30% 30%, var(--pv2-mancha-1), transparent 72%),
    radial-gradient(24% 30% at 72% 68%, var(--pv2-mancha-2), transparent 72%);
  animation: pv2-mancha-a 52s ease-in-out infinite alternate;
}
/* Camada menor: a terceira, cruzando as outras. */
body::after {
  width: 60vw;
  height: 60vh;
  top: 35vh;
  left: 35vw;
  background: radial-gradient(closest-side, var(--pv2-mancha-3), transparent);
  animation: pv2-mancha-b 37s ease-in-out infinite alternate;
}
@keyframes pv2-mancha-a {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  35%  { transform: translate(14%, 8%) rotate(40deg) scale(1.08); }
  70%  { transform: translate(-6%, 14%) rotate(-25deg) scale(.95); }
  100% { transform: translate(10%, -8%) rotate(70deg) scale(1.05); }
}
@keyframes pv2-mancha-b {
  0%   { transform: translate(0, 0) scale(1); }
  40%  { transform: translate(-48%, -36%) scale(1.15); }
  75%  { transform: translate(-70%, 10%) scale(.9); }
  100% { transform: translate(-20%, -55%) scale(1.08); }
}

/* Cartões de vidro. O !important vence o fundo branco que cada página
   escreve no próprio <style>. */
.cartao, .card, .sucesso-card, .quadro, .cal-grade .ev-card {
  background: var(--pv2-vidro) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: var(--pv2-sombra), inset 0 0 0 1px var(--pv2-vidro-borda) !important;
}
.cal-grade .ev-card.proxima { box-shadow: 0 0 0 2px var(--red), var(--pv2-sombra) !important; }
/* Itens dentro dos cartões (agenda, opções, doações): um véu, sem desfoque
   (desfoque dentro de desfoque não enxerga o fundo). */
.cal-grade .ag-item, .opcao, .cal-grade .doacoes-lista li, .cal-grade .rede, .promo, .btn-secondary {
  background: var(--pv2-vidro-suave) !important;
}
@media (min-width: 801px) {
  .cartao, .card, .sucesso-card, .quadro, .cal-grade .ev-card {
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
  }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}