@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 700;font-display:swap;src:url(/wp-content/uploads/celebrar-site/cormorant-garamond.woff2) format('woff2')}


@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 600;font-display:swap;src:url(/wp-content/uploads/celebrar-site/cormorant-garamond-italico.woff2) format('woff2')}


@font-face{font-family:'Inter Tight';font-style:normal;font-weight:300 700;font-display:swap;src:url(/wp-content/uploads/celebrar-site/inter-tight.woff2) format('woff2')}



html,body{margin:0; padding:0; background:#0b1017}



#clb{
  --noite:#0b1017; --noite-2:#121a25; --noite-3:#070b10;
  --osso:#f2ece1; --areia:#d8cab2; --areia-2:#a99a83;
  --ouro:#c9a24a; --ouro-marca:#dc981a; --ouro-txt:#e6bd72; --rose:#c98f95; --verde:#7fae6b;
  --fio:rgba(216,202,178,.13); --fio-2:rgba(216,202,178,.24);
  --painel:rgba(216,202,178,.035);
  --f:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --d:'Cormorant Garamond','Iowan Old Style',Georgia,'Times New Roman',serif;
  --pad:clamp(18px,4.4vw,56px);
  --alt-topo:72px;
}


#clb,#clb *{box-sizing:border-box}


#clb [hidden]{display:none!important}


#clb .mel{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}



#clb{
  background:var(--noite); color:var(--areia);
  font-family:var(--f); font-size:16.5px; line-height:1.6; font-weight:350;
  -webkit-font-smoothing:antialiased; position:relative;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}


#clb h1,#clb h2,#clb h3,#clb h4,#clb p,#clb ul{margin:0}


#clb ul{list-style:none;padding:0}


#clb img{max-width:100%;display:block}


#clb a{color:inherit}


#clb b,#clb strong{font-weight:500}


#clb ::selection{background:var(--ouro); color:#11161d}



#clb .folha{
  width:min(1240px,100%); margin:0 auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(12px,1.9vw,26px);
}


#clb section{padding-block:clamp(34px,4.4vw,60px); scroll-margin-top:calc(var(--alt-topo) + 6px)}


#clb .sub-chamada{font-family:var(--d); font-weight:500; line-height:1.08;
  color:var(--osso); font-size:clamp(1.7rem,3.2vw,2.5rem)}



#clb .bt{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 26px; font-family:var(--f); font-size:.95rem; font-weight:500;
  letter-spacing:0; text-transform:none; cursor:pointer; line-height:1.2;
  border:1px solid transparent; border-radius:4px; text-decoration:none;
  transition:background .25s,color .25s,border-color .25s,transform .15s;
}


#clb .bt:active{transform:translateY(1px)}


#clb .bt-ouro{background:var(--ouro); border-color:var(--ouro); color:#11161d}


#clb .bt-ouro:hover{background:var(--ouro-txt); border-color:var(--ouro-txt)}


#clb .bt-vazado{background:transparent; border-color:var(--fio-2); color:var(--osso)}


#clb .bt-vazado:hover{border-color:var(--ouro); color:var(--ouro-txt)}


#clb .link{display:inline-flex; align-items:baseline; gap:8px; text-decoration:none; padding-block:7px;
  font-family:var(--d); font-style:italic; font-size:1.15rem; font-weight:500;
  color:var(--osso); background:transparent; border:0; padding:0; cursor:pointer;
  transition:color .25s}


#clb .link::after{content:"→"; font-family:var(--f); font-style:normal; font-size:.9rem; transition:transform .25s}


#clb .link:hover{color:var(--ouro-txt)}


#clb .link:hover::after{transform:translateX(4px)}


#clb a:focus-visible,#clb button:focus-visible{outline:2px solid var(--ouro-txt); outline-offset:3px}


@keyframes rola{0%{transform:translateY(0);opacity:0}30%{opacity:1}70%{transform:translateY(11px);opacity:0}100%{opacity:0}}


@keyframes pisca{0%,100%{opacity:.25}50%{opacity:1}}


#patro-topo .marca-cx{padding:20px 36px; height:126px; min-width:270px; border-radius:4px}
@media(max-width:700px){
  #patro-topo .marca-cx{height:100px; min-width:210px; padding:14px 24px}
}


#clb .marcas-cab{font-family:var(--d); font-style:italic; font-weight:500; font-size:1.2rem;
  color:var(--areia); margin-bottom:14px; letter-spacing:0; text-transform:none}


#clb .marcas-cab::after{display:none}


#clb .marcas{display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
@media(max-width:520px){#clb .marcas{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
}


#clb .marca-cx{background:var(--osso); display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,2.4vw,24px); position:relative; overflow:hidden; border-radius:4px}


#clb .marca-cx img{width:100%; height:100%; object-fit:contain; display:block}



#clb .marca-cx .nome{font-family:var(--d); font-weight:500; font-size:1.05rem; line-height:1.2;
  color:#11161d; text-align:center; overflow-wrap:anywhere; padding:0 4px}



#clb .marca-cx a:focus-visible{outline:2px solid var(--ouro-marca); outline-offset:-3px}


#clb .marcas .marca-cx{min-height:0; height:98px; border:0; background:var(--osso);
  padding:14px 22px}


#clb .marcas .vaga{background:transparent}
@media(max-width:520px){#clb .marcas .marca-cx{height:76px; padding:10px 16px}
}


#clb .oferta{display:flex; flex-direction:column; background:var(--painel); border-radius:8px;
  padding:clamp(22px,2.6vw,34px); position:relative}


#clb .oferta h3{font-family:var(--d); font-weight:500; line-height:1.08; color:var(--osso);
  font-size:clamp(1.6rem,2.5vw,2.1rem)}


#clb .oferta .desc{margin-top:6px; font-size:.98rem; color:var(--areia-2)}


#clb .oferta .inclui{margin-top:16px; display:flex; flex-direction:column; gap:8px}


#clb .oferta .inclui li{font-size:.95rem; color:var(--areia); display:flex; gap:10px; align-items:baseline}


#clb .oferta .inclui li::before{content:'·'; flex:none; color:var(--ouro-txt); font-weight:700}


#clb .oferta .preco{margin-top:auto; padding-top:clamp(18px,2.2vw,26px)}


#clb .oferta .preco .val{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}


#clb .oferta .preco b{font-family:var(--d); font-weight:600; line-height:.9;
  font-size:clamp(2rem,3.4vw,2.7rem); color:var(--ouro-txt); font-variant-numeric:lining-nums}


#clb .oferta .preco small{font-family:var(--d); font-style:italic; font-size:1.05rem;
  color:var(--areia-2); letter-spacing:0; text-transform:none}


#clb .oferta .preco .bt{margin-top:16px; width:100%}


#patrocinio .principal .marca-cx{border:2px solid var(--ouro-marca); border-radius:6px;
  height:clamp(150px,18vw,210px); padding:clamp(22px,2.8vw,36px)}


#patrocinio .principal .marca-cx + .marca-cx{margin-top:8px}


#clb .vazio-patro{background:var(--painel); border-radius:6px; border-left:3px solid var(--ouro);
  padding:clamp(16px,2vw,24px); font-size:1rem; color:var(--areia-2); max-width:56em}


#clb .cota{display:flex; flex-direction:column; gap:14px; background:var(--painel); border-radius:8px;
  padding:clamp(20px,2.4vw,28px) clamp(20px,2.4vw,28px)}


#clb .cota header{display:block}


#clb .cota .ord{display:none}


#clb .cota h3{font-family:var(--d); font-weight:500; line-height:1.1; color:var(--osso);
  font-size:clamp(1.5rem,2.3vw,1.95rem)}


#clb .cota .desc{margin-top:4px; font-size:.95rem; color:var(--areia-2)}


#clb .cota .entrega{display:flex; flex-direction:column; gap:7px}


#clb .cota .entrega li{font-size:.95rem; line-height:1.5; color:var(--areia-2); display:flex; gap:10px; align-items:baseline}


#clb .cota .entrega li::before{content:'·'; flex:none; color:var(--ouro-txt); font-weight:700}


#clb .cota .entrega .herda{font-family:var(--d); font-style:italic; font-weight:500; font-size:1.1rem;
  color:var(--ouro-txt); letter-spacing:0; text-transform:none; margin-bottom:1px}


#clb .cota .entrega .herda::before{content:none}


#clb .cota.destacada{background:rgba(220,152,26,.07); box-shadow:inset 0 0 0 1px rgba(220,152,26,.35)}


#clb .cota.destacada h3{color:#fff}


#clb .apresenta-pe{grid-column:1/-1; margin-top:clamp(24px,3vw,36px); padding-top:18px;
  border-top:1px solid var(--fio); display:flex; flex-wrap:wrap; align-items:center; gap:12px clamp(18px,3vw,36px)}


#clb .apresenta-pe .olho{font-family:var(--d); font-style:italic; font-weight:500; font-size:1.15rem;
  color:var(--areia-2); flex:none; letter-spacing:0; text-transform:none}


#clb .marcas-pe{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center}


#clb .marcas-pe .marca-cx{padding:9px 18px; height:62px; min-width:150px}



#clb .subir{position:fixed; right:clamp(14px,2.4vw,26px); bottom:clamp(14px,2.4vw,26px); z-index:70;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:var(--noite-2); border:1px solid var(--fio-2); color:var(--osso); cursor:pointer;
  opacity:0; transform:translateY(10px); transition:opacity .3s,transform .3s,border-color .3s,color .3s}


#clb .subir.entrando{opacity:1; transform:none}


#clb .subir:hover{border-color:var(--ouro); color:var(--ouro-txt)}


#clb .subir svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6}


#clb-topo .logo-txt,#clb .logo-txt{display:inline-block; font-family:var(--d);
  font-weight:600; font-size:1.25rem; line-height:1.15; letter-spacing:.09em;
  color:var(--osso); white-space:nowrap; text-decoration:none}


#clb footer .logo-txt{font-size:1.05rem}


#clb .rascunho{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
  margin-bottom:18px; padding:11px 14px; border:1px solid rgba(230,189,114,.38);
  border-radius:8px; background:rgba(230,189,114,.07);
  font-size:.9rem; color:var(--areia); line-height:1.45}


#clb .rascunho b{color:var(--ouro-txt); font-weight:500}


