/* ==========================================================================
   COMPONENTS — lockup, botão, campo, formulário, cartão
   ========================================================================== */

/* --- Lockup: logo | traço | data (vive sempre sobre fundo escuro) ---------- */
.lockup {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 0.3rem + 1.4vw, 1.1rem);
}
.lockup__logo {
  width: clamp(5.75rem, 3.4rem + 10.5vw, 10.5rem);
  height: auto;
  flex: none;
}
.lockup__div {
  flex: none;
  align-self: stretch;
  width: 1px;
  margin-block: 0.15rem;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c-logo-light) 55%, transparent), transparent);
}
.lockup__info { display: grid; gap: 0.4rem; width: max-content; }
.lockup__data {
  width: fit-content;
  font-size: clamp(0.75rem, 0.45rem + 1.2vw, 1.3rem);
  font-weight: var(--w-bold);
  letter-spacing: -0.005em;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--c-logo-light);
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lockup__canal {
  /* mesma largura da data: `width:0 + min-width:100%` impede que ela alargue a
     coluna; o justify espalha as palavras até as duas linhas terminarem juntas */
  width: 0;
  min-width: 100%;
  font-size: clamp(0.5rem, 0.34rem + 0.7vw, 0.8rem);
  font-weight: var(--w-regular);
  letter-spacing: 0.16em;
  line-height: 1.2;
  white-space: nowrap;
  text-align: justify;
  text-align-last: justify;
  color: var(--c-logo-mute);
}
.lockup__canal b { font-weight: var(--w-regular); color: var(--c-logo-light); }

/* variante para fundo claro (hero): mesma lógica, tons escuros */
.lockup__canal b { font-weight: var(--w-regular); }
@media (min-width: 40rem) { .lockup__canal { letter-spacing: 0.18em; } }
@media (min-width: 62rem) { .lockup__canal { letter-spacing: 0.2em; } }
@media (min-width: 80rem) { .lockup__canal { letter-spacing: 0.27em; } }

.lockup--claro .lockup__div { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c-bronze-deep) 55%, transparent), transparent); }
.lockup--claro .lockup__data {
  color: var(--c-bronze-deep);
  background: linear-gradient(90deg, #4a3322 0%, #9a7455 55%, #5e4331 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lockup--claro .lockup__canal { color: var(--c-bronze-deep); }
.lockup--claro .lockup__canal b { color: var(--c-espresso); }

@media (max-width: 21.25rem) {
  .lockup { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .lockup__div { width: 3rem; height: 1px; align-self: auto; background: color-mix(in srgb, var(--c-logo-light) 45%, transparent); }
}

/* ==========================================================================
   BOTÃO DE CONVERSÃO — mesma mecânica da página NMS
   Camadas independentes, todas em opacity/transform/background-position:
     ::before  brilho que varre no hover
     ::after   anel pulsante contínuo
     próprio   gradiente verde que desliza
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0.95rem 2.2rem;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: clamp(0.875rem, 0.82rem + 0.28vw, 1.0625rem);
  font-weight: var(--w-bold);
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  color: var(--action-ink);
  background-color: var(--action);
  background-image: linear-gradient(
    100deg,
    var(--action-deep) 0%,
    var(--action) 26%,
    var(--action-hover) 50%,
    var(--action) 74%,
    var(--action-deep) 100%
  );
  background-size: 260% 100%;
  background-position: 0% 50%;
  box-shadow: var(--sh-action);
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  animation: btn-hue 5.5s linear infinite, btn-breathe 3.2s var(--ease-out) infinite;
  transition:
    transform 160ms var(--ease-spring),
    box-shadow 0.4s var(--ease-out),
    filter 160ms var(--ease-out);
}
.btn--block { display: flex; width: 100%; }

@keyframes btn-hue {
  0%   { background-position: 0% 50%; }
  100% { background-position: 260% 50%; }
}
@keyframes btn-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.022); }
}

/* anel pulsante: transform + opacity, não spread de box-shadow */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 2px solid var(--action);
  opacity: 0;
  animation: btn-ring 2.6s var(--ease-out) infinite;
}
@keyframes btn-ring {
  0%   { transform: scale(1);    opacity: 0.55; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}

/* brilho no hover: quem se move é o fundo, nunca escapa da caixa */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: linear-gradient(110deg, transparent 40%, rgb(255 255 255 / 0.62) 50%, transparent 60%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 150% 0;
  opacity: 0;
  transition: opacity 160ms linear;
}
@media (hover: hover) {
  .btn:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--c-green-deep) 52%, transparent);
    filter: saturate(1.12);
    animation-play-state: paused, paused;
  }
  .btn:hover::before { opacity: 1; animation: btn-shine 0.85s var(--ease-out); }
}
@keyframes btn-shine {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}
.btn:active {
  transform: translateY(0) scale(0.975);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--c-green-deep) 46%, transparent);
  transition-duration: 80ms;
}
.btn:focus-visible { outline: 3px solid var(--c-bronze); outline-offset: 4px; }
.btn[disabled], .btn[aria-busy="true"] {
  cursor: progress;
  filter: saturate(0.55) brightness(0.97);
  animation-play-state: paused, paused;
  transform: none;
}
.btn[disabled]::after { animation: none; opacity: 0; }

