/* ==========================================================================
   Indique um amigo — hero + form, tiers de Pix, FAQ, avisos legais
   ========================================================================== */

/* ---- Hero + formulário ---- */
.indica-hero { background: #f3f3f5; padding: 40px 0 56px; }
.indica-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.indica-hero__title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 700; color: var(--in-red); margin: 14px 0 18px; line-height: 1.12; }
.indica-hero__p { color: #4a4a52; line-height: 1.6; margin: 0 0 16px; max-width: 480px; }

.indica-form {
  background: #fff; border: 1px solid var(--in-line, #ececf0); border-radius: var(--in-radius-lg, 20px);
  padding: 30px 30px 26px; box-shadow: 0 20px 50px rgba(20,20,30,.07);
}
.indica-form__eyebrow { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--in-ink); margin: 0 0 6px; font-size: 1.05rem; }
.indica-form__eyebrow span { width: 22px; height: 3px; background: var(--in-red); border-radius: 2px; }
.indica-form__intro { color: var(--in-muted); font-size: .85rem; margin: 0 0 18px; }
.indica-form__rules { text-align: center; margin: 14px 0 0; }
.indica-form__rules a { color: var(--in-muted); font-size: .88rem; text-decoration: none; }
.indica-form__rules a:hover { color: var(--in-red); }

/* Radio (é cliente?) e quiz (captcha) no visual do site */
.frelo-form__row--radio .wpcf7-list-item { display: inline-flex; align-items: center; gap: 6px; margin: 0 22px 0 0; }
.frelo-form__row--radio label { font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--in-ink); }
.frelo-form__row--radio > label { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; color: var(--in-muted); }
.frelo-form__row--quiz .wpcf7-quiz-label { display: inline-block; font-weight: 600; color: var(--in-ink); margin-right: 10px; }
.frelo-form__row--quiz input.wpcf7-quiz { width: 120px; border: 1.5px solid var(--in-line, #e0e0e5); border-radius: 12px; padding: 12px 16px; font-size: 1rem; }

/* ---- Tiers de Pix ---- */
.indica-tiers__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 26px; }
.indica-tiers__head h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 600; color: var(--in-ink); margin: 0; }
.indica-tiers__head p { color: var(--in-muted); margin: 0; }
.indica-tiers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.indica-tier {
  background: #fff; border: 1px solid var(--in-line, #ececf0); border-radius: var(--in-radius-lg, 18px);
  padding: 28px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.indica-tier__icons { display: inline-flex; align-items: flex-end; gap: 2px; color: var(--in-green, #65922D); }
/* Ícone customizado da biblioteca: altura fixa, largura livre (1/2/3 pessoas
   têm proporções diferentes) — evita que ícones largos fiquem pequenos. */
.indica-tier__icons--custom { min-height: 40px; }
.indica-tier__icons--custom svg,
.indica-tier__icons--custom img { height: 40px; width: auto; max-width: 100%; }
.indica-tier__text { color: var(--in-ink); margin: 4px 0 6px; font-size: 1rem; }
.indica-tier__text strong { font-weight: 700; }
.indica-tier__value {
  width: 100%; background: #FCE7A6; color: #3d2f00; font-weight: 800; font-size: 1.9rem;
  border-radius: 12px; padding: 12px 0;
}
.indica-tier__sub { color: var(--in-muted); font-size: .9rem; }
.indica-tiers__nota { color: var(--in-muted); font-size: .82rem; margin: 18px 0 0; }

/* ---- Regras (FAQ) ---- */
.indica-regras__band { background: #f4f4f5 center/cover no-repeat; padding: 48px 0; border-radius: var(--in-radius-lg, 20px); margin: 0 auto; width: min(1820px, 96vw); }
.indica-regras__text { max-width: 560px; }
.indica-regras__text h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 600; color: var(--in-ink); margin: 0 0 4px; }
.indica-regras__sub { color: var(--in-muted); margin: 0 0 20px; }

.indica-faq { border-bottom: 1px solid #e2e2e6; }
.indica-faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: none; border: none; cursor: pointer; padding: 16px 0; text-align: left;
  font-size: 1rem; font-weight: 500; color: var(--in-ink); font-family: inherit;
}
.indica-faq__chev { color: var(--in-red); transition: transform .2s ease; flex: 0 0 auto; }
.indica-faq__q[aria-expanded="true"] .indica-faq__chev { transform: rotate(180deg); }
.indica-faq__a { padding: 0 0 16px; }
.indica-faq__a p { margin: 0; color: #4a4a52; line-height: 1.6; max-width: 92%; }

/* ---- Avisos legais ---- */
.indica-legal { padding: 30px 0 40px; }
.indica-legal__title { font-size: .8rem; font-weight: 700; color: var(--in-ink); margin: 0 0 8px; }
.indica-legal__list { margin: 0; padding: 0 0 0 18px; }
.indica-legal__list li { color: var(--in-muted); font-size: .78rem; line-height: 1.55; margin-bottom: 4px; }

@media (max-width: 820px) {
  .indica-hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .indica-tiers__grid { grid-template-columns: 1fr; }
  .indica-regras__band { background-image: none !important; }
}