@font-face{font-family:'Cinzel';src:url(../fonts/Cinzel-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Cinzel';src:url(../fonts/Cinzel-Black.ttf) format('truetype');font-weight:900;font-display:swap}
/* Museu Histórico (/40anos) — a linguagem do site (style.css) em verde e ouro do painel dos 40 anos.
   Os tokens de cor são trocados só dentro do <main>: todo componente do site usado na página
   (pincel, selos, cartões de número e de estrutura, botões, olho, títulos, check, formulário) já sai verde.
   Cabeçalho e rodapé ficam fora do <main> e mantêm o azul do clube. Carregado só por views/40anos.php. */

.pg-museu main{
  --azul:#16833F;            /* ação: botões, links, destaque dos títulos */
  --azul-forte:#106B32;
  --azul-noite:#0C4A24;      /* títulos e blocos escuros */
  --azul-abissal:#062E16;
  --ceu:#2DAA4F;
  --agua:#7CCB4F;
  --agua-escura:#2E8F3E;
  --verde-vivo:#8BD45F;
  --ouro:#E0A21B;
  --nuvem:#F1F7EC;
  --nuvem-2:#E4F0DB;
  --linha:#DDEAD4;
  --borda:#DDEAD4;
  --borda-forte:#BDD7AE;
  --tinta:#11301C;
  --tinta-2:#3D5A44;
  --tinta-3:#6C8571;
  --texto:var(--tinta);
  --texto-suave:var(--tinta-2);
  --texto-fraco:var(--tinta-3);
  --sombra-1:0 2px 8px rgba(12,74,36,.06), 0 14px 30px -18px rgba(12,74,36,.24);
  --sombra-2:0 6px 16px rgba(12,74,36,.08), 0 26px 50px -24px rgba(12,74,36,.34);
  --sombra-3:0 10px 30px rgba(12,74,36,.12), 0 44px 80px -36px rgba(12,74,36,.42);
  --respingo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M10 31c-5-8-2-18 6-24-3 8-1 17 5 24-3 3-8 3-11 0z' fill='%2316833F'/%3E%3Cpath d='M22 15c1-8 7-13 14-14-6 5-7 13-4 20-5 0-9-2-10-6z' fill='%23E0A21B'/%3E%3Cpath d='M28 33c-2-6 1-11 6-13-2 5-1 10 3 14-3 2-7 1-9-1z' fill='%2316833F'/%3E%3Ccircle cx='30' cy='6' r='2' fill='%23E0A21B'/%3E%3C/svg%3E");
  --onda-nuvem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 68c78-20 132 16 206 22 66 6 112-22 182-25 78-4 120 30 198 27 74-3 112-32 186-32 82 0 130 34 212 30 70-4 108-29 178-26 62 3 108 27 168 20 44-5 78-18 110-27v63H0Z' fill='%23F1F7EC'/%3E%3C/svg%3E");
}
.pg-museu main .tema-escuro{--bg:var(--azul-noite);--texto-suave:#CFE6C9;--texto-fraco:#A5C79C}
/* o body do site tem overflow-x:hidden, que vira contêiner de rolagem e desliga o sticky do palco 3D */
body.pg-museu{overflow:visible;overflow-x:clip}

/* ── entrada: foto inteira, título em blocos de pincel (mesma receita do banner da home) ── */
.mu-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--azul-noite);height:clamp(440px,46vw,700px)}
.mu-hero-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;z-index:-1}
.mu-hero-txt{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding-bottom:calc(36px + clamp(34px,4vw,56px))}
.mu-hero .hero-titulo{font-size:clamp(1.9rem,4.4vw,3.9rem)}
.mu-hero .pincel{background:linear-gradient(100deg,#0E6B32 0%,#16833F 100%);box-shadow:0 16px 34px -14px rgba(4,40,16,.8)}
.mu-hero .pincel--2{background:linear-gradient(100deg,#16833F 0%,#0C4A24 100%)}
.mu-hero .hero-etiqueta{background:linear-gradient(180deg,#FFE04D,#FFB300);color:var(--azul-abissal)}
.mu-hero .hero-ctas{margin-top:22px}
.mu-hero .hero-ctas .btn{box-shadow:0 12px 26px -12px rgba(0,0,0,.65)}

/* faixa de selos: as pinceladas verde e amarela do site já são as cores da campanha */
.mu-selos{grid-template-columns:repeat(5,1fr)}

/* ── visita 3D ── */
.mu-visita{position:relative;background:linear-gradient(180deg,var(--azul-noite) 0%,#0A3D1E 100%);padding-top:clamp(70px,8vw,110px);color:#fff;isolation:isolate}
.mu-visita::before{content:'';position:absolute;left:0;right:0;top:-2px;height:clamp(34px,4.6vw,70px);z-index:2;pointer-events:none;
  background:var(--onda-branca) bottom/100% 100% no-repeat;transform:scaleY(-1)}
.mu-visita-topo{text-align:center;display:grid;justify-items:center;gap:6px;padding-bottom:clamp(26px,3vw,40px)}
.mu-visita-topo .display{color:#fff;font-size:clamp(1.9rem,3.8vw,3.2rem);margin:2px 0 8px}
.mu-visita-topo .lead{color:#CFE6C9;max-width:52ch;margin-inline:auto}
.mu-percurso{position:relative;display:none;height:calc(var(--paradas, 14) * 105svh)}
.mu-modo-3d .mu-percurso{display:block}
.mu-palco{position:sticky;top:0;height:100svh;overflow:hidden;background:#BFE4FF}
.mu-palco canvas{display:block;width:100%;height:100%;touch-action:pan-y}

/* planta: os anos numa pílula branca, como os chips do site */
.mu-planta{position:absolute;left:50%;top:108px;transform:translateX(-50%);display:flex;gap:2px;max-width:calc(100% - 32px);overflow-x:auto;scrollbar-width:none;
  padding:5px;border-radius:var(--r-pill);background:rgba(255,255,255,.94);box-shadow:var(--sombra-2);backdrop-filter:blur(8px)}
.mu-planta::-webkit-scrollbar{display:none}
.mu-planta button{flex:none;padding:.62em .95em;border-radius:var(--r-pill);border:0;background:none;cursor:pointer;white-space:nowrap;
  font-family:var(--display);font-weight:800;font-style:italic;font-size:.74rem;letter-spacing:.02em;text-transform:uppercase;color:var(--tinta-2);transition:background .3s,color .3s}
.mu-planta button:hover{color:var(--azul)}
.mu-planta button.on{background:var(--azul);color:#fff;box-shadow:0 8px 18px -8px rgba(22,131,63,.8)}

/* cartão da sala: cartão branco do site, com o ano num selo dourado; fica do lado oposto ao quadro */
.mu-cartao{position:absolute;left:clamp(16px,3.5vw,52px);bottom:clamp(20px,6vh,64px);width:min(400px,calc(100% - 32px));
  padding:30px 28px 26px;background:#fff;color:var(--tinta);border-radius:var(--r-xl);box-shadow:var(--sombra-3);
  opacity:0;transform:translateY(18px) scale(.98);transition:opacity .5s var(--ease-out),transform .6s var(--mola);pointer-events:none}
.mu-cartao.lado-dir{left:auto;right:clamp(16px,3.5vw,52px)}
.mu-cartao.mostra{opacity:1;transform:none;pointer-events:auto}
.mu-cartao-ano{position:absolute;top:-22px;left:24px;padding:.4em 1em;border-radius:var(--r-pill);
  background:linear-gradient(180deg,#FFE04D,#FFB300);color:var(--azul-abissal);font-family:var(--display);font-weight:900;font-style:italic;font-size:1.25rem;
  box-shadow:0 12px 22px -10px rgba(255,179,0,.9);transform:rotate(-2deg)}
.mu-cartao .olho{color:var(--azul);font-size:.86rem}
.mu-cartao-tit{font-size:clamp(1.25rem,1.8vw,1.6rem);margin:4px 0 8px}
.mu-cartao-txt{color:var(--tinta-2);font-size:.95rem;line-height:1.55;margin-bottom:16px}
.mu-dica{position:absolute;left:50%;bottom:26px;transform:translateX(-50%) rotate(-1.5deg);padding:.6em 1.2em;border-radius:var(--r-pill);
  background:var(--amarelo);color:var(--azul-abissal);font-family:var(--display);font-weight:800;font-style:italic;font-size:.8rem;text-transform:uppercase;
  letter-spacing:.03em;box-shadow:0 12px 24px -10px rgba(0,0,0,.35);transition:opacity .5s;white-space:nowrap}
.mu-dica span{display:inline-block;animation:mu-desce 1.6s ease-in-out infinite}
@keyframes mu-desce{50%{transform:translateY(4px)}}
.mu-dica.some{opacity:0}
.mu-carregando{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:16px;background:linear-gradient(180deg,#BFE4FF,#E9F6FF);
  font-family:var(--display);font-weight:800;font-style:italic;text-transform:uppercase;color:var(--azul-noite);transition:opacity .7s,visibility .7s}
.mu-carregando span{width:48px;height:48px;border-radius:50%;border:5px solid rgba(22,131,63,.2);border-top-color:var(--azul);animation:mu-gira .9s linear infinite}
@keyframes mu-gira{to{transform:rotate(360deg)}}
.mu-carregando.some{opacity:0;visibility:hidden}
.mu-ver-lista{position:absolute;right:clamp(16px,3.5vw,52px);top:170px;padding:.6em 1.1em;border-radius:var(--r-pill);border:0;cursor:pointer;
  background:rgba(255,255,255,.94);color:var(--azul-noite);font-family:var(--display);font-weight:800;font-style:italic;font-size:.72rem;text-transform:uppercase;box-shadow:var(--sombra-1)}

/* ── linha do tempo em cartões (o mesmo cartão da "Nossa estrutura") ── */
.sec-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(26px,3vw,40px)}
.mu-linha{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.mu-sala-foto{width:100%;border:0;padding:0;cursor:zoom-in;text-align:left}
.mu-sala-ano{position:absolute;left:12px;bottom:12px;padding:.32em .8em;border-radius:var(--r-pill);background:var(--c);color:#fff;
  font-family:var(--display);font-weight:900;font-style:italic;font-size:1.05rem;box-shadow:0 0 0 3px rgba(255,255,255,.92),0 8px 16px -6px rgba(0,0,0,.4)}
.mu-sala-qtd{position:absolute;right:10px;top:10px;padding:.35em .75em;border-radius:var(--r-pill);background:rgba(255,255,255,.92);color:var(--azul-noite);
  font-family:var(--display);font-weight:800;font-size:.66rem;text-transform:uppercase;letter-spacing:.04em}
.mu-sala .estrutura-txt{text-align:left;padding:16px 18px 20px}
.mu-sala-num{font-family:var(--display);font-weight:800;font-style:italic;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--c)}
.mu-sala .estrutura-txt span{font-size:.88rem}

/* ── faixa verde: Sala dos Sócios + formulário (molde da faixa "Vantagens") ── */
.mu-faixa{position:relative;color:#fff;isolation:isolate;overflow:hidden;
  background:linear-gradient(110deg,#16833F 0%,#0E6B32 42%,#0C4A24 100%);padding-block:clamp(84px,10vw,140px)}
.mu-faixa::before,.mu-faixa::after{content:'';position:absolute;left:0;right:0;height:clamp(34px,4.6vw,70px);z-index:1;pointer-events:none;background:var(--onda-branca) bottom/100% 100% no-repeat}
.mu-faixa::before{top:-2px;transform:scaleY(-1);background-image:var(--onda-nuvem)}
.mu-faixa::after{bottom:-2px}
.mu-faixa-grade{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(30px,4.5vw,72px);align-items:center}
.mu-faixa .olho{color:var(--amarelo)}
.mu-faixa .display{color:#fff;margin:2px 0 20px;font-size:clamp(1.9rem,3.6vw,3rem)}
.mu-faixa .display em{color:var(--amarelo)}
.mu-faixa .lead{color:#D8EED2;margin-bottom:22px}
.mu-dicas li{color:#fff}
.mu-mural{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mu-mural-item{border:0;padding:0;background:none;cursor:zoom-in;text-align:left;color:#D8EED2;font-size:.82rem}
.mu-mural-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-lg);box-shadow:0 0 0 4px rgba(255,255,255,.18),var(--sombra-2)}
.mu-mural-item span{display:block;margin-top:8px}
.mu-mural-item b{color:#fff}
.mu-form{background:#fff;color:var(--tinta);border-radius:var(--r-xl);padding:clamp(24px,3vw,38px);box-shadow:0 40px 70px -34px rgba(0,0,0,.6)}
.mu-form-tit{font-family:var(--display);font-weight:900;font-style:italic;text-transform:uppercase;font-size:1.3rem;color:var(--azul-noite)}
.mu-form .campo input:focus,.mu-form .campo textarea:focus{box-shadow:inset 0 0 0 2.5px var(--azul)}
.mu-form .check{color:var(--tinta-2)}
.mu-form .check input{background:#fff;box-shadow:inset 0 0 0 2px var(--borda-forte)}
.mu-form .check input:checked{background:var(--azul);box-shadow:none}
.mu-form .btn{justify-self:start}
.mu-form-nota{color:var(--tinta-3);font-size:.78rem;margin-top:-6px}
.mu-campo-arquivo input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mu-arquivo{display:flex;align-items:center;gap:10px;padding:.9em 1.1em;border-radius:var(--r);cursor:pointer;
  box-shadow:inset 0 0 0 2px var(--borda-forte);border:0;font-family:var(--display);font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:var(--azul);
  background:var(--nuvem);transition:box-shadow .25s,background .25s;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mu-arquivo:hover{box-shadow:inset 0 0 0 2.5px var(--azul)}
.mu-arquivo svg{width:18px;height:18px;flex:none}
.mu-arquivo span{overflow:hidden;text-overflow:ellipsis}
.mu-previa{width:100%;max-height:160px;object-fit:cover;border-radius:var(--r);margin-top:8px}

/* ── foto ampliada ── */
.mu-luz{max-width:none;max-height:none;width:100vw;height:100dvh;margin:0;padding:0;border:0;background:rgba(6,46,22,.94);color:#fff}
.mu-luz[open]{display:grid;place-items:center}
.mu-luz::backdrop{background:rgba(6,46,22,.8)}
.mu-luz figure{margin:0;display:grid;justify-items:center;gap:16px;padding:70px 76px 34px}
.mu-luz img{max-width:min(1400px,100%);max-height:calc(100dvh - 170px);object-fit:contain;border-radius:var(--r-lg);box-shadow:0 30px 70px -20px rgba(0,0,0,.7)}
.mu-luz figcaption{font-family:var(--display);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.02em;text-align:center;
  background:var(--amarelo);color:#062E16;padding:.5em 1.1em;border-radius:var(--r-pill);transform:rotate(-1deg)}
.mu-luz figcaption:empty{display:none}
.mu-luz-fecha,.mu-luz-nav{position:absolute;width:52px;height:52px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  background:#fff;color:#0C4A24;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);transition:transform .3s var(--mola),background .3s}
.mu-luz-fecha:hover{transform:scale(1.08);background:var(--amarelo)}
.mu-luz-fecha{top:16px;right:18px}
.mu-luz-nav{top:50%;transform:translateY(-50%)}
.mu-luz-nav:hover{transform:translateY(-50%) scale(1.08);background:var(--amarelo)}
.mu-luz-ant{left:16px} .mu-luz-prox{right:16px}

@media (max-width:1100px){
  .mu-linha{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mu-selos{grid-template-columns:repeat(3,1fr);row-gap:10px}
}
@media (max-width:900px){
  .mu-faixa-grade{grid-template-columns:1fr}
  .mu-linha{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mu-planta{top:96px}
  .mu-ver-lista{top:152px}
  .mu-cartao,.mu-cartao.lado-dir{left:16px;right:16px;width:auto;bottom:84px;padding:26px 20px 18px}
  .mu-cartao-txt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:12px;font-size:.88rem}
  .mu-cartao-tit{font-size:1.1rem}
  .mu-luz figure{padding:76px 12px 24px}
  .mu-luz-nav{top:auto;bottom:18px;transform:none}
  .mu-luz-nav:hover{transform:scale(1.08)}
}
@media (max-width:600px){
  .mu-hero{height:clamp(540px,150vw,700px)}
  .mu-hero .hero-ctas{flex-direction:column;align-items:flex-start}
  .mu-hero-foto{object-position:62% 50%}
  .mu-selos{grid-template-columns:repeat(2,1fr)}
  .mu-selos .selo-item:last-child{grid-column:1 / -1}
  .mu-linha{grid-template-columns:1fr}
  .mu-mural{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){.mu-dica span{animation:none}}
/* sem 3D (sem WebGL, "menos movimento" ou economia de dados) a chamada da visita sai e fica a linha do tempo */
html:not(.mu-modo-3d) .mu-visita{display:none}
/* cartão da sala e formulário são brancos dentro de faixas escuras: voltam aos tokens claros */
.pg-museu main .mu-cartao,.pg-museu main .mu-form{--texto:var(--tinta);--texto-suave:var(--tinta-2);--texto-fraco:var(--tinta-3);--borda:#DDEAD4;--borda-forte:#BDD7AE;--superficie:#fff}
.mu-cartao .display{color:var(--azul-noite)}
.mu-form .campo label{color:var(--tinta-2)}
.mu-form .campo input,.mu-form .campo textarea{background:#fff;border:0;color:var(--tinta);box-shadow:inset 0 0 0 2px var(--borda-forte)}
.mu-form .campo input::placeholder,.mu-form .campo textarea::placeholder{color:var(--tinta-3)}
/* onda no fim da visita, entrando na linha do tempo */
.mu-visita::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:clamp(34px,4.6vw,70px);z-index:3;pointer-events:none;background:var(--onda-nuvem) bottom/100% 100% no-repeat}