#clb .rascunho button{margin-left:auto; background:none; border:0; padding:2px 0; cursor:pointer;
  color:var(--areia-2); font:inherit; font-size:.85rem; text-decoration:underline;
  text-underline-offset:3px; transition:color .25s}


#clb .rascunho button:hover{color:var(--osso)}



#clb .aviso-espera{margin-bottom:20px; padding:14px 16px; border-left:2px solid var(--ouro);
  background:rgba(230,189,114,.07); font-size:.95rem; color:var(--areia); line-height:1.55}


#clb .aviso-espera b{display:block; margin-bottom:3px; color:var(--ouro-txt); font-weight:500}



#clb .grao{position:fixed; top:0;right:0;bottom:0;left:0;inset:0; z-index:1; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}


#clb .rev{opacity:0; transform:translateY(12px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}


#clb .rev.vis{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){#clb .rev{opacity:1; transform:none; transition:none}
}



#clb .janela{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:90;display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(12px,3vw,40px);overflow-y:auto;overscroll-behavior:contain}


#clb .janela .fundo{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;background:rgba(4,7,11,.8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:0}


#clb .janela .cx{position:relative;width:min(740px,100%);background:#1a2432;border:1px solid rgba(216,202,178,.3);
  border-radius:10px;box-shadow:0 40px 100px -40px #000;animation:sobe .35s cubic-bezier(.2,.7,.3,1)}


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


/* v27: sem position:sticky. O cabeçalho é apresentação, não ferramenta: lido
   uma vez, some de cena e devolve a tela para os campos. */
#clb .janela .topo{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:clamp(20px,2.6vw,28px) clamp(20px,3.2vw,36px);border-bottom:1px solid var(--fio);
  background:#1a2432;border-radius:10px 10px 0 0;
  padding-right:clamp(64px,8vw,80px)}

   /* lugar do X, que agora flutua */
#clb .janela .topo h3{font-family:var(--d);font-weight:500;font-size:clamp(1.6rem,3.2vw,2.1rem);color:var(--osso);line-height:1.1}


#clb .janela .topo p{margin-top:6px;font-size:.95rem;color:#c6bcaa;max-width:52ch}


/* v27: o fechar é a única coisa que fica parada. Sai do fluxo do cabeçalho e
   flutua no alto, para continuar à mão depois de rolar a ficha inteira. */
#clb .janela .x{position:fixed;z-index:95;
  top:clamp(10px,2vw,24px);right:clamp(10px,2vw,24px);
  min-width:44px;min-height:44px;width:44px;height:44px;border:1px solid var(--fio-2);
  background:rgba(26,36,50,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--areia);cursor:pointer;border-radius:50%;transition:all .25s;font-family:var(--f);
  display:flex;align-items:center;justify-content:center;font-size:1rem;line-height:0;padding:0}


#clb .janela .x:hover{border-color:var(--ouro);color:var(--ouro-txt)}


#clb .janela .corpo{padding:clamp(20px,2.6vw,30px) clamp(20px,3.2vw,36px) clamp(24px,3vw,34px)}
@media (prefers-reduced-motion:reduce){#clb .janela .cx{animation:none}
}
@media(max-width:900px){
  #clb .janela{padding:clamp(10px,2.4vw,26px)}


  #clb .janela .cx{width:min(640px,100%)}
}
@media(max-width:640px){
  /* v41: era align-items:stretch. Com a altura fixa da tela, o cartão (.cx), o único que tem
     fundo, era esticado a essa altura e a ficha, mais comprida, passava por baixo dele: ao
     rolar, o fundo acabava e o resto ficava transparente. Alinhado ao início, o cartão cresce
     com o conteúdo, e o min-height:100% do cartão o mantém do tamanho da tela quando é curto. */
  #clb .janela{padding:0;align-items:flex-start;height:100vh;height:100dvh}


  #clb .janela .cx{width:100%;min-height:100%;border:0;border-radius:0;
    display:flex;flex-direction:column;animation:sobeFolha .3s cubic-bezier(.2,.7,.3,1)}


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


  #clb .janela .topo{padding:16px 64px 16px 18px;gap:14px;border-radius:0}


  #clb .janela .topo h3{font-size:1.5rem}


  #clb .janela .topo p{font-size:.9rem;max-width:none}


  #clb .janela .corpo{padding:18px 18px 108px;flex:1}


  #clb .janela form fieldset:last-of-type > div[style]{
    position:fixed;left:0;right:0;bottom:0;margin:0;padding:12px 18px calc(12px + env(safe-area-inset-bottom));
    background:rgba(26,36,50,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-top:1px solid var(--fio-2);z-index:5;
  }


  #clb .janela form fieldset:last-of-type > div[style] .bt{width:100%}


  #clb .janela form fieldset:last-of-type > div[style] .nota{margin-top:8px;font-size:.85rem}


  #clb .grade{gap:14px}


  #clb .bt{width:auto;padding:12px 20px}


  #clb .campo-cnpj{flex-wrap:wrap}


  #clb .campo-cnpj input{min-width:100%}


  #clb .campo-cnpj .bt-mini{width:100%;padding:12px}


  #clb pre{font-size:.75rem;padding:14px}
}
@media(hover:none){
  #clb input,#clb select,#clb textarea{padding-top:13px;padding-bottom:13px}


  #clb .aceite input{width:24px;height:24px}
}



#clb .janela-ok .cx{width:min(440px,100%); text-align:center}


#clb .janela-ok .corpo{padding:clamp(30px,4vw,44px) clamp(24px,3.2vw,38px)}


#clb .janela-ok .visto{display:flex; width:62px; height:62px; margin:0 auto 18px;
  align-items:center; justify-content:center; border-radius:50%;
  border:1px solid var(--verde); background:rgba(127,174,107,.12)}


#clb .janela-ok .visto svg{width:26px; height:26px; fill:none; stroke:var(--verde);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:26; stroke-dashoffset:26; animation:risca .5s .12s ease-out forwards}


@keyframes risca{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){#clb .janela-ok .visto svg{animation:none;stroke-dashoffset:0}
}


#clb .janela-ok h3{font-family:var(--d); font-weight:500; color:var(--osso); font-size:clamp(1.7rem,3vw,2.2rem); line-height:1.1}


#clb .janela-ok p{margin-top:10px; font-size:1rem; color:#c6bcaa; line-height:1.6}



#clb .janela-ok .passos{margin:22px 0 0; padding:18px 0 0; list-style:none; text-align:left;
  border-top:1px solid var(--fio); display:flex; flex-direction:column; gap:11px}


#clb .janela-ok .passos li{display:flex; gap:11px; align-items:flex-start;
  font-size:.92rem; color:#c6bcaa; line-height:1.45}


#clb .janela-ok .passos i{flex:0 0 21px; height:21px; margin-top:1px; border-radius:50%;
  border:1px solid rgba(230,189,114,.5); color:var(--ouro-txt); font-style:normal;
  font-size:.7rem; font-weight:600; display:flex; align-items:center; justify-content:center}


#clb .janela-ok .bt{margin-top:24px; min-width:170px}


/* v29: a coluna dos botões — mesma largura, mesmo eixo, respiro igual */
#clb .janela-ok .ok-acoes{display:flex; flex-direction:column; gap:10px;
  width:min(320px,100%); margin:24px auto 0}


#clb .janela-ok .ok-acoes .bt{margin-top:0; width:100%; min-width:0}
@media(max-width:640px){
  /* v41: align-items:center cortava o topo do cartão quando ele era mais alto que a tela
     (320 x 568: uns 18px para fora, sem como rolar até lá). A margem automática centra quando
     cabe e, quando não cabe, vira zero: o cartão começa no alto e a rolagem vai até o fim. */
  #clb .janela-ok{align-items:flex-start; padding:20px}


  #clb .janela-ok .cx{min-height:0; margin:auto; border:1px solid var(--fio-2); border-radius:10px}
}



#clb .janela{--fio:rgba(216,202,178,.2); --fio-2:rgba(216,202,178,.36); --areia-2:#c6bcaa}


#clb form{width:100%}


#clb fieldset{border:0;margin:0 0 clamp(20px,2.6vw,28px);padding:0}


/* v23: a ficha voltou a ser uma rolagem só. O primeiro conjunto ficava colado
   no cabeçalho fixo da janela, no lugar onde antes ficava a barra das etapas. */
#clb form > fieldset:first-of-type{margin-top:clamp(10px,1.6vw,18px)}


#clb fieldset:last-of-type{margin-bottom:0}


#clb legend{padding:0;width:100%;margin-bottom:14px;display:flex;align-items:center;gap:11px;
  font-family:var(--d);font-style:italic;font-weight:500;font-size:1.3rem;color:#fff;letter-spacing:0;text-transform:none}


#clb legend i{width:24px;height:24px;border:1px solid var(--ouro-txt);border-radius:50%;color:var(--ouro-txt);
  display:flex;align-items:center;justify-content:center;font-style:normal;font-family:var(--f);font-size:.72rem;font-weight:600;flex:none}


#clb legend::after{content:"";flex:1;height:1px;background:var(--fio)}


#clb .grade{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,22px)}


#clb .c3{grid-column:span 3}

#clb .c4{grid-column:span 4}

#clb .c5{grid-column:span 5}


#clb .c6{grid-column:span 6}

#clb .c7{grid-column:span 7}

#clb .c8{grid-column:span 8}

#clb .c12{grid-column:span 12}
@media(max-width:700px){#clb .grade>*{grid-column:1/-1!important}
}


#clb label{display:block;font-size:.9rem;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--osso);margin-bottom:6px}


#clb label span{color:var(--rose)}


#clb .obrig-nota{margin:0 0 clamp(14px,2vw,20px); font-size:.86rem; color:var(--areia-2)}


#clb .obrig-nota b{color:var(--rose); font-weight:500}


#clb input[type=text],#clb input[type=email],#clb input[type=tel],#clb input[type=number],#clb select,#clb textarea{
  width:100%;padding:11px 12px;border:1px solid var(--fio-2);border-radius:5px;background:rgba(255,255,255,.03);
  color:var(--osso);font-family:var(--f);font-size:1rem;font-weight:400;transition:border-color .3s,background .3s}


#clb input::placeholder,#clb textarea::placeholder{color:#8d97a2;font-weight:300}



#clb input:focus,#clb select:focus,#clb textarea:focus{outline:0;border-color:var(--ouro);background-color:rgba(255,255,255,.05)}


#clb input:disabled{color:var(--areia-2);cursor:not-allowed}



#clb [aria-invalid="true"],#clb [aria-invalid="true"]:focus{border-color:var(--rose);
  background-color:rgba(201,143,149,.07)}


#clb select{appearance:none;cursor:pointer;padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--areia) 50%),linear-gradient(135deg,var(--areia) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat}


#clb select option{background:#1a2432;color:var(--osso)}


#clb .campo-cnpj{display:flex;gap:10px;align-items:flex-end}


#clb .campo-cnpj input{flex:1}


#clb .bt-mini{flex:none;padding:11px 16px;font-size:.9rem;font-weight:500;letter-spacing:0;text-transform:none;
  background:transparent;border:1px solid var(--fio-2);border-radius:5px;color:var(--osso);cursor:pointer;font-family:var(--f);transition:all .25s}


#clb .bt-mini:hover{border-color:var(--ouro);color:var(--ouro-txt)}


#clb .bt-mini[disabled]{opacity:.5;cursor:wait}


#clb .ja-mandou{margin:0 0 clamp(14px,1.8vw,20px); padding:12px 15px; border-radius:6px;
  background:rgba(201,143,149,.10); border:1px solid rgba(201,143,149,.34);
  font-size:.9rem; line-height:1.55; color:var(--areia)}


#clb .ja-mandou b{color:var(--osso); font-weight:500}


#clb .acomp-item{padding:12px 0;border-top:1px solid var(--fio)}


#clb .acomp-item .n{font-family:var(--d);font-style:italic;font-weight:500;font-size:1.05rem;letter-spacing:0;
  text-transform:none;color:var(--ouro-txt);margin-bottom:8px}


#clb .vazio{color:var(--areia-2);font-size:.95rem;padding:14px 0;border-top:1px solid var(--fio)}


#clb .resumo{display:flex;flex-wrap:wrap;gap:6px 30px;align-items:baseline;padding:16px 0;
  border-top:1px solid var(--fio-2);border-bottom:1px solid var(--fio-2);font-size:.98rem;color:var(--areia)}


#clb .resumo b{font-family:var(--d);font-size:1.8rem;font-weight:600;color:var(--ouro-txt);margin-right:6px}


#clb .resumo .tot{margin-left:auto;font-family:var(--d);font-weight:600;font-size:1.6rem;color:var(--osso)}


#clb .nota{margin-top:11px;font-size:.9rem;color:#c6bcaa;line-height:1.6}


/* v29: O AVISO DOS NOMES. Ele responde à pergunta que a pessoa faz ao ver a
   seção dos convidados — "preciso saber os nomes agora?" — e por isso não pode
   ter o traje de uma nota de rodapé. Fio dourado à esquerda, fundo de leve.
   Quando todos os nomes entram, vira verde: a mesma caixa, a resposta oposta. */
#clb .aviso-acomp{margin:2px 0 0; padding:11px 14px; border-radius:6px;
  border:1px solid rgba(201,162,74,.26); border-left:3px solid var(--ouro);
  background:rgba(201,162,74,.07); color:var(--areia); font-size:.93rem; line-height:1.55}


#clb .aviso-acomp.ok{border-color:rgba(127,174,107,.3); border-left-color:var(--verde);
  background:rgba(127,174,107,.08); color:#b6c9ab}


#clb .lgpd{margin-top:20px;padding-top:14px;border-top:1px solid var(--fio);font-size:.88rem;color:var(--areia-2);line-height:1.6}


#clb .lgpd a{color:var(--ouro-txt);text-decoration:none;border-bottom:1px solid var(--fio-2)}


/* ESCOLHA DO TIPO DE RESERVA -------------------------------------------
   Dois cartoes no lugar de dois campos de numero soltos. O botao da pagina ja
   chega com um escolhido: quem clicou em "Reservar uma mesa" nao deve cair num
   formulario perguntando quantos ingressos avulsos quer. */
#clb .tipos{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:4px}
@media(max-width:620px){#clb .tipos{grid-template-columns:1fr}
}


#clb .tipo{position:relative; display:block; cursor:pointer; border:1px solid var(--fio-2);
  border-radius:10px; padding:15px 16px 16px; background:rgba(216,202,178,.025);
  transition:border-color .25s, background .25s}


#clb .tipo:hover{border-color:rgba(230,189,114,.45)}


#clb .tipo input{position:absolute; opacity:0; width:1px; height:1px; margin:0}


#clb .tipo b{display:block; font-family:var(--d); font-weight:600; font-size:1.22rem;
  color:var(--osso); line-height:1.15; padding-right:26px}


#clb .tipo small{display:block; margin-top:5px; font-size:.88rem; color:var(--areia-2);
  line-height:1.45}


#clb .tipo .val{display:block; margin-top:9px; font-family:var(--d); font-weight:500;
  font-size:1.05rem; color:var(--ouro-txt)}


#clb .tipo .marca{position:absolute; top:16px; right:15px; width:18px; height:18px;
  border-radius:50%; border:1.5px solid var(--fio); transition:all .2s}


#clb .tipo input:checked ~ .marca{border-color:var(--ouro); background:var(--ouro);
  box-shadow:inset 0 0 0 3px #1a2432}


#clb .tipo input:checked ~ b{color:var(--ouro-txt)}


#clb .tipo.escolhido{border-color:var(--ouro); background:rgba(230,189,114,.07)}


#clb .tipo input:focus-visible ~ .marca{outline:2px solid var(--ouro); outline-offset:2px}


#clb .qtd-cx[hidden]{display:none}


#clb .extra-avulso label{display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-size:.9rem; color:var(--areia-2); text-transform:none; letter-spacing:0; font-weight:400}



/* LINHA DO PATROCINADOR -------------------------------------------------
   Nao e um terceiro tipo de reserva: e quem esta comprando. Uma empresa
   patrocinadora compra mesa ou lugar como qualquer um; o que muda e que o
   aplicativo precisa amarrar esta reserva ao cadastro de patrocinio dela. */
#clb .sou-patro{margin-top:16px; padding:13px 15px; border-radius:8px;
  border:1px solid var(--fio-2); background:rgba(216,202,178,.025)}


#clb .sou-patro > label{display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  font-size:.95rem; color:var(--areia); text-transform:none; letter-spacing:0; font-weight:400}


#clb .sou-patro input[type=checkbox]{margin-top:3px; flex:0 0 auto; width:17px; height:17px}


#clb .sou-patro .campo{margin-top:12px}


#clb .sou-patro .campo[hidden]{display:none}


#clb .acess-cx{margin-top:18px; padding-top:16px; border-top:1px solid var(--fio)}


#clb .acess-liga{display:flex; gap:11px; align-items:center; min-height:44px; cursor:pointer;
  font-size:.92rem; font-weight:300; letter-spacing:0; text-transform:none; color:var(--areia)}


#clb .acess-liga b{color:var(--osso); font-weight:500}


#clb .acess-cx .grade{margin-top:12px}



#clb .bt-abre-acomp{display:inline-flex; align-items:center; gap:7px; margin-top:15px;
  min-height:44px; padding:11px 18px; border:1px solid rgba(230,189,114,.4); border-radius:8px;
  background:none; cursor:pointer; color:var(--areia); font:inherit; font-size:.92rem;
  letter-spacing:0; text-transform:none; transition:border-color .2s,color .2s;
  /* v40: o navegador não quebra a linha de um botão (white-space:pre no estilo dele). A 320 px o rótulo, sozinho,
     alargava a ficha em 5 px e abria rolagem lateral na janela (existia desde antes do Turnstile). */
  max-width:100%; white-space:normal; text-align:left}


#clb .bt-abre-acomp:hover{border-color:rgba(230,189,114,.8); color:var(--osso)}


#clb .bt-abre-acomp span{color:var(--areia-2); font-size:.88em}



#clb .cod-cx .nao-sorteio{margin:12px 0 0; padding-top:11px;
  border-top:1px solid rgba(230,189,114,.22); font-size:.8rem; line-height:1.5;
  color:var(--areia-2); text-align:left}


#clb .cod-cx .nao-sorteio b{color:var(--areia)}



/* O NUMERO DA RESERVA, NA CONFIRMACAO ----------------------------------- */
/* URGENCIA CRESCENTE ----------------------------------------------------
   A festa nao mostra quantas vagas restam — e decisao do Jose, e esta certa.
   A urgencia honesta que sobra e o calendario: ele nao mente nunca. Tres
   degraus, 30, 15 e 7 dias, e o tom da pagina muda sozinho. */
#clb.urg-30 #numeros .quente b,
#clb.urg-30 #clb-topo .conta b{color:var(--ouro-txt)}


#clb .urg-faixa{display:none; grid-column:1/-1; margin-top:16px; padding:11px 15px;
  border-left:2px solid var(--ouro); background:rgba(230,189,114,.07);
  font-size:.95rem; color:var(--areia); line-height:1.5}


#clb .urg-faixa b{color:var(--ouro-txt); font-weight:500}
#clb.urg-30 .urg-faixa{display:block}


#clb .cod-cx{margin:20px 0 0; padding:14px 16px; border-radius:8px;
  border:1px dashed rgba(230,189,114,.5); background:rgba(230,189,114,.06); text-align:center}


#clb .cod-cx .rot{display:block; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--areia-2)}


#clb .cod-cx .cod{display:block; margin-top:5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.4rem; font-weight:600; letter-spacing:.08em; color:var(--ouro-txt)}


#clb .cod-cx button{margin-top:9px; background:none; border:0; padding:2px 0; cursor:pointer;
  color:var(--areia-2); font:inherit; font-size:.85rem; text-decoration:underline;
  text-underline-offset:3px}


#clb .cod-cx button:hover{color:var(--osso)}


#clb .cod-cx .g-bt{display:flex; align-items:center; justify-content:center; gap:9px;
  margin-top:14px; min-height:46px; padding:12px 14px; border:1px solid rgba(230,189,114,.55);
  border-radius:8px; background:rgba(230,189,114,.08); cursor:pointer; color:var(--osso);
  font:inherit; font-size:.94rem; text-decoration:none; letter-spacing:0; text-transform:none;
  transition:background .2s,border-color .2s}


#clb .cod-cx .g-bt:hover{background:rgba(230,189,114,.16); border-color:var(--ouro)}


/* Os atalhos sao links de texto, nao botoes: peso visual menor de proposito,
   mas com area de toque de 44px, que e o minimo confortavel para dedo. */
#clb .atalhos{display:flex; align-items:center; justify-content:center; gap:2px 10px;
  flex-wrap:wrap; margin-top:4px}


#clb .atalhos span{color:var(--areia-2); opacity:.5}
@media(max-width:400px){#clb .atalhos{gap:0 10px}

 #clb .atalhos span{display:none}
}


#clb .atalhos button{min-height:44px; padding:10px 4px}


#clb .cod-cx .g-bt svg{width:17px; height:17px; flex:none; fill:none;
  stroke:var(--ouro-txt); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}



/* O COMPROVANTE ---------------------------------------------------------- */
#clb .recibo{display:none}
@media print{
  /* PRIMEIRA TENTATIVA SAIU UMA FOLHA PRETA E VAZIA: `body > *` escondia os
     filhos diretos do body, e o comprovante mora dentro do #clb — sumia junto
     com ele. Esconder por dentro tambem nao resolve sozinho: o comprovante esta
     dentro de um painel com posicionamento proprio, que corta o que passa dele.

     O que funciona, e sem depender de nenhuma dessas suposicoes: antes de
     imprimir, o JS move o comprovante para ser filho direto do body; ai esta
     regra esconde todo o resto e ele fica sozinho na folha. Depois de imprimir,
     ele volta para o lugar. */
  body > *:not(.recibo){display:none !important}


  html, body{background:#fff !important}


  /* margem ZERO na folha + recuo no proprio comprovante: sem margem de pagina,
     o navegador nao tem onde desenhar o cabecalho e o rodape que ele mete
     sozinho (o endereco do site, a data, o numero da pagina). O recuo aqui
     devolve a respiracao que a margem dava. */
  .recibo{display:block !important; position:relative;
    padding:9mm 13mm 5mm; color:#1a1a1a; background:#fff;
    font-family:Georgia,'Times New Roman',serif; font-size:9pt; line-height:1.42}



  /* O QUE ESTÁ OCULTO CONTINUA OCULTO. Antes de imprimir, o JS move o
     comprovante para fora do #clb — e a regra `#clb [hidden]` deixa de valer
     junto. O `display:none` que o navegador dá a [hidden] tem prioridade
     baixíssima: qualquer `display` de autor ganha dele, e o bloco do convite
     (display:flex) reaparecia vazio no comprovante de patrocínio. */
  .recibo [hidden]{display:none !important}



  /* a marca ao fundo: imagem, para imprimir mesmo com os "gráficos de segundo
     plano" desligados, e bem apagada para não disputar com o texto */
  .recibo .r-marca{position:absolute; left:50%; top:52%; width:118mm; height:auto;
    transform:translate(-50%,-50%); opacity:.055; z-index:0}


  .recibo > *:not(.r-marca){position:relative; z-index:1}



  /* o cabeçalho */
  .recibo .r-topo{display:flex; align-items:flex-end; justify-content:space-between;
    gap:10mm; padding-bottom:3.5mm; border-bottom:2pt solid #1A3A5A}


  .recibo .r-logo{width:56mm; height:auto; display:block}


  .recibo .r-edicao{margin:0; text-align:right; font-size:8.5pt; line-height:1.45;
    letter-spacing:.06em; text-transform:uppercase; color:#1A3A5A !important}


  .recibo .r-edicao span{color:#6b6b6b !important; letter-spacing:.02em}



  .recibo .r-tit{margin:3.4mm 0 0; font-size:16pt; font-weight:normal; line-height:1.15;
    color:#1A3A5A !important}


  .recibo .r-abre{margin:1.5mm 0 0; font-size:9pt; color:#444 !important; max-width:150mm}



  /* OS CÓDIGOS — um ou dois, lado a lado */
  .recibo .r-codigos{display:flex; gap:4mm; margin:3.2mm 0 0}


  .recibo .r-cod{flex:1 1 0; min-width:0; padding:3mm 4mm;
    border:1pt solid #c9ced6; border-top:3pt solid #DA9619; border-radius:1mm}


  .recibo .r-cod-patro{border-top-color:#1A3A5A}


  .recibo .r-cod span{display:block; font-size:7.5pt; letter-spacing:.14em;
    text-transform:uppercase; color:#6b6b6b !important; font-family:Helvetica,Arial,sans-serif}


  .recibo .r-cod b{display:block; margin-top:1mm; font-size:13.5pt; letter-spacing:.08em;
    font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; color:#1A3A5A !important}


  .recibo .r-nota{margin:2.5mm 0 0; font-size:8.5pt; line-height:1.5; color:#555 !important}



  /* os blocos */
  .recibo .r-bloco{margin-top:2.5mm; break-inside:avoid; page-break-inside:avoid}


  .recibo .r-bloco h2{margin:0 0 2mm; font-size:8.5pt; letter-spacing:.16em;
    text-transform:uppercase; font-weight:bold; color:#1A3A5A !important;
    font-family:Helvetica,Arial,sans-serif;
    padding-bottom:1.2mm; border-bottom:.5pt solid #d8dde4}


  .recibo .r-bloco p{margin:0 0 1.2mm}


  .recibo .r-dl{display:grid; grid-template-columns:30mm 1fr; gap:1.1mm 4mm; margin:0}


  .recibo .r-dl dt{font-size:8pt; letter-spacing:.1em; text-transform:uppercase;
    color:#6b6b6b !important; font-family:Helvetica,Arial,sans-serif; padding-top:.6mm}


  .recibo .r-dl dd{margin:0}


  /* v28: a ficha da empresa em duas colunas — o bloco de uma coluna deixava
     metade da folha vazia */
  .recibo .r-dl-2{grid-template-columns:26mm minmax(0,1fr) 24mm minmax(0,1fr);
    column-gap:3mm}


  .recibo .r-itens{font-size:11pt}



  /* quem vai */
  .recibo .r-titular{margin:0 0 2mm}


  .recibo .r-titular span{display:block; font-size:8pt; letter-spacing:.1em;
    text-transform:uppercase; color:#6b6b6b !important; font-family:Helvetica,Arial,sans-serif}


  .recibo .r-titular b{font-size:11pt}


  .recibo .r-lista{margin:0; padding:0; list-style:none;
    display:grid; grid-template-columns:1fr 1fr; gap:1mm 6mm}


  .recibo .r-lista li{font-size:10pt; padding-left:6mm; position:relative}


  .recibo .r-lista li i{position:absolute; left:0; top:0; font-style:normal;
    font-size:8pt; color:#9aa2ad !important}


  .recibo .r-falta{margin:1mm 0 0; padding:2.5mm 3.5mm; font-size:8.5pt; line-height:1.5;
    border:.5pt dashed #c9ced6; color:#444 !important}



  .recibo .r-passos{margin:0; padding-left:5mm; font-size:8.7pt; line-height:1.45}


  .recibo .r-passos li{margin-bottom:1mm}



  /* o pé */
  .recibo .r-pe{margin-top:2.6mm; padding-top:1.6mm; border-top:.5pt solid #d8dde4}


  .recibo .r-pe p{margin:0 0 .8mm; font-size:7.8pt; line-height:1.45; color:#666 !important}


  .recibo .r-site{letter-spacing:.06em; color:#1A3A5A !important;
    font-family:Helvetica,Arial,sans-serif}


  @page{margin:0}
}



/* CONVITE DA MESA -------------------------------------------------------- */
#clb .convite-cx{margin:18px 0 0; padding:16px; border-radius:10px; text-align:left;
  border:1px solid rgba(230,189,114,.35); background:rgba(230,189,114,.05)}


#clb .convite-cx h4{margin:0 0 6px; font-family:var(--d); font-weight:600; font-size:1.15rem;
  color:var(--ouro-txt)}


#clb .convite-cx p{margin:0 0 12px; font-size:.9rem; color:#c6bcaa; line-height:1.5}


#clb .convite-cx .bt{width:100%; justify-content:center}


#clb .convite-cx .atalhos{margin-top:2px}


#clb .convite-cx .atalhos button{color:var(--areia-2); font-size:.86rem;
  background:none; border:0; cursor:pointer; font-family:inherit;
  text-decoration:underline; text-underline-offset:3px}


#clb .convite-cx .atalhos button:hover{color:var(--osso)}



/* A FAIXA DE QUEM JA RESERVOU ------------------------------------------- */
#clb .minha{display:none; grid-column:1/-1; margin:0; padding:10px 15px; align-items:center;
  gap:10px 14px; flex-wrap:wrap; border-left:2px solid var(--ouro);
  background:rgba(230,189,114,.07); font-size:.9rem; color:var(--areia)}


#clb .minha.ligada{display:flex}


#clb .minha code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1rem;
  font-weight:600; letter-spacing:.07em; color:var(--ouro-txt)}


#clb .minha button{background:none; border:0; padding:2px 0; cursor:pointer; color:var(--areia-2);
  font:inherit; font-size:.85rem; text-decoration:underline; text-underline-offset:3px}


#clb .minha button:hover{color:var(--osso)}


#clb .minha .sai{margin-left:auto; text-decoration:none; font-size:1.1rem; line-height:1;
  /* v32: a área do toque vai a 44x44 sem empurrar nada: o que cresce por
     dentro recua por fora. Antes eram 22x10 — o "x" só acertava de sorte. */
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; margin-top:-11px; margin-bottom:-11px; margin-right:-11px}



#clb .aceite{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--fio);cursor:pointer;font-size:.9rem;font-weight:300;letter-spacing:0;
  text-transform:none;color:var(--areia-2);line-height:1.6}


#clb .aceite input{appearance:none;flex:none;width:20px;height:20px;margin-top:2px;border:1px solid var(--fio-2);
  background:transparent;cursor:pointer;position:relative;transition:all .25s;border-radius:4px}


#clb .aceite input:checked{background:var(--ouro);border-color:var(--ouro)}


#clb .aceite input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #11161d;border-width:0 2px 2px 0;transform:rotate(45deg)}


#clb .aceite input:focus-visible{outline:2px solid var(--ouro-txt);outline-offset:2px}


#clb .aceite b{color:var(--areia);font-weight:500}


#clb pre{margin-top:16px;background:#0b1017;border:1px solid var(--fio);border-radius:6px;padding:16px;overflow:auto;
  font-size:.8rem;color:#8fbb92;white-space:pre-wrap;word-break:break-word}
@media(max-width:1120px){
  #clb{--alt-topo:110px}
}
@media(max-width:600px){ #clb{--alt-topo:106px}
}
@media(max-width:420px){ #clb{--alt-topo:104px}
}



/* ═══════════════════════════════════════════════════════════════════════
   A CAPA DA PLAYLIST                                    14/09/2026
   ═══════════════════════════════════════════════════════════════════════
   Ocupa exatamente o lugar do player, para a pagina nao pular de altura
   quando o Spotify entra no lugar dela. */
#clb .capa-toca{display:flex; align-items:center; gap:16px; width:100%;
  min-height:clamp(180px,22vw,232px); padding:clamp(18px,2.4vw,28px);
  text-align:left; cursor:pointer; border-radius:10px;
  background:linear-gradient(160deg, rgba(216,202,178,.07), rgba(216,202,178,.02));
  border:1px solid var(--fio); color:var(--areia);
  transition:border-color .25s, background .25s, transform .15s}


#clb .capa-toca:hover{border-color:var(--ouro); background:rgba(201,162,74,.09)}


#clb .capa-toca:active{transform:scale(.995)}


#clb .capa-toca:focus-visible{outline:2px solid var(--ouro); outline-offset:3px}
@media(max-width:420px){
  #clb .capa-toca{gap:13px; min-height:150px}
}


#clb form[data-etapas] > fieldset[hidden]{display:none!important}


#clb .fx-passos{display:flex; gap:10px; align-items:center; flex-wrap:wrap}


#clb .fx-passos .bt{flex:0 0 auto}


#clb .fx-guardado{flex:1 1 auto; text-align:right; font-size:.76rem;
  color:var(--areia-2); opacity:0; transition:opacity .3s}


#clb .fx-guardado.mostra{opacity:.85}
@media(max-width:560px){
  #clb .fx-passos{flex-wrap:nowrap}


  #clb .fx-passos .bt{flex:1 1 auto; justify-content:center}


  #clb .fx-guardado{display:none}
}



/* A legenda de cada conjunto sai da tela quando a ficha esta em etapas: quem
   diz o nome da etapa agora e a barra, e ter o mesmo titulo duas vezes, um
   embaixo do outro, so ocupa a primeira dobra do celular. Sai da TELA, nao
   do documento — leitor de tela continua anunciando o conjunto. */
#clb form[data-etapas] > fieldset > legend{
  position:absolute!important; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden}



/* ── A PLANTA BAIXA QUE ESCOLHE A QUANTIDADE ─────────────────────────────
   O desenho não é ilustração: é o seletor. Escolher aqui leva o número
   pronto para a ficha.

   NO COMPUTADOR passa o mouse e clica. NO CELULAR E NO TABLET é toque — tela
   de toque não tem "passar por cima", e prometer isso entrega um botão que
   parece quebrado. NO TECLADO são os botões numerados embaixo, que existem
   sempre e são o caminho de quem usa leitor de tela. */
#clb .planta-lug{margin:18px 0 20px; display:flex; flex-direction:column; align-items:center; gap:12px}


#clb .pl-svg{width:min(240px,66vw); height:auto; display:block; overflow:visible}


#clb .pl-svg .lg{cursor:pointer}


#clb .pl-svg .conta{font-family:var(--d); font-weight:600; font-size:30px; fill:var(--ouro-txt)}


#clb .pl-svg .de{font-family:var(--f); font-size:8.5px; font-weight:500; letter-spacing:2px;
  text-transform:uppercase; fill:var(--areia-2)}
@media (hover:none){#clb .pl-svg .lg{cursor:default}
}



#clb .pl-botoes{display:flex; flex-wrap:wrap; gap:5px; justify-content:center}


#clb .pl-n{min-width:34px; min-height:34px; padding:0 8px; border-radius:3px; cursor:pointer;
  background:none; border:1px solid var(--fio); color:var(--areia-2);
  font-family:var(--f); font-size:.86rem; font-weight:500; font-variant-numeric:tabular-nums;
  transition:border-color .2s, color .2s, background .2s}


#clb .pl-n:hover{border-color:var(--areia-2); color:var(--osso)}


#clb .pl-n[aria-pressed="true"]{background:var(--ouro); border-color:var(--ouro); color:var(--noite)}


#clb .pl-n:focus-visible{outline:2px solid var(--ouro); outline-offset:2px}


#clb .pl-diz{font-size:.85rem; color:var(--areia-2); text-align:center; min-height:1.3em; margin:0}


#clb .pl-diz b{color:var(--osso); font-weight:500}
@media(max-width:420px){
  #clb .pl-n{min-width:31px; min-height:38px; font-size:.8rem}


  #clb .pl-svg{width:min(210px,62vw)}
}



/* A porta do "mais": mesma altura dos números, desenho de saída e não de
   escolha — quem clica não está escolhendo um número, está indo à ficha. */
#clb .pl-mais{min-width:44px; border-style:dashed; color:var(--ouro-txt);
  border-color:rgba(201,162,74,.45);
  border-color:color-mix(in srgb, var(--ouro) 45%, transparent)}


#clb .pl-mais:hover{border-style:solid; border-color:var(--ouro); color:var(--osso);
  background:rgba(201,162,74,.10)}


#clb .pl-mais[aria-pressed]{background:none}


#clb .pl-dica{display:block; margin-top:5px; font-size:.8rem; color:var(--ouro-txt);
  line-height:1.45}



/* O campo que o botão "mais" pediu: fica aceso até a pessoa chegar nele.
   É o fio que liga o clique lá no cartão ao campo aqui dentro — sem ele, a
   ficha abriria na etapa 1 e o pedido se perderia no caminho. */
#clb .campo-pedido{border-color:var(--ouro) !important;
  box-shadow:0 0 0 3px rgba(201,162,74,.20); animation:clb-pisca 2.4s ease-out 1}


