/* =========================================================================
   botoes.css — acabamento premium de todos os botões (carregado por último,
   sobrescreve style.css). Hover ESTÁVEL: o botão não se desloca (nada de
   magnetismo/elevação — causavam tremor na borda do cursor). O que muda:
   sombra/brilho, faixa de luz que passa UMA vez, seta que avança.
   Estados active/focus acessíveis.
   ========================================================================= */

:root {
  --b-ease: cubic-bezier(.22, 1, .36, 1);        /* saída longa e macia */
  --b-ease-io: cubic-bezier(.65, 0, .35, 1);     /* entra/sai para a seta */
  --b-dur: .55s;
  --b-ring: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--gold-light);
}

/* ---------- base ---------- */
.btn {
  border-radius: 12px;
  gap: 18px;
  padding: 0 8px 0 26px;
  letter-spacing: .01em;
  transform: none;
  transition:
    transform .18s var(--b-ease),
    box-shadow var(--b-dur) var(--b-ease),
    background-color .35s var(--b-ease),
    border-color .35s var(--b-ease),
    color .35s var(--b-ease);
  -webkit-tap-highlight-color: transparent;
}
/* corpo do botão parado no hover (sobrescreve translateY de style.css) */
.btn:hover, .btn--gold:hover, .btn--ink:hover { transform: none; }
.btn:active { transform: scale(.98); transition-duration: .1s; }
.btn:focus-visible { outline: none; box-shadow: var(--b-ring); }
.btn__txt { position: relative; z-index: 1; }

/* ---------- ícone: disco com seta que avança ---------- */
.btn .btn__ico {
  position: relative; overflow: hidden;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--ink-900); color: var(--gold-light);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -6px 12px rgba(0,0,0,.35), 0 0 0 1px rgba(29,24,3,.25);
  transition: transform var(--b-dur) var(--b-ease), background-color .35s, color .35s;
}
.btn .btn__ico svg {
  width: 17px; height: 17px; stroke-width: 1.9;
  transition: transform var(--b-dur) var(--b-ease-io), opacity .3s;
}
.btn:hover .btn__ico { transform: none; }                     /* anula o giro antigo */
.btn:hover .btn__ico:not(.btn__ico--swap) svg { transform: translateX(2px); }
/* seta dupla: a 1ª sai pela direita, a 2ª entra pela esquerda */
.btn__ico--swap svg { grid-area: 1 / 1; }
.btn__ico--swap svg + svg { transform: translateX(-30px); }
.btn:hover .btn__ico--swap svg:first-child,
.btn:focus-visible .btn__ico--swap svg:first-child { transform: translateX(30px); }
.btn:hover .btn__ico--swap svg + svg,
.btn:focus-visible .btn__ico--swap svg + svg { transform: none; transition-delay: .06s; }

/* ---------- OURO (CTA principal) ---------- */
.btn--gold {
  color: #1A1503;
  background: var(--metal); background-size: 100% 100%; background-position: 0 0;
  animation: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(90,70,5,.35),
    0 0 0 1px rgba(140,115,16,.55),
    0 12px 32px -10px rgba(208,176,42,.55),
    0 2px 6px -2px rgba(0,0,0,.35);
}
/* faixa de luz que atravessa o metal */
.btn--gold::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 0 38%, rgba(255,250,228,.0) 40%, rgba(255,250,228,.85) 48%, rgba(255,255,255,.95) 50%, rgba(255,250,228,.0) 58%, transparent 60% 100%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  mix-blend-mode: soft-light;
  animation: btn-glint 7s var(--b-ease-io) 2.4s infinite;
}
.btn--gold:hover::before, .btn--gold:focus-visible::before { animation: btn-glint-once .95s var(--b-ease-io) 1 both; }
@keyframes btn-glint { 0%, 78% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
@keyframes btn-glint-once { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* halo difuso: acende no hover */
.btn--gold::after {
  inset: -10px; border-radius: 24px; opacity: .55;
  background: radial-gradient(60% 75% at 50% 65%, rgba(233,212,122,.55), transparent 72%);
  filter: blur(12px);
  transition: opacity var(--b-dur) var(--b-ease), transform var(--b-dur) var(--b-ease);
}
.btn--gold:hover::after { opacity: 1; }
.btn--gold:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(90,70,5,.35),
    0 0 0 1px rgba(140,115,16,.7),
    0 22px 48px -14px rgba(208,176,42,.7),
    0 4px 10px -4px rgba(0,0,0,.4);
}
.btn--gold:hover .btn__ico { background: #041621; color: #FFF1B8; }
.btn--gold:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 2px 6px rgba(90,70,5,.35), 0 0 0 1px rgba(140,115,16,.7), 0 8px 20px -10px rgba(208,176,42,.6); }
.btn--gold:focus-visible { box-shadow: var(--b-ring), 0 18px 40px -14px rgba(208,176,42,.7); }

/* ---------- PETRÓLEO (CTA sobre fundo claro) ---------- */
.btn--ink {
  color: #fff;
  background: linear-gradient(180deg, #11435C 0%, #0A2F42 55%, #061D2A 100%);
  background-size: 100% 100%;
  animation: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 1px rgba(208,176,42,.35),
    0 14px 32px -14px rgba(7,31,44,.7);
}
.btn--ink::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 0 40%, rgba(233,212,122,.28) 50%, transparent 60% 100%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0;
}
.btn--ink:hover::before, .btn--ink:focus-visible::before { animation: btn-glint-once 1s var(--b-ease-io) 1 both; }
.btn--ink .btn__ico { background: var(--metal); color: #1A1503; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 1px rgba(140,115,16,.5); }
.btn--ink:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(208,176,42,.7), 0 22px 44px -16px rgba(7,31,44,.8); }
.btn--ink:focus-visible { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--gold-deep); }

