/* ============================================================
   "Seja um franqueado" — herda o tema da loja.
   ============================================================ */

.pagina-franquia { min-height: 100vh; }

.fr-main {
  position: relative; z-index: 1;
  max-width: var(--max); margin: 0 auto;
  padding: calc(var(--header-h) + 56px) 24px 90px;
}

.btn-sm-topo { padding: 10px 20px; font-size: .9rem; }

/* ─────────────── HERO ─────────────── */

.fr-hero { text-align: center; max-width: 800px; margin: 0 auto 84px; }
.fr-titulo {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.2rem, 7vw, 4.2rem); line-height: 1.06;
  letter-spacing: -.03em; margin-bottom: 22px;
}
.fr-sub {
  color: var(--texto-dim); font-size: clamp(1rem, 2.1vw, 1.18rem);
  max-width: 620px; margin: 0 auto 34px; line-height: 1.65;
}
.fr-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.fr-mini { font-size: .88rem; color: var(--ouro-lt); }

/* ─────────────── SEÇÕES ─────────────── */

.fr-secao { margin-bottom: 90px; }
.fr-h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.7rem, 4.2vw, 2.7rem); line-height: 1.15; margin-bottom: 12px;
}
.fr-sub-secao { color: var(--texto-dim); font-size: 1.02rem; max-width: 620px; margin-bottom: 40px; }

/* ─────────────── CARDS DO PACOTE ─────────────── */

.fr-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.fr-card {
  background: var(--card); border: 1px solid var(--card-bdr);
  border-radius: var(--r-xl); padding: 30px 28px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.fr-card:hover {
  transform: translateY(-5px); border-color: var(--card-bdr-hi);
  box-shadow: 0 20px 50px rgba(0,0,0,.42);
}
/* Receita e treinamento são o que a pessoa está comprando: ocupam duas
   colunas e ganham brilho próprio. */
.fr-card.destaque {
  grid-column: span 1;
  background: radial-gradient(circle at 85% 0%, rgba(255,185,15,.14), transparent 60%), var(--card);
  border-color: rgba(255,185,15,.34);
}
.fr-icone { font-size: 2.4rem; line-height: 1; margin-bottom: 14px; }
.fr-card h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.32rem;
  line-height: 1.2; margin-bottom: 10px;
}
.fr-card p { color: var(--texto-dim); font-size: .97rem; }
.fr-card strong { color: var(--ouro-lt); }

.fr-lista { list-style: none; display: grid; gap: 9px; margin-top: 16px; }
.fr-lista li {
  position: relative; padding-left: 25px; font-size: .93rem; color: var(--texto-dim);
}
.fr-lista li::before {
  content: '✦'; position: absolute; left: 0; top: -1px; color: var(--ouro);
}

/* ─────────────── NÚMEROS ─────────────── */

.fr-numeros {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.fr-num {
  background: var(--card); border: 1px solid var(--card-bdr);
  border-radius: var(--r-lg); padding: 24px;
  display: grid; gap: 5px; align-content: start;
}
.fr-num .rot {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texto-mute); font-weight: 700;
}
.fr-num strong {
  font-family: var(--display); font-weight: 700; font-size: 1.6rem;
  color: var(--ouro-lt); line-height: 1.15;
}
.fr-num small { font-size: .84rem; color: var(--texto-dim); }

.fr-aviso {
  margin-top: 22px; padding: 14px 18px; border-radius: var(--r);
  background: rgba(255,185,15,.07); border: 1px solid rgba(255,185,15,.2);
  color: var(--texto-dim); font-size: .89rem; line-height: 1.6;
}

/* ─────────────── ETAPAS ─────────────── */

.fr-etapas { list-style: none; display: grid; gap: 4px; counter-reset: etapa; }
.fr-etapas li {
  display: grid; grid-template-columns: 60px 1fr; gap: 20px; align-items: start;
  padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.fr-etapas li:last-child { border-bottom: none; }
.et-num {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--laranja), var(--ouro));
  color: #2b1400; font-family: var(--display); font-weight: 700; font-size: 1.2rem;
  box-shadow: 0 6px 20px var(--glow);
}
.fr-etapas h3 { font-family: var(--display); font-weight: 600; font-size: 1.2rem; margin-bottom: 6px; }
.fr-etapas p { color: var(--texto-dim); font-size: .97rem; max-width: 640px; }

/* ─────────────── FORMULÁRIO ─────────────── */

.fr-form-caixa {
  max-width: 700px; margin: 0 auto;
  padding: clamp(30px, 5vw, 48px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,115,0,.16), transparent 62%),
    var(--card);
  border: 1px solid var(--card-bdr-hi);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 26px 66px rgba(0,0,0,.46);
}
.fr-form { display: grid; gap: 16px; }
.fr-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.fr-form .campo > span {
  display: block; font-size: .78rem; font-weight: 700; color: var(--texto-mute);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em;
}
.fr-form input, .fr-form textarea, .fr-select {
  width: 100%; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r); padding: 13px 15px; color: var(--texto);
  outline: none; font-family: inherit; font-size: .96rem; transition: border-color .2s;
}
.fr-form input:focus, .fr-form textarea:focus, .fr-select:focus { border-color: var(--laranja); }
.fr-form input::placeholder, .fr-form textarea::placeholder { color: var(--texto-mute); }
.fr-select {
  appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23b79683' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.fr-select option { background: var(--card-solid); }

.fr-privacidade { text-align: center; font-size: .83rem; color: var(--texto-mute); }

.fr-obrigado { text-align: center; display: grid; gap: 14px; justify-items: center; padding: 20px 0; }
.fr-obrigado h3 { font-family: var(--display); font-weight: 600; font-size: 1.5rem; }
.fr-obrigado p { color: var(--texto-dim); max-width: 420px; }
.fr-orbe { font-size: 3.2rem; animation: floatY 3.6s ease-in-out infinite; }

/* ─────────────── RESPONSIVO ─────────────── */

@media (min-width: 900px) {
  /* Nas telas largas, receita e treinamento ficam lado a lado e maiores
     que os demais cards. */
  .fr-grid { grid-template-columns: repeat(6, 1fr); }
  .fr-card { grid-column: span 2; }
  .fr-card.destaque { grid-column: span 3; }
}

@media (max-width: 640px) {
  .fr-main { padding: calc(var(--header-h) + 30px) 18px 70px; }
  .pagina-franquia .nav { display: none; }
  .fr-duas { grid-template-columns: 1fr; }
  .fr-etapas li { grid-template-columns: 44px 1fr; gap: 14px; }
  .et-num { width: 38px; height: 38px; font-size: 1rem; }
}