@keyframes clb-pisca{
  0%,100%{box-shadow:0 0 0 3px rgba(201,162,74,.20)}
  35%{box-shadow:0 0 0 6px rgba(201,162,74,.34)}
}
@media (prefers-reduced-motion: reduce){#clb .campo-pedido{animation:none}
}



/* O CONTEÚDO NÃO PODE DEPENDER DO JS PARA EXISTIR. Tudo com .rev nasce
   transparente e só aparece quando o celebrar.js marca .vis. Se o arquivo não
   chegasse (rede ruim, bloqueador, cache), a página ficava vazia abaixo da capa,
   com preços e fichas junto. Agora uma animação parada acende tudo em 4s; o JS,
   quando roda, desliga essa rede (.rev-js) e a entrada suave continua igual. */
@keyframes clb-acende{to{opacity:1; transform:none}}
#clb .rev{animation:clb-acende 0s linear 4s forwards}
#clb.rev-js .rev:not(.vis){animation:none}



/* A AUTORIZAÇÃO DE MARCA É OPCIONAL (o comentário no JS explica por quê),
   mas levava o asterisco vermelho de obrigatória. */
#clb .aceite .opc{color:var(--areia-2)}



/* PULAR PARA O CONTEÚDO: fora da tela até receber o foco do teclado. */
#clb .pula:focus{left:16px !important; top:12px; z-index:200; padding:10px 14px; border-radius:6px;
  background:var(--ouro); color:#0b1017; font-weight:600; text-decoration:none}


#clb main:focus{outline:none}



/* CÓDIGO DE PATROCÍNIO: sem agenda, sem comprovante de reserva, sem sorteio. */
/* v28: o comprovante passou a existir para as três fichas — o patrocínio e a
   lista de espera também recebem um documento, com o texto certo para cada
   caso. O que continua fora deles é a agenda (não há evento a marcar antes de
   o lugar existir) e o aviso do sorteio. */
#clb .cod-cx.e-patro #ok-agenda,
#clb .cod-cx.e-patro .nao-sorteio{display:none}


/* v29: a caixa dos nomes ocupa o lugar que era da caixa do convite */
#clb .convite-cx h4{margin-bottom:8px}


#clb .cod-cx .nota-patro{margin-top:12px; font-size:.9rem; color:var(--areia-2)}

/* ═══════════════════════════════════════════════════════════════════════════
   v35 — A CARA NOVA DA PÁGINA   ·   v36 — as correções da primeira olhada no ar
   ═══════════════════════════════════════════════════════════════════════════
   Este bloco vem depois da base e manda nela. A base guarda o que não mudou:
   as janelas, os campos, os botões, os cartões de marca que o celebrar.js
   desenha. Aqui está só o que a pessoa vê ao rolar a página.

   A cor de fundo deixou de ser preto quase puro e virou azul-marinho: é o que
   separa a Celebrar de qualquer outro site escuro de evento, e é a cor da
   própria marca. Quem mexer daqui em diante mexe em --noite e o resto segue.
   ═══════════════════════════════════════════════════════════════════════════ */

#clb{
  --noite:#0c1724; --noite-2:#0e1b2a; --noite-3:#081220; --noite-4:#0a1520;
  --creme:#faf6ef; --creme-borda:#e8e0d0; --tinta:#1f2734; --tinta-2:#5d6675;
  /* o cinza do texto de apoio na faixa creme: #7b8492 dava 4,1:1 e o axe-core
     reprovou. #5d6675 dá 6,0:1 sobre o creme e continua sendo apoio. */
  --osso:#f2ece1; --areia:#b9bec7; --areia-2:#8d96a3;
  --ouro:#d4a24c; --ouro-2:#e0b45f; --ouro-txt:#dcae5c;
  /* o dourado escuro da faixa creme. #96692a dava 4,48:1 — dois centésimos
     abaixo do mínimo, o tipo de quase que reprova numa auditoria. #8a5f26 dá
     5,2:1 e, ao lado do outro, ninguém vê diferença. */
  --ouro-esc:#8a5f26;
  --fio:rgba(212,162,76,.16); --fio-c:rgba(255,255,255,.09);
  --pad:clamp(20px,5vw,78px);
  --alt-topo:86px;
}

#clb{background:var(--noite); font-size:15.5px}
/* A folha era um grid de 12 colunas: cada seção antiga colocava seus blocos
   em faixas desse grid. As seções novas montam a própria grade, então aqui ela
   volta a ser o que o nome diz — uma folha, com margem dos dois lados. */