/* ---------- FANTASMA (secundário) — preenchimento que desliza ---------- */
.btn--ghost, .btn--ghost-dark { padding: 0 30px; overflow: hidden; }
.btn--ghost::before, .btn--ghost-dark::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  transform: scaleX(0); transform-origin: right center;
  transition: transform .6s var(--b-ease);
}
.btn--ghost:hover::before, .btn--ghost-dark:hover::before,
.btn--ghost:focus-visible::before, .btn--ghost-dark:focus-visible::before { transform: scaleX(1); transform-origin: left center; }

.btn--ghost {
  color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.btn--ghost::before { background: linear-gradient(100deg, rgba(233,212,122,.13), rgba(255,255,255,.05)); }
.btn--ghost:hover { border-color: rgba(233,212,122,.85); color: var(--gold-pale); background: rgba(255,255,255,.03); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 34px -18px rgba(208,176,42,.55); }
.btn--ghost:active { background: rgba(208,176,42,.12); }

.btn--ghost-dark { color: var(--text); border: 1px solid rgba(11,34,48,.3); background: transparent; }
.btn--ghost-dark::before { background: var(--ink-800); }
.btn--ghost-dark:hover { border-color: var(--ink-800); color: #fff; box-shadow: 0 14px 30px -16px rgba(7,31,44,.55); }
.btn--ghost-dark:focus-visible { color: #fff; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--gold-deep); }

/* ---------- pequeno ---------- */
.btn--sm { --h: 46px; padding: 0 6px 0 18px; gap: 12px; border-radius: 10px; }
.btn--sm .btn__ico { width: 34px; height: 34px; }
.btn--sm .btn__ico svg { width: 15px; height: 15px; }
.btn--ghost.btn--sm, .btn--ghost-dark.btn--sm { padding: 0 20px; }

/* ---------- link com seta ---------- */
.link-arrow {
  position: relative; gap: 10px; border-bottom: 0; padding-bottom: 4px;
  background-image: linear-gradient(90deg, var(--gold), var(--gold-light)), linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size .55s var(--b-ease), color .35s var(--b-ease), gap .45s var(--b-ease);
}
.link-arrow svg { stroke-width: 1.8; transition: transform .45s var(--b-ease); }
.link-arrow:hover, .link-arrow:focus-visible { gap: 10px; background-size: 100% 1.5px, 100% 1px; }
.link-arrow:hover svg, .link-arrow:focus-visible svg { transform: translateX(5px); }
.light .link-arrow:hover, .link-arrow:hover { color: var(--gold-deep); }
.dark .link-arrow:hover, .notch .link-arrow:hover, .product .link-arrow:hover { color: var(--gold-pale); }
.link-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 3px; }
.link-arrow__txt { position: relative; }

/* ---------- botão do cabeçalho ---------- */
.header .hbtn {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 8px; padding: 0 16px 0 20px; gap: 12px;
  background: linear-gradient(180deg, #13303D 0%, #0F1B21 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(15,27,33,.9), 0 10px 22px -14px rgba(15,27,33,.8);
  transition: box-shadow .45s var(--b-ease), transform .15s var(--b-ease), color .3s;
}
.header .hbtn::before { /* filete dourado que se desenha na base */
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 7px; height: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  transform: scaleX(0); transition: transform .55s var(--b-ease);
}
.header .hbtn::after { /* brilho que passa */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, rgba(233,212,122,.22) 50%, transparent 60%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0;
}
.header .hbtn:hover { background: linear-gradient(180deg, #13303D 0%, #0F1B21 100%); color: var(--gold-pale); transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(208,176,42,.55), 0 14px 26px -14px rgba(15,27,33,.9); }
.header .hbtn:hover::before, .header .hbtn:focus-visible::before { transform: scaleX(1); }
.header .hbtn:hover::after { animation: btn-glint-once .9s var(--b-ease-io) 1 both; }
.header .hbtn svg { stroke-width: 1.8; color: var(--gold-light); transition: transform .45s var(--b-ease); }
.header .hbtn:hover svg { transform: translateX(4px); }
.header .hbtn:active { transform: scale(.98); transition-duration: .12s; }
.header .hbtn:focus-visible { outline: none; box-shadow: 0 0 0 2px #F4F2ED, 0 0 0 4px var(--gold-deep); }

/* ---------- botão flutuante (WhatsApp) ---------- */
.fab {
  background: linear-gradient(180deg, #0F3E56 0%, #0A2F42 50%, #071F2C 100%);
  border: 1px solid rgba(208,176,42,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 20px 44px -16px rgba(0,0,0,.7), 0 0 0 6px rgba(7,31,44,.25);
  transition: transform .5s var(--b-ease), opacity .45s var(--b-ease), box-shadow .45s var(--b-ease), border-color .35s;
}
.fab i {
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 4px rgba(90,70,5,.3), 0 0 0 1px rgba(140,115,16,.5);
  transition: transform .5s var(--b-ease);
}
.fab i::after { /* anel que respira, chamando atenção sem gritar */
  content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgba(233,212,122,.7);
  animation: btn-ping 3.2s var(--b-ease) 1.5s infinite;
}
@keyframes btn-ping { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.55); opacity: 0; } }
.fab span { transition: color .3s; }
.fab:hover { transform: none; border-color: rgba(233,212,122,.9); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 26px 50px -16px rgba(0,0,0,.75), 0 0 0 6px rgba(208,176,42,.12); }
.fab:hover i::after { animation: none; opacity: 0; }   /* anel para no hover: nada pulsando sob o cursor */
.fab:hover span { color: var(--gold-pale); }
.fab:active { transform: scale(.97); transition-duration: .1s; }
.fab:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--gold-light), 0 20px 44px -16px rgba(0,0,0,.7); }
.fab.is-off { transform: translateY(20px) scale(.96); }

/* ---------- barra fixa mobile ---------- */
@media (max-width: 720px) {
  .mbar {
    background: linear-gradient(180deg, rgba(7,31,44,.97), rgba(3,17,26,.99));
    border-top: 1px solid rgba(208,176,42,.3);
    box-shadow: 0 -14px 30px -18px rgba(0,0,0,.8);
  }
  .mbar a { position: relative; overflow: hidden; isolation: isolate; border-radius: 12px; letter-spacing: .005em; transition: transform .2s var(--b-ease), box-shadow .3s, background-color .3s, border-color .3s; -webkit-tap-highlight-color: transparent; }
  .mbar a:active { transform: scale(.97); }
  .mbar a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink-950), 0 0 0 4px var(--gold-light); }
  .mbar__wa {
    color: #1A1503;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(90,70,5,.35), 0 0 0 1px rgba(140,115,16,.55), 0 8px 20px -10px rgba(208,176,42,.6);
  }
  .mbar__wa::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%) no-repeat;
    background-size: 260% 100%; background-position: 130% 0; mix-blend-mode: soft-light;
    animation: btn-glint 6.5s var(--b-ease-io) 2s infinite;
  }
  .mbar__test { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
  .mbar__test svg { color: var(--gold-light); }
  .mbar__test:active { border-color: rgba(233,212,122,.7); background: rgba(208,176,42,.1); }
}

/* ---------- toque (sem hover real): sem elevação presa ---------- */
@media (hover: none) {
  .btn--gold:hover::before { animation: btn-glint 7s var(--b-ease-io) 2.4s infinite; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn .btn__ico, .btn .btn__ico svg, .btn::before, .btn::after,
  .link-arrow, .link-arrow svg, .header .hbtn, .header .hbtn svg, .header .hbtn::before,
  .fab, .fab i, .mbar a { transition-duration: .01ms !important; }
  .btn--gold::before, .btn--ink::before, .header .hbtn::after, .mbar__wa::before, .fab i::after { animation: none !important; }
  .btn, .btn:hover, .btn:active, .header .hbtn:active, .fab:active, .mbar a:active { transform: none; }
  .btn__ico--swap svg + svg { display: none; }
  .btn:hover .btn__ico--swap svg:first-child, .btn:focus-visible .btn__ico--swap svg:first-child { transform: none; }
  .fab:hover, .header .hbtn:hover, .header .hbtn:hover svg, .link-arrow:hover svg { transform: none; }
}

/* secundário sem ícone: texto sempre centralizado, mesmo em linhas "space-between" (hero mobile) */
.btn-row .btn.btn--ghost, .btn-row .btn.btn--ghost-dark { justify-content: center; }