/* ============================================================
   CARD 1 "COMO FUNCIONA" — cena animada (preenchimento do formulário)
   Porte do protótipo (SVG animation request) para CSS custom properties
   + JS vanilla (secao-passos-card1.js), sem dependência de React.
   O estado PADRÃO (sem JS, ou prefers-reduced-motion) já é o formulário
   preenchido e validado — igual ao antigo card1.svg estático. O JS só
   reseta a cena e reencena a digitação na 1ª vez que o card entra na
   viewport.
   ============================================================ */

.nc1-scaler{
  position:relative; width:100%; aspect-ratio:422/391;
  border-radius:26px; overflow:hidden; background:#fff;
  /* sombra removida a pedido do dono (10-09-2026): o card fica plano,
     o hover mantem so o leve levantar */
  transition:transform .2s cubic-bezier(.23,1,.32,1);
}
@media (hover:hover){
  .nc-step:hover .nc1-scaler{ transform:translateY(-4px); }
}

.nc1-card{
  position:absolute; left:0; top:0; width:422px; height:391px;
  transform:scale(var(--nc1-scale, 1)); transform-origin:top left;
  font-family:Poppins, Helvetica, sans-serif;
}

.nc1-decor{ display:contents; }

.nc1-dots{ position:absolute; left:20px; top:16px; display:flex; gap:5px; }
.nc1-dot{
  width:10px; height:10px; border-radius:50%; background:var(--nc1-dot-c);
  opacity:var(--nc1-o,1); transform:scale(var(--nc1-o,1));
  transition:opacity .3s cubic-bezier(.3,1.6,.5,1), transform .3s cubic-bezier(.3,1.6,.5,1);
}

.nc1-badge{
  position:absolute; right:20px; top:14px; height:14px; padding:0 7px;
  border:.9px solid #8e8e93; border-radius:5.5px; display:flex; align-items:center;
  gap:3px; color:#8e8e93; font-size:7.5px; font-weight:500; letter-spacing:.2px;
  opacity:var(--nc1-o,1); transform:translateY(var(--nc1-y,0px));
  transition:opacity .4s ease, transform .4s ease;
}
.nc1-badge-n{ min-width:4px; text-align:center; }

.nc1-title{
  position:absolute; left:66px; top:9px; width:264px; text-align:center;
  color:#002e7f; font-size:15px; font-weight:600; letter-spacing:-.1px;
  opacity:var(--nc1-o,1); transform:translateY(var(--nc1-y,0px));
  transition:opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1);
}

.nc1-field{
  position:absolute; left:20.5px; top:var(--nc1-top); width:381px; height:49px;
  box-sizing:border-box; border:1px solid var(--nc1-b, #005bff);
  border-radius:4.5px; box-shadow:var(--nc1-g, 0 0 0 0 rgba(0,91,255,0));
  opacity:var(--nc1-o,1); transform:translateY(var(--nc1-y,0px));
  transition:border-color .35s ease, box-shadow .35s ease, opacity .45s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.nc1-field-label{ position:absolute; left:15px; top:8px; color:#aeaeb2; font-size:8.5px; font-weight:500; letter-spacing:.4px; }
.nc1-field-value{ position:absolute; left:15px; top:20px; color:#5a5a5a; font-size:15px; font-weight:400; white-space:pre; }
.nc1-caret{ display:none; width:1px; height:15px; margin-left:1px; vertical-align:-2px; background:#005bff; animation:nc1-caret-blink 1s step-end infinite; }
.nc1-field[data-nc1-focused] .nc1-caret{ display:inline-block; }

.nc1-check{
  position:absolute; left:351.5px; top:15.5px; width:18px; height:18px; border-radius:50%;
  background:#005bff; display:grid; place-items:center;
  opacity:var(--nc1-o,1); transform:scale(var(--nc1-s,1));
  transition:opacity .25s ease, transform .45s cubic-bezier(.2,1.7,.4,1);
}

.nc1-btn{
  position:absolute; left:20px; top:318px; width:382px; height:48px; border-radius:15px;
  overflow:hidden; background:radial-gradient(120% 300% at 50% 50%, #005bff 43%, #003799 100%);
  box-shadow:0 4px 12px rgba(0,40,120,.25); display:grid; place-items:center;
  opacity:var(--nc1-o,1); transform:translateY(var(--nc1-y,0px)) scale(var(--nc1-s,1));
  transition:opacity .45s ease, transform .28s cubic-bezier(.2,.8,.2,1);
  text-decoration:none; cursor:pointer;
}
.nc1-btn:hover{ text-decoration:none; }
.nc1-btn-label{ color:#fff; font-size:14px; font-weight:600; letter-spacing:.1px; }
.nc1-btn-ripple{
  position:absolute; left:50%; top:50%; width:20px; height:20px; margin:-10px 0 0 -10px;
  border-radius:50%; background:rgba(255,255,255,.35);
  opacity:var(--nc1-o,0); transform:scale(var(--nc1-s,.2));
  transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}

@keyframes nc1-caret-blink{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }