/* ==========================================================================
   Net In Box — Página "Quero ser franqueado" (franquia.html)

   A página é só a moldura: o processo de compra em si vem de dentro do
   painel (app.netinbox.com.br), embutido num iframe. Tudo aqui existe pra
   que esse iframe não pareça um iframe — sem barra de rolagem própria, sem
   borda, crescendo conforme a etapa.
   ========================================================================== */

/* Faixa de abertura -------------------------------------------------------- */
.fr-topo {
  position: relative;
  padding: 150px 0 88px;
  color: var(--nb-white);
  overflow: hidden;
  background:
    radial-gradient(760px 420px at 82% 6%, rgba(255, 122, 26, .30), transparent 60%),
    radial-gradient(600px 400px at 8% 96%, rgba(255, 122, 26, .14), transparent 55%),
    linear-gradient(135deg, #2e3138 0%, #23252b 45%, #1a1c20 100%);
}
.fr-topo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.6px);
  background-size: 26px 26px;
  pointer-events: none;
}
.fr-topo > .container { position: relative; z-index: 1; }

.fr-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 122, 26, .16);
  border: 1px solid rgba(255, 122, 26, .38);
  color: #ffb37a;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.fr-topo h1 {
  margin: 18px 0 14px;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 800;
  line-height: 1.12;
}
.fr-topo h1 strong { color: var(--nb-orange); font-weight: 800; }
.fr-topo p {
  max-width: 640px;
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: 1.04rem;
  line-height: 1.7;
}

/* Selos de confiança da faixa */
.fr-selos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 26px 0 0;
  padding: 0;
}
.fr-selos li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .9);
}
.fr-selos svg { color: var(--nb-orange); flex: none; }

/* O quadro da compra ------------------------------------------------------- */
.fr-quadro-secao {
  background: var(--nb-light);
  padding: 0 0 90px;
}
.fr-quadro {
  position: relative;
  max-width: 940px;
  margin: -48px auto 0;
  background: var(--nb-white);
  border-radius: 18px;
  box-shadow: var(--nb-shadow-lg);
  overflow: hidden;
}
.fr-quadro iframe {
  display: block;
  width: 100%;
  /* Altura inicial só até a primeira medida chegar do outro lado. */
  height: 760px;
  border: 0;
  transition: height .35s var(--nb-ease);
}

/* Enquanto o iframe não pinta, o quadro não pode parecer quebrado. */
.fr-carregando {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--nb-white);
  color: var(--nb-gray);
  font-weight: 600;
  font-size: .95rem;
}
.fr-quadro.pronto .fr-carregando { opacity: 0; visibility: hidden; transition: opacity .4s var(--nb-ease), visibility .4s; }

.fr-girando {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(138, 143, 152, .3);
  border-top-color: var(--nb-orange);
  border-radius: 50%;
  animation: frGirar .8s linear infinite;
}
@keyframes frGirar { to { transform: rotate(360deg); } }

/* Rede de segurança: se as mensagens de altura não chegarem (script antigo em
   cache, bloqueador), o quadro vira uma janela de altura fixa e o próprio
   iframe rola por dentro. Feio, mas ninguém fica sem conseguir comprar. */
.fr-quadro.sem-medida iframe {
  height: 82vh;
  min-height: 620px;
  transition: none;
}

/* Rodapé de apoio abaixo do quadro */
.fr-apoio {
  max-width: 940px;
  margin: 26px auto 0;
  text-align: center;
  color: var(--nb-gray);
  font-size: .92rem;
  line-height: 1.7;
}
.fr-apoio a { font-weight: 700; }

@media (max-width: 767.98px) {
  .fr-topo { padding: 120px 0 72px; }
  .fr-quadro { margin-top: -32px; border-radius: 14px; }
  .fr-quadro-secao { padding-bottom: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .fr-quadro iframe { transition: none; }
  .fr-girando { animation: none; }
}