/* ==========================================================================
 * CTA "Simule Agora" — coerente com a paleta
 * Caminho: static/css/core/header/buttonsanimation.css
 * ========================================================================== */

#buttonSimulation {
  position: relative;
  /* Responsivo com limites seguros (reduzimos o mínimo para caber <375px) */
  --btn-w: clamp(120px, 28vw, 240px);
  --btn-h: clamp(40px, 6.2vw, 58px);
  --btn-radius: clamp(10px, 4vw, 16px);
  --btn-fs: clamp(12px, 2.2vw, 20px);
  --btn-ls: clamp(.4px, .3vw, 2px);
  width: var(--btn-w);
  min-height: var(--btn-h);
  background: linear-gradient(90deg, var(--grad-primary-start), var(--grad-primary-end));
  border: none;
  border-radius: var(--btn-radius);
  color: #fff;
  font-size: var(--btn-fs);
  font-weight: 700;
  letter-spacing: var(--btn-ls);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(.4rem, 1.4vw, .7rem) clamp(.9rem, 2.6vw, 1.5rem);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  /* Permite quebra interna do texto quando faltar espaço */
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Garante quebra interna mesmo quando o container usa white-space: nowrap */
.navbar #buttonSimulation{
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.15;
}
#buttonSimulation:hover {
  transform: scale(1.04);
  filter: saturate(1.03);
  /* Glow alinhado às cores do site */
  box-shadow: 0 8px 18px rgba(0,0,0,.30), 0 0 14px color-mix(in srgb, var(--grad-primary-end), transparent 60%);
}
#buttonSimulation:active{ transform: scale(.98); }
#buttonSimulation:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(65,105,225,.35), 0 8px 18px rgba(0,0,0,.30); }
#buttonSimulation span {
  position: absolute; display: block; border-radius: 2px;
  /* Traços animados em azul claro (coerente com a primária) */
  background: var(--color-primary-300);
}
#buttonSimulation span:nth-child(1) { height: 3px; width: 100%; top: 0; left: -100%; animation: btnSlide1 2.2s linear infinite; }
#buttonSimulation span:nth-child(2) { height: 100%; width: 3px; top: -100%; right: 0;  animation: btnSlide2 2.2s linear infinite; animation-delay: .9s; }
#buttonSimulation span:nth-child(3) { height: 3px; width: 100%; bottom: 0; right: -100%; animation: btnSlide3 2.2s linear infinite; animation-delay: 1.8s; }
#buttonSimulation span:nth-child(4) { height: 100%; width: 3px; bottom: -100%; left: 0; animation: btnSlide4 2.2s linear infinite; animation-delay: 2.7s; }

@keyframes btnSlide1 { 0% { left: -100%; } 100% { left: 100%; } }
@keyframes btnSlide2 { 0% { top: -100%; } 100% { top: 100%; } }
@keyframes btnSlide3 { 0% { right: -100%; } 100% { right: 100%; } }
@keyframes btnSlide4 { 0% { bottom: -100%; } 100% { bottom: 100%; } }

/* Mobile: botão fluido e traços mais leves */
@media (max-width: 576px){
  /* Evita ocupar toda a linha ao lado da logo no header */
  #buttonSimulation{
    width: auto;
    min-width: 84px;
    max-width: 46vw;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
  /* Horizontais mais finas */
  #buttonSimulation span:nth-child(1),
  #buttonSimulation span:nth-child(3){ height:2px; width:100% }
  /* Verticais visíveis e finas */
  #buttonSimulation span:nth-child(2),
  #buttonSimulation span:nth-child(4){ width:2px; height:100% }
}

/* Ultra-compacto: telas muito estreitas (<375px) */
@media (max-width: 375px){
  #buttonSimulation{
    /* Permite encolher mais sem quebrar o layout */
    --btn-w: clamp(84px, 40vw, 160px);
    --btn-h: clamp(32px, 9vw, 44px);
    --btn-fs: clamp(10px, 3.2vw, 14px);
    --btn-radius: clamp(8px, 3vw, 12px);
    letter-spacing: 0;
    padding: clamp(.28rem, 3vw, .5rem) clamp(.45rem, 5vw, .75rem);
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
  /* Reduz levemente o efeito de hover para não "estourar" o header */
  #buttonSimulation:hover{ transform: scale(1.02); }
}

/* Micro viewports: ≤320px e ≤240px */
@media (max-width: 320px){
  #buttonSimulation{
    --btn-w: clamp(72px, 42vw, 140px);
    --btn-h: clamp(30px, 10vw, 40px);
    --btn-fs: clamp(10px, 3.4vw, 12px);
    padding: .25rem .45rem;
    letter-spacing: 0;
  }
}
@media (max-width: 240px){
  #buttonSimulation{
    --btn-w: clamp(60px, 46vw, 120px);
    --btn-h: clamp(28px, 12vw, 36px);
    --btn-fs: clamp(9px, 3.8vw, 11px);
    padding: .2rem .4rem;
    letter-spacing: 0;
  }
}

/* Redução de movimento */
@media (prefers-reduced-motion: reduce){
  #buttonSimulation, #buttonSimulation:hover{ transform:none; transition:none; filter:none; }
  #buttonSimulation span{ display:none }
}

/* Estado de carregamento (opcional) */
#buttonSimulation[aria-busy="true"]{ cursor: wait; opacity:.9 }
#buttonSimulation[aria-busy="true"]::after{
  content:''; position:absolute; right:12px; top:50%; width:16px; height:16px; margin-top:-8px;
  border-radius:50%; border:2px solid rgba(255,255,255,.55); border-top-color:transparent;
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg) } }