.btn__spin {
  display: inline-block;
  width: 1em; height: 1em;
  margin-right: 0.6em;
  vertical-align: -0.12em;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: giro 0.8s linear infinite;
}
@keyframes giro { to { transform: rotate(360deg); } }

/* --- Formulário (sempre sobre o fundo escuro do hero) ----------------------- */
.form { display: grid; gap: 0.85rem; }

.field { position: relative; display: block; }
.field__input {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.9rem 3rem 0.9rem 1.5rem;
  font-size: 1rem;              /* 16px: evita o zoom automático do iOS */
  color: var(--c-espresso);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--c-bronze) 35%, transparent);
  border-radius: var(--r-pill);
  outline: none;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.field__input::placeholder { color: color-mix(in srgb, var(--c-espresso) 55%, transparent); }
.field__input:focus {
  border-color: var(--c-bronze);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-bronze) 18%, transparent);
}
.field__mark {
  position: absolute;
  right: 1.1rem;
  top: 1.75rem;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: -0.55rem;
  color: #14892c;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
}
.field.is-valid .field__mark { opacity: 1; transform: none; }
.field.is-invalid .field__input { border-color: #a8412f; }
.field__error {
  display: block;
  padding: 0.35rem 1.5rem 0;
  font-size: 0.8125rem;
  font-weight: var(--w-medium);
  color: #a8412f;
}
.field__error:empty { display: none; }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { font-size: 0.875rem; text-align: center; color: var(--ink-soft); }
.form__status:empty { display: none; }
.form__status[data-state="error"] { color: #a8412f; font-weight: var(--w-medium); }
.form__status[data-state="ok"] { color: #14892c; font-weight: var(--w-medium); }

/* --- Cartão claro (um único nível, sem moldura dupla) ----------------------- */
.card {
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  border-radius: var(--r-l);
  background: #fff;
  box-shadow: var(--shadow-card);
}

/* realce quando um CTA de outra seção aponta para o formulário */
.is-called .field__input { animation: chamado 1.4s var(--ease); }
@keyframes chamado {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-bronze) 45%, transparent); }
  60%  { box-shadow: 0 0 0 18px color-mix(in srgb, var(--c-bronze) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after { animation: none; }
}

/* celular: logo e data maiores (o conjunto cabe em 340 px; abaixo disso empilha) */
@media (max-width: 39.99rem) {
  .lockup__logo { width: clamp(6.5rem, 33vw, 12rem); }
  .lockup__data { font-size: clamp(0.8125rem, 4vw, 1.25rem); }
  .lockup__canal { font-size: clamp(0.5625rem, 2.5vw, 0.8rem); }
}