#clb .folha{display:block; width:min(1560px,100%); max-width:none; margin:0 auto;
  padding-inline:var(--pad); column-gap:0}
#clb section{padding:0}

/* o rótulo com o fio dourado, usado no alto de quase toda seção */
#clb .olho{
  font-family:var(--d); font-style:italic; font-size:1.05rem; color:var(--ouro-txt);
  display:inline-flex; align-items:center; gap:13px; margin-bottom:12px;
  letter-spacing:0; text-transform:none;
}
#clb .olho::after{content:''; width:46px; height:1px; background:var(--ouro); opacity:.6}

#clb .sub-chamada{
  font-family:var(--d); font-weight:400; font-size:clamp(1.85rem,3.4vw,2.5rem);
  line-height:1.16; color:#fbf8f3;
}
#clb .sub-chamada em{font-style:italic; color:var(--ouro-txt)}
#clb .texto{margin-top:12px; color:var(--areia); font-size:.95rem; max-width:34ch}

#clb svg{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
/* sem tamanho, um <svg> com viewBox cresce até o espaço que houver — e come o
   rótulo do botão. Uma linha aqui vale por todas as setas da página. */
#clb .bt svg{width:16px; height:16px; flex:none; stroke-width:1.8}
#clb .bt{white-space:nowrap}

/* ── CABEÇALHO ────────────────────────────────────────────────────────────
   Fica no alto e acompanha a rolagem: com a página mais curta, o botão de
   reservar precisa estar sempre a um toque. v36: mais alto e com a logo
   maior — a marca é a primeira coisa que a pessoa procura ao chegar. */
#clb-topo{
  position:sticky; top:0; z-index:40; background:#0a1421;
  border-bottom:1px solid rgba(255,255,255,.06);
}
#clb-topo .folha{display:flex; align-items:center; gap:clamp(18px,3vw,36px); min-height:var(--alt-topo)}
#clb-topo .marca-topo{display:block; padding:5px 0; margin:-5px 0}
#clb-topo .marca-topo img{height:48px; width:auto}
#clb-topo nav{display:flex; gap:clamp(14px,1.9vw,26px)}
#clb-topo nav a{font-size:.9rem; color:#c8cdd5; text-decoration:none; white-space:nowrap}
#clb-topo nav a:hover,#clb-topo nav a.aqui{color:var(--ouro-txt)}
#clb-topo .topo-dir{margin-left:auto; display:flex; align-items:center; gap:clamp(14px,1.6vw,22px)}
#clb-topo .quando{text-align:right; font-size:.72rem; line-height:1.55; color:#a8b0ba}
#clb-topo .quando b{display:block; color:#e8eaee; font-weight:400; font-size:.75rem}
#clb-topo .bt{min-height:44px; padding:0 20px; font-size:.86rem; border-radius:6px; white-space:nowrap}
@media(max-width:1120px){ #clb-topo .quando{display:none} }
/* com cinco itens, o menu só cabe ao lado da logo grande a partir de ~980px */
@media(max-width:980px){ #clb-topo nav{display:none} }
/* três rótulos para o mesmo botão: o largo, o curto (celular) e o da lista de
   espera. O celebrar.js esconde o largo e põe a classe .espera quando as
   reservas lotam; o resto é só CSS. */
#clb-topo .so-estreito,#clb-topo .so-espera{display:none}
#clb-topo .bt.espera .so-espera{display:inline}
@media(max-width:900px){
  #clb{--alt-topo:68px}
  #clb-topo .marca-topo img{height:38px}
}
/* no celular o botão diz só "Reservar": com a logo maior, "Fazer minha
   reserva" empurrava a página 5px para o lado aos 360px */
@media(max-width:520px){
  #clb-topo .so-largo{display:none}
  #clb-topo .bt:not(.espera) .so-estreito{display:inline}
  #clb-topo .folha{gap:14px}
  #clb-topo .marca-topo img{height:36px}
  #clb-topo .bt{padding:0 16px}
}

/* ── CAPA ────────────────────────────────────────────────────────────────
   A foto ocupa a metade direita e fica visível: é ela que diz que noite é
   esta. O texto vive sobre o azul cheio da esquerda. v36: a foto é um painel
   próprio, e não um fundo de página inteira com véu por cima — o recorte é
   feito em cima do que aparece, e uma foto de grupo, em pé, não vira uma
   faixa estreita de rostos cortados. */
#clb #capa{position:relative; min-height:700px; display:flex; align-items:center; overflow:hidden;
  background:var(--noite-3)}
#clb #capa .capa-foto{position:absolute; top:0; right:0; bottom:0; left:44%}
#clb #capa .capa-foto img{width:100%; height:100%; object-fit:cover; object-position:50% 38%}
#clb #capa .capa-foto::after{content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,var(--noite-3) 0%,rgba(8,18,32,.74) 9%,rgba(8,18,32,.26) 24%,
    rgba(8,18,32,0) 40%)}
#clb #capa .capa-g{position:relative; z-index:2; width:100%; padding-top:52px; padding-bottom:46px}
#clb #capa .capa-g > *{max-width:620px}
#clb #capa .edicao{
  font-size:.7rem; letter-spacing:.17em; text-transform:uppercase; color:var(--ouro-txt);
  display:flex; align-items:center; gap:12px; margin-bottom:16px;
}
#clb #capa .edicao::after{content:''; width:34px; height:1px; background:var(--ouro); opacity:.7}
#clb #capa h1{
  font-family:var(--d); font-weight:400; font-size:clamp(2.4rem,5.2vw,3.7rem); line-height:1.12;
  color:#fbf8f3; max-width:6.7em; letter-spacing:.005em;
}
#clb #capa h1 em{font-style:italic; color:var(--ouro-txt)}
#clb #capa .sub{margin-top:14px; font-size:.95rem; color:#c3c9d1; max-width:26em; line-height:1.55}
#clb #capa .capa-linha{
  display:flex; flex-wrap:wrap; margin:26px 0 0; padding-bottom:18px; max-width:560px;
  border-bottom:1px solid rgba(212,162,76,.32);
}
#clb #capa .capa-linha li{display:flex; align-items:center; gap:9px; padding:0 18px 0 0;
  font-size:.79rem; color:#cfd4db; line-height:1.35}
#clb #capa .capa-linha li + li{padding-left:18px; border-left:1px solid rgba(255,255,255,.12)}
#clb #capa .capa-linha svg{width:15px; height:15px; color:var(--ouro); flex:none}
#clb #capa .inclui-min{margin-top:15px; font-size:.9rem; color:var(--ouro-txt)}
#clb #capa .preco-capa{display:flex; align-items:baseline; gap:12px; margin:8px 0 22px}
#clb #capa .preco-capa b{font-family:var(--d); font-weight:400; font-size:2.8rem; color:var(--ouro-2);
  line-height:1; letter-spacing:.01em}
#clb #capa .preco-capa span{font-size:.79rem; color:#aeb5be; line-height:1.35}
#clb #capa .acoes{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0}
#clb #capa .acoes .bt{min-height:48px}
#clb #capa .acoes .bt-vazado{color:var(--ouro-txt); border-color:rgba(212,162,76,.6)}
#clb #capa .acoes .bt-vazado:hover{background:rgba(212,162,76,.1); color:var(--ouro-2)}

@media(max-width:1100px){
  #clb #capa .capa-foto{left:50%}
  #clb #capa .capa-linha{max-width:min(560px,44vw)}
}
@media(max-width:900px){
  /* v42: no celular e no tablet em pé a foto deixa de ser o fundo do texto. Ela vira uma faixa no topo,
     INTEIRA (a foto é panorâmica, 1200x660: o grupo diante do painel dos patrocinadores), e o texto fica
     embaixo, no azul liso. Antes ela cobria a seção toda e, sendo panorâmica, só aparecia o miolo do
     painel, ampliado, atrás do título; o véu escuro não escondia as logos. A faixa guarda a proporção da
     foto (aspect-ratio) e é limitada a 440px ou 62% da altura da tela; o excesso é cortado em cima e
     embaixo (object-position), nunca nos lados do grupo. */
  #clb #capa{min-height:0; flex-direction:column; align-items:stretch}
  #clb #capa .capa-foto{position:relative; inset:auto; width:100%; aspect-ratio:1200/660; max-height:min(440px,62vh)}
  #clb #capa .capa-foto img{position:absolute; inset:0; display:block}
  #clb #capa .capa-foto::after{background:linear-gradient(180deg,rgba(8,18,32,0) 78%,var(--noite-3) 100%)}
  #clb #capa .capa-g{padding-top:22px; padding-bottom:30px}
  #clb #capa .capa-g > *{max-width:none}
  #clb #capa .capa-linha{max-width:none}
}
@media(max-width:520px){
  #clb #capa .acoes .bt{flex:1 1 100%; justify-content:center}
  /* o rótulo quebra em duas linhas no celular e o fio ficava solto no fim da
     primeira; sem o fio, ele lê como texto corrido */
  #clb #capa .edicao::after{display:none}
}

/* ── A FAIXA DE ESTADO ───────────────────────────────────────────────────
   Três respostas em uma linha: quando é, se há lugar e quanto falta. v36: o
   terceiro quadro deixou de ser "lista de espera" e virou a contagem
   regressiva, em número grande e com fundo dourado — é o que mais chama o
   olho na faixa. */
#clb #numeros{background:var(--noite-4); border-bottom:1px solid rgba(255,255,255,.06)}
#clb #numeros .carimbo{
  display:grid; grid-template-columns:repeat(3,1fr); background:none; border:0;
  padding-left:0; padding-right:0; border-radius:0;
}
#clb #numeros .folha{padding-left:0; padding-right:0; max-width:1560px}
#clb #numeros .cbloco{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  column-gap:13px; padding:17px clamp(14px,2vw,26px); min-width:0;
}
#clb #numeros .cbloco + .cbloco{border-left:1px solid rgba(255,255,255,.08)}
#clb #numeros .ic{width:32px; height:32px; display:grid; place-items:center; grid-row:1/3;
  color:var(--ouro); flex:none}
#clb #numeros .ic svg{width:19px; height:19px}
#clb #numeros .clab{grid-column:2; font-size:.62rem; font-weight:500; letter-spacing:.15em;
  text-transform:uppercase; color:var(--areia-2)}
#clb #numeros .cval{grid-column:2; font-family:var(--d); font-weight:400; color:#f0ece4;
  font-size:1.4rem; line-height:1.2; margin-top:1px}
#clb #numeros .csub{grid-column:2; font-size:.72rem; color:var(--areia-2); line-height:1.4; margin-top:2px}
#clb #numeros .csub i{font-style:normal; color:var(--osso)}
#clb #numeros .quente .cval{color:var(--ouro-2)}
/* a contagem regressiva: os números são lidos pelo celebrar.js (#t-dias e
   #t-rot), que troca o rótulo sozinho na véspera, no dia e depois da festa */
#clb #numeros .cbloco-conta{background:linear-gradient(90deg,rgba(212,162,76,.14),rgba(212,162,76,.03))}
#clb #numeros .conta-g{grid-column:2; display:flex; align-items:center; gap:12px; margin:0}
#clb #numeros .conta-g #t-dias{font-family:var(--d); font-weight:500;
  font-size:clamp(2.7rem,3.6vw,3.5rem); line-height:1; color:var(--ouro-2);
  font-variant-numeric:lining-nums}
#clb #numeros .conta-g #t-rot{font-size:.85rem; line-height:1.3; color:var(--osso)}
#clb #numeros .urg-faixa{grid-column:1/-1}
#clb #numeros .urg-faixa:empty{display:none}
@media(max-width:900px){
  #clb #numeros .carimbo{grid-template-columns:1fr}
  #clb #numeros .cbloco + .cbloco{border-left:0; border-top:1px solid rgba(255,255,255,.08)}
}

/* ── SUA RESERVA INCLUI ──────────────────────────────────────────────────
   Faixa clara. Quatro itens numa linha só, separados por fios: a lista mais
   curta possível de por que vale os R$ 280. */
#clb #inclui{background:var(--creme); color:var(--tinta)}
#clb #inclui .folha{padding-top:44px; padding-bottom:44px}
#clb #inclui .tit-fio{
  font-family:var(--d); font-size:1.94rem; font-weight:400; margin-bottom:22px; color:var(--tinta);
  display:flex; align-items:center; gap:16px;
}
#clb #inclui .tit-fio::after{content:''; width:60px; height:1px; background:var(--ouro); opacity:.75}
#clb #inclui .itens{display:grid; grid-template-columns:repeat(4,1fr)}
#clb #inclui .itens li{display:flex; gap:16px; align-items:flex-start;
  padding:0 clamp(12px,1.7vw,26px); min-width:0}
#clb #inclui .itens li + li{border-left:1px solid rgba(31,39,52,.13)}
#clb #inclui .itens li:first-child{padding-left:0}
#clb #inclui .itens li > span{min-width:0}
#clb #inclui .itens svg{width:46px; height:46px; color:var(--ouro); flex:none; margin-top:-2px;
  stroke-width:1.35}
#clb #inclui .itens b{display:block; font-weight:600; font-size:.94rem; color:var(--tinta); line-height:1.3}
#clb #inclui .itens small{display:block; font-size:.79rem; color:var(--tinta-2); line-height:1.4; margin-top:2px}
@media(max-width:900px){
  #clb #inclui .itens{grid-template-columns:1fr 1fr; gap:22px 14px}
  #clb #inclui .itens li{flex-direction:column; gap:8px; padding:0}
  #clb #inclui .itens li + li{border-left:0}
  #clb #inclui .itens svg{width:38px; height:38px}
}
@media(max-width:420px){ #clb #inclui .itens{grid-template-columns:1fr} }

/* ── A EXPERIÊNCIA ───────────────────────────────────────────────────────
   Texto à esquerda, três fotos à direita: uma alta e duas empilhadas.
   v36: a altura da galeria vem da LARGURA (4:3) e não do tamanho das fotos.
   Antes ela tinha altura fixa com linhas 1fr; uma foto de verdade, com altura
   natural, empurrava as linhas, a galeria vazava por baixo e o bloco de
   Patrocinadores subia por cima dela. Com minmax(0,1fr), min-height:0 e
   overflow:hidden, nenhuma foto, de nenhum tamanho, mexe na altura da seção. */
#clb #festa{background:var(--noite); padding:58px 0 52px}
#clb #festa .exp{display:grid; grid-template-columns:.86fr 1.34fr;
  gap:clamp(24px,3.6vw,52px); align-items:center}
#clb #festa .sub-chamada{max-width:12ch}
#clb #festa .texto{max-width:24em}
#clb #festa .exp-tags{display:flex; gap:26px; margin-top:22px; flex-wrap:wrap}
#clb #festa .exp-tags li{display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--areia-2)}
#clb #festa .exp-tags svg{width:16px; height:16px; color:var(--ouro)}
/* v37: o texto que voltou da v34 e os três destaques abaixo da galeria */
#clb #festa .exp-corpo{display:grid; gap:12px; margin-top:26px; padding-top:22px;
  border-top:1px solid rgba(212,162,76,.22)}
#clb #festa .exp-corpo p{font-size:.92rem; line-height:1.62; color:var(--areia-2); max-width:38em}
#clb #festa .exp-pontos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,44px); margin-top:46px; padding:0; list-style:none}
#clb #festa .exp-pontos li{border-top:1px solid rgba(212,162,76,.32); padding-top:18px}
#clb #festa .exp-pontos b{display:block; margin-bottom:6px; font-weight:600; font-size:.98rem; color:var(--creme)}
#clb #festa .exp-pontos span{display:block; font-size:.9rem; line-height:1.6; color:var(--areia-2)}
#clb #festa .fotos{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) minmax(0,1fr); gap:12px; aspect-ratio:4/3;
  min-height:0; overflow:hidden}
#clb #festa .fotos img{display:block; width:100%; height:100%; min-width:0; min-height:0;
  object-fit:cover; border:1px solid rgba(255,255,255,.055)}
#clb #festa .fotos img:first-child{grid-row:1/3}
#clb #festa .fotos-nota{margin-top:8px; text-align:right; font-size:.7rem; color:rgba(255,255,255,.55)}
@media(max-width:1100px){
  #clb #festa .exp{grid-template-columns:1fr}
  #clb #festa .sub-chamada,#clb #festa .texto{max-width:none}
  #clb #festa .fotos{aspect-ratio:16/10}
}
@media(max-width:900px){
  #clb #festa .fotos{aspect-ratio:auto; grid-template-rows:minmax(0,180px) minmax(0,180px)}
  #clb #festa .exp-pontos{grid-template-columns:1fr; gap:22px; margin-top:34px}
}

/* ── PATROCINADORES ──────────────────────────────────────────────────────
   Título à esquerda, master à direita, as demais marcas embaixo. Enquanto
   não houver marca, o convite ocupa o lugar e a caixa do master fica vazia
   de propósito: promete o espaço em vez de esconder que ele existe. */
#clb #vitrine{background:var(--noite-3); padding:56px 0 50px}
#clb #vitrine .patro-cab{display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,38px); align-items:center; margin-bottom:26px}
#clb #vitrine .sub-chamada{display:flex; align-items:center; gap:18px}
#clb #vitrine .sub-chamada::after{content:''; flex:1; height:1px; background:rgba(212,162,76,.45)}
#clb #vitrine .master{border:none; padding:0; text-align:center;
  position:relative; min-height:0; display:grid; place-items:center}
#clb #vitrine .master .et{display:none}
#clb #vitrine #patro-topo{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; width:100%}
#clb #vitrine #patro-topo:empty::after{content:'Este espaço é do patrocinador master.';
  font-size:.79rem; color:var(--areia-2)}
#clb #vitrine .convite{margin:0 0 18px}
#clb #vitrine .vit-pe{display:flex; justify-content:space-between; align-items:center; gap:20px;
  margin-top:18px; font-size:.79rem; color:var(--areia-2); flex-wrap:wrap}
@media(max-width:900px){ #clb #vitrine .patro-cab{grid-template-columns:1fr; gap:18px} }

/* ── RESERVAS ────────────────────────────────────────────────────────────
   Dois cartões claros sobre a faixa creme. O ícone entrou na linha do
   título: o cartão passou a começar pelo que ele é, e não por um desenho. */
#clb #ingressos{background:var(--creme); color:var(--tinta); padding:56px 0 52px}
#clb #ingressos .olho{color:var(--ouro-esc)}
#clb #ingressos .olho::after{background:var(--ouro-esc); opacity:.5}
#clb #ingressos .sub-chamada{color:var(--tinta)}
#clb #ingressos .texto{margin-top:6px; color:var(--tinta-2); max-width:none}
#clb #ingressos .aviso-espera{margin-top:16px}
#clb #ingressos .cartoes{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:26px}
#clb #ingressos .oferta{
  background:#fff; border:1px solid var(--creme-borda); border-radius:9px;
  padding:26px 26px 24px; position:relative; display:flex; flex-direction:column;
}
#clb #ingressos .oferta.destaque{border-color:rgba(212,162,76,.85)}
#clb #ingressos .oferta .et{
  position:absolute; top:-11px; right:22px; background:linear-gradient(180deg,#e3b75f,#cf9e46);
  color:#1a1206; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  padding:4px 11px; border-radius:4px;
}
#clb #ingressos .cab{display:flex; align-items:center; gap:15px; margin-bottom:12px}
#clb #ingressos .cab .ic{width:46px; height:46px; border-radius:50%; background:#f6efe2;
  display:grid; place-items:center; flex:none; color:var(--ouro-esc)}
#clb #ingressos .cab .ic svg{width:22px; height:22px}
#clb #ingressos .cab h3{font-family:var(--d); font-weight:400; font-size:1.55rem; color:var(--tinta)}
#clb #ingressos .preco{font-family:var(--d); font-weight:400; font-size:2.5rem; color:var(--ouro-esc);
  line-height:1.05; display:block; margin:0}
#clb #ingressos .preco .val{display:inline}
/* o <b> do preço herdava o dourado claro da página escura e ficava com 2:1
   sobre o branco do cartão. Aqui ele volta para o dourado da faixa clara. */
