/* Botão: retângulo arredondado com a lateral direita cortada em diagonal (20% de h)
   + módulo da seta com a mesma diagonal. Tudo em SVG com altura = h, então as proporções
   se mantêm em qualquer tamanho. Ver partials/botao.html. */
.btn {
  --h: 56px;
  --d: calc(var(--h) * .2);
  --gap: 6px;
  --fundo: var(--ouro);
  --borda: transparent;
  --cor: var(--breu);
  position: relative; display: inline-flex; align-items: stretch; height: var(--h);
  text-decoration: none; color: var(--cor); font-family: var(--fonte-texto); font-weight: 600;
  font-size: calc(var(--h) * .27); line-height: 1; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn--sm { --h: 44px; }
.btn--md { --h: 56px; }
.btn--lg { --h: 64px; }

.btn--ouro { --fundo: var(--ouro); --borda: var(--ouro); --cor: var(--breu); }
.btn--contorno { --fundo: transparent; --borda: var(--borda-botao); --cor: var(--osso); }
/* Botão da /entrar/: preto, com uma luz verde (WhatsApp) correndo pelo contorno. */
.btn--whatsapp {
  --fundo: var(--noite); --borda: var(--linha); --cor: var(--osso-forte);
  position: relative; letter-spacing: .14em; text-transform: uppercase;
}

.btn__cap, .btn__modulo { flex: none; height: var(--h); overflow: visible; }
.btn__cap--esq { width: calc(var(--h) * .3); }
.btn__cap--dir { width: calc(var(--h) * .5); }
.btn__modulo { width: var(--h); margin-left: calc(var(--gap) - var(--d)); }
.btn .f { fill: var(--fundo); }
.btn .s { fill: none; stroke: var(--borda); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.btn .seta { fill: none; stroke: var(--cor); stroke-width: 2.2px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.btn__meio {
  position: relative; display: flex; align-items: center; justify-content: center; gap: .7em;
  flex: 1 1 auto; margin-inline: -1.5px; padding-inline: calc(var(--h) * .22) calc(var(--h) * .02);
  background: var(--fundo);
}
.btn__meio::before, .btn__meio::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--borda);
}
.btn__meio::before { top: -.75px; }
.btn__meio::after { bottom: -.75px; }
.btn__texto { position: relative; }
.btn__seta-in { display: none; width: 1.3em; height: 1.3em; flex: none; }
.btn__seta-in path { fill: none; stroke: var(--cor); stroke-width: 2.2px; stroke-linecap: round; stroke-linejoin: round; }

/* Luz que percorre a borda do módulo da seta (só no botão do WhatsApp): rastro verde com brilho
   e núcleo claro na frente, como um reflexo correndo pelo contorno. */
.btn .luz { display: none; }
.btn--whatsapp .luz {
  display: block; fill: none; stroke-linecap: round;
  animation: btn-luz 2.8s linear infinite;
}
.btn--whatsapp .luz--halo {
  stroke: var(--whatsapp); stroke-width: 6; stroke-dasharray: 26 74;
  filter: drop-shadow(0 0 4px var(--whatsapp)) drop-shadow(0 0 12px var(--whatsapp));
}
/* O núcleo claro fica na frente do rastro: mesmo movimento, adiantado 16% do percurso. */
.btn--whatsapp .luz--nucleo {
  stroke: #fff; stroke-width: 2.6; stroke-dasharray: 10 90; opacity: .95;
  filter: drop-shadow(0 0 3px #fff);
  animation-delay: -.448s;
}
/* Contorno do corpo do botão: SVG em pixels, desenhado pelo entrar.js com a largura real.
   O percurso é mais longo, então a luz é mais curta e a volta mais lenta. */
.btn__luz-corpo { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.btn__luz-corpo .luz { animation-duration: 4.2s; }
.btn__luz-corpo .luz--halo { stroke-width: 3.4; stroke-dasharray: 13 87; }
.btn__luz-corpo .luz--nucleo { stroke-width: 1.5; stroke-dasharray: 5 95; animation-delay: -.336s; }
@keyframes btn-luz {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -100; }
}
.btn--whatsapp .seta { transition: transform .25s ease; }
.btn--whatsapp:hover .seta, .btn--whatsapp:focus-visible .seta { transform: translateX(4px); }
.btn--whatsapp:hover, .btn--whatsapp:focus-visible { --borda: var(--whatsapp); }
.btn--whatsapp:focus-visible { outline-color: var(--whatsapp); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) {
  .btn--whatsapp .luz { animation: none; display: none; }
}

.btn:hover .f { filter: brightness(1.08); }
.btn:hover .btn__meio { filter: brightness(1.08); }
.btn--contorno:hover { --borda: var(--osso); }
.btn:active { transform: translateY(1px); }

/* Celular: botão principal ocupa a largura útil e a seta fica embutida (sem módulo solto). */
@media (max-width: 720px) {
  .btn--bloco { display: flex; width: 100%; }
  .btn--bloco .btn__modulo { display: none; }
  .btn--bloco .btn__seta-in { display: block; }
  .btn--bloco .btn__cap--dir { margin-left: 0; }
}

/* Filete e cartão genéricos */
.cartao { background: var(--chumbo); border: 1px solid var(--linha); border-radius: var(--raio); }