/* Botões Matrix (skin.botoes.estilo = "matrix"), inspirados em Shiny Button, Interactive Hover Button e Liquid Glass Button do 21st.dev.
   Principal: pílula na cor da marca com brilho e seta; vidro: sobre o panorama; contorno: dentro de cartões claros. */
body.botoes-matrix{--bm-brilho:linear-gradient(105deg,transparent 35%,#ffffff70 50%,transparent 65%)}

/* principal (.btn.gold e o botão flutuante de reserva) */
body.botoes-matrix .btn{border-radius:999px;padding:12px 20px;font-weight:700;letter-spacing:.02em;transition:transform .25s cubic-bezier(.25,1,.5,1),box-shadow .3s,background .3s,color .3s,border-color .3s,gap .3s}
body.botoes-matrix .btn.gold,body.botoes-matrix .cta{position:relative;overflow:hidden;isolation:isolate;background:var(--ouro);color:#fff;border:1px solid color-mix(in srgb,var(--ouro) 70%,#fff);
  box-shadow:0 8px 24px color-mix(in srgb,var(--ouro) 45%,transparent),inset 0 1px 0 #ffffff59}
body.botoes-matrix .btn.gold::before,body.botoes-matrix .cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bm-brilho);background-size:250% 100%;background-position:120% 0;transition:background-position .9s ease}
body.botoes-matrix .btn.gold:hover::before,body.botoes-matrix .cta:hover::before{background-position:-20% 0}
body.botoes-matrix .btn.gold::after{content:"→";display:inline-block;max-width:0;opacity:0;overflow:hidden;transition:max-width .3s,opacity .3s,transform .3s;transform:translateX(-6px)}
body.botoes-matrix .btn.gold:hover::after{max-width:20px;opacity:1;transform:none}
body.botoes-matrix .btn.gold:hover,body.botoes-matrix .cta:hover{transform:translateY(-2px);filter:none;box-shadow:0 14px 32px color-mix(in srgb,var(--ouro) 55%,transparent),inset 0 1px 0 #ffffff59}
body.botoes-matrix .btn:active,body.botoes-matrix .cta:active{transform:translateY(0) scale(.97)}
/* o botão de reserva brilha sozinho de vez em quando para chamar atenção */
body.botoes-matrix .cta{border-radius:999px;padding:0 22px}
body.botoes-matrix .cta::before{animation:bm-brilho 5s ease-in-out 2s infinite}
@keyframes bm-brilho{0%,70%{background-position:120% 0}100%{background-position:-20% 0}}

/* contorno (.btn.light): dentro do painel branco e das janelas claras */
body.botoes-matrix .btn.light{background:transparent;color:var(--verde);border:1.5px solid color-mix(in srgb,var(--verde) 55%,transparent)}
body.botoes-matrix .btn.light:hover{background:var(--verde);color:#fff;border-color:var(--verde);transform:translateY(-2px)}

/* vidro: ferramentas e controles sobre o panorama */
body.botoes-matrix .tool,body.botoes-matrix .zoom-controls button{border-radius:14px;border:1px solid #ffffff40;background:color-mix(in srgb,var(--verde) 45%,#0a0d0e80);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 6px 18px #0005,inset 0 1px 0 #ffffff33;transition:background .3s,border-color .3s,color .3s,transform .25s}
body.botoes-matrix .tool:hover,body.botoes-matrix .tool[aria-pressed="true"],body.botoes-matrix .zoom-controls button:hover:not(:disabled){background:var(--ouro);border-color:var(--ouro);color:var(--verde);transform:translateY(-2px)}
body.botoes-matrix .zoom-controls{border-radius:16px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* fechar das janelas */
body.botoes-matrix .close{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;transition:background .25s,color .25s,transform .25s}
body.botoes-matrix .close:hover{background:color-mix(in srgb,var(--verde) 12%,transparent);transform:rotate(90deg)}

/* WhatsApp com anel pulsando */
body.botoes-matrix .whats{box-shadow:0 8px 22px #0005}
body.botoes-matrix .whats::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #25d366;animation:bm-anel 2.4s ease-out infinite;pointer-events:none}
@keyframes bm-anel{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}

body.botoes-matrix .btn:focus-visible,body.botoes-matrix .cta:focus-visible,body.botoes-matrix .tool:focus-visible{outline:2px solid var(--ambar);outline-offset:3px}
@media(prefers-reduced-motion:reduce){body.botoes-matrix .cta::before,body.botoes-matrix .whats::after{animation:none}}