#clb #ingressos .preco .val,#clb #ingressos .preco .val b{color:var(--ouro-esc)}
#clb #ingressos .preco .val b{font-weight:400; margin:0; letter-spacing:.01em}
#clb #ingressos .val-s{font-size:.79rem; color:var(--tinta-2); margin-bottom:16px}
#clb #ingressos .inclui-lista{display:grid; gap:9px; margin-bottom:20px}
#clb #ingressos .inclui-lista li{display:flex; gap:11px; font-size:.85rem; color:#454f5e;
  line-height:1.45; align-items:flex-start}
#clb #ingressos .inclui-lista li::before{
  content:''; width:17px; height:17px; border-radius:50%; background:var(--ouro); flex:none;
  margin-top:2px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5.5 5.5L20 6'/%3E%3C/svg%3E");
  background-size:10px 10px; background-repeat:no-repeat; background-position:center;
}
#clb #ingressos .oferta .bt{width:100%; margin-top:auto; min-height:46px}
#clb #ingressos .oferta .bt-vazado{color:var(--ouro-esc); border-color:rgba(212,162,76,.6)}
#clb #ingressos .oferta .bt-vazado:hover{background:rgba(212,162,76,.1)}
#clb #ingressos .pagamento{display:flex; align-items:center; justify-content:center; margin-top:26px;
  flex-wrap:wrap; font-size:.79rem; color:var(--tinta-2)}
#clb #ingressos .pagamento li{display:flex; align-items:center; gap:9px; padding:0 24px}
#clb #ingressos .pagamento li + li{border-left:1px solid rgba(31,39,52,.14)}
#clb #ingressos .pagamento svg{width:15px; height:15px; color:var(--tinta); flex:none}
@media(max-width:900px){
  #clb #ingressos .cartoes{grid-template-columns:1fr}
  #clb #ingressos .pagamento li{padding:8px 0}
  #clb #ingressos .pagamento li + li{border-left:0}
}

/* ── DÚVIDAS ─────────────────────────────────────────────────────────────
   Caixas separadas, com o "+" à direita. O acordeão é <details>: abre sem
   JavaScript, e o teclado já sabe usá-lo. v36: uma coluna só, centralizada e
   mais larga — sem o botão de contato, o título deixou de ter par à direita. */
#clb #duvidas{background:var(--noite-3); padding:60px 0 64px}
#clb #duvidas .duv{text-align:center}
#clb #duvidas .duv > *{max-width:900px; margin-inline:auto}
#clb #duvidas .olho{justify-content:center}
#clb #duvidas .olho::before{content:''; width:46px; height:1px; background:var(--ouro); opacity:.6}
#clb #duvidas .texto{max-width:none; margin-inline:auto}
#clb #duvidas .perguntas{display:grid; gap:10px; margin-top:30px; text-align:left}
#clb #duvidas details{background:var(--noite-2); border:1px solid rgba(255,255,255,.07); border-radius:6px}
#clb #duvidas summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 22px;
  cursor:pointer; font-size:1rem; color:#e6e9ee; list-style:none; min-height:56px;
}
#clb #duvidas summary::-webkit-details-marker{display:none}
#clb #duvidas summary::after{content:'+'; font-size:1.3rem; color:var(--ouro); line-height:1;
  flex:none; font-weight:300}
#clb #duvidas details[open] summary::after{content:'–'}
#clb #duvidas details p{padding:0 22px 18px; color:var(--areia); font-size:.92rem; line-height:1.6}
#clb #duvidas summary:focus-visible{outline:2px solid var(--ouro); outline-offset:2px}

/* ── O LOCAL ─────────────────────────────────────────────────────────────
   v36: mapa e texto voltaram para a mesma grade do resto da página. Antes o
   mapa sangrava até a borda da tela e o texto ficava solto, fora do
   alinhamento das outras seções. O mapa agora é escuro de verdade (cores
   invertidas), tem moldura, e os dois lados têm a mesma altura. */
#clb #local{background:var(--noite); padding:60px 0}
#clb #local .loc-g{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(26px,4vw,64px); align-items:stretch}
#clb #local .loc-mapa{position:relative; min-height:440px; border:1px solid rgba(212,162,76,.32);
  border-radius:8px; overflow:hidden; background:#0a121d}
#clb #local .loc-mapa iframe{position:absolute; inset:0; width:100%; height:100%; border:0;
  filter:invert(.92) hue-rotate(180deg) saturate(.6) brightness(.92) contrast(.95)}
#clb #local .loc-mapa::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:rgba(12,23,36,.32); mix-blend-mode:multiply}
#clb #local .loc-txt{display:flex; flex-direction:column; justify-content:center}
#clb #local .loc-dados{margin-top:18px; display:grid; gap:11px}
#clb #local .loc-dados li{display:flex; gap:12px; align-items:center; font-size:.88rem; color:#c3c9d1}
#clb #local .loc-dados .qi{width:30px; height:30px; border:1px solid rgba(212,162,76,.4);
  border-radius:5px; display:grid; place-items:center; flex:none; color:var(--ouro)}
#clb #local .loc-dados svg{width:15px; height:15px}
#clb #local .acao{margin-top:22px}
#clb #local .acao .bt{display:inline-flex}
#clb #local .loc-extra{display:flex; gap:38px; margin-top:28px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.08); flex-wrap:wrap}
#clb #local .loc-extra li{display:flex; align-items:center; gap:12px}
#clb #local .loc-extra svg{width:19px; height:19px; color:var(--ouro); flex:none}
#clb #local .loc-extra b{display:block; color:#e6e9ee; font-weight:400; font-size:.85rem}
#clb #local .loc-extra .link{display:inline-block; margin-top:2px; font-size:.79rem}
@media(max-width:900px){
  #clb #local{padding:44px 0}
  #clb #local .loc-g{grid-template-columns:minmax(0,1fr)}
  #clb #local .loc-mapa{min-height:270px}
}

/* ── AS COTAS, NO FIM ────────────────────────────────────────────────────── */
#clb #patrocinio{background:var(--noite); padding:56px 0 52px}
#clb #patrocinio .texto{max-width:60ch}
#clb #patrocinio .cotas{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px}
#clb #patrocinio .aviso-cota{margin-top:20px; font-size:.82rem; color:var(--areia-2)}
#clb #patrocinio .aviso-cota b{color:var(--osso)}
#clb #patrocinio .fecho{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:22px}
#clb #patrocinio .fecho p{font-size:.79rem; color:var(--areia-2); max-width:44ch}
@media(max-width:900px){ #clb #patrocinio .cotas{grid-template-columns:1fr} }

/* ── RODAPÉ ──────────────────────────────────────────────────────────────
   Uma faixa só: marca, contatos, quem assina. As três colunas antigas
   viraram uma linha — com a página mais curta, um rodapé alto só empurrava
   o fim para longe. */
#clb footer{background:#060f1a; padding:20px 0; border-top:1px solid rgba(255,255,255,.05)}
#clb footer .pe-g{display:flex; align-items:center; gap:26px; flex-wrap:wrap}
#clb footer .pe-g > img{height:28px; width:auto; opacity:.85}
#clb footer .elos{display:flex; gap:24px; font-size:.79rem; color:#9aa2ad; flex-wrap:wrap;
  padding-left:26px; border-left:1px solid rgba(255,255,255,.1)}
#clb footer .elos a,#clb footer .elos .link-pe{color:#9aa2ad; text-decoration:none; background:none;
  border:0; padding:0; font-family:var(--f); font-size:inherit; cursor:pointer}
#clb footer .elos a:hover,#clb footer .elos .link-pe:hover{color:var(--ouro-txt)}
#clb footer .apresenta-pe{display:flex; align-items:center; gap:14px}
#clb footer .apresenta-pe .olho{margin:0; font-size:.75rem}
#clb footer .apresenta-pe .olho::after{display:none}
#clb footer .marcas-pe{display:flex; gap:12px}
#clb footer .por{margin-left:auto; display:flex; align-items:center; gap:6px; font-size:.72rem;
  color:rgba(255,255,255,.55); text-decoration:none; white-space:nowrap}
#clb footer .por .marca-txt{color:#e6e9ee; font-weight:500}
#clb footer .por:hover .marca-txt,#clb footer .por:focus-visible .marca-txt{color:var(--ouro-txt)}
@media(max-width:700px){
  #clb footer .elos{padding-left:0; border-left:0; width:100%}
  #clb footer .por{margin-left:0}
}

/* ── OS MÍNIMOS QUE NÃO SE NEGOCIAM ──────────────────────────────────────
   24px de alvo de toque (WCAG 2.2 AA) e 11px de letra. Um link de texto tem
   a altura da linha, que num corpo pequeno dá 15 ou 17px: o dedo erra, e
   quem erra duas vezes desiste. A altura entra sem mexer no desenho —
   inline-flex e min-height, sem caixa visível. */
#clb .link,#clb-topo nav a,#clb footer .elos a,#clb footer .elos .link-pe,
#clb footer .por,#clb #local .loc-extra .link,#clb #numeros .cbloco .link{
  display:inline-flex; align-items:center; min-height:24px;
}
#clb #festa .fotos-nota{font-size:.7rem}
#clb #vitrine .master .et,#clb #ingressos .oferta .et{font-size:.7rem}
#clb #numeros .clab{font-size:.7rem}
#clb footer .por{font-size:.72rem}
#clb footer .apresenta-pe .olho{font-size:.76rem}

/* ── A TRAVA DO VAZAMENTO LATERAL ────────────────────────────────────────
   Dentro de uma grade ou de um flex, a largura mínima de um filho é o
   tamanho natural do conteúdo — e uma foto de 900px declarados empurra a
   coluna para 900px mesmo com max-width:100%. A página inteira passa a rolar
   para o lado no celular, que é o defeito mais chato que existe num site de
   festa. Estas linhas dizem, uma vez só, que nenhum filho tem largura mínima. */
#clb #festa .exp > *,#clb #festa .fotos-col,#clb #festa .fotos,#clb #festa .fotos > *,
#clb #inclui .itens > li,#clb #inclui .itens li > span,
#clb #numeros .cbloco,#clb #numeros .cbloco > *,
#clb #ingressos .cartoes > *,#clb #ingressos .pagamento > li,
#clb #duvidas .duv > *,#clb #local .loc-txt,#clb #local .loc-extra > li,
#clb footer .pe-g > *,#clb-topo .folha > *{min-width:0}
#clb #festa .fotos img{max-width:100%}
/*clb:44*/