/* Behaviour the design-system export could not carry over.
   The mockup was a React app: the floating labels, the selected-radio dot and
   the checkbox tick were component state, so the exported markup has the right
   elements and none of the behaviour. Everything here re-implements that in
   pure CSS, matching the inline styles the export already ships.
   Rules use !important where they have to beat those inline styles. */

[hidden] { display: none !important; }

/* ── Floating label ─────────────────────────────────────────────────────────
   Scoped to input[placeholder] on purpose: bare :not(:placeholder-shown) also
   matches selects, checkboxes and radios, which never show a placeholder. */
.cep-float label {
  transition: top var(--dur-fast) var(--ease-soft),
              font-size var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-soft);
}
.cep-float:has(input[placeholder]:focus) label,
.cep-float:has(input[placeholder]:not(:placeholder-shown)) label {
  top: 9px !important;
  transform: none !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ink-50) !important;
}
.cep-float:has(input[placeholder]:focus) input,
.cep-float:has(input[placeholder]:not(:placeholder-shown)) input {
  padding-top: 25px !important;
  padding-bottom: 9px !important;
}
.cep-float input:focus { border-color: var(--black) !important; }

/* ── Question options (were <button> + a React-painted dot) ─────────────── */
.cep-opt {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  margin-bottom: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--ink-12);
  background: var(--cream);
  color: var(--black);
  font-family: var(--font-sans);
  font-size: 1.08rem;
  line-height: 1.3;
  cursor: pointer;
  transition: all 200ms var(--ease-soft);
}
.cep-opt:hover { border-color: var(--black); background: var(--blush); }
/* Visually hidden, not display:none — the radio must stay focusable. */
.cep-opt input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.cep-opt-dot {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--ink-12);
  transition: all 160ms var(--ease-soft);
}
.cep-opt input[type="radio"]:checked ~ .cep-opt-dot {
  border-color: transparent;
  background: var(--black);
  box-shadow: 0 0 0 4px var(--blush);
}
.cep-opt:has(input[type="radio"]:checked) { border-color: var(--black); background: var(--blush); }
.cep-opt:focus-within { outline: 2px solid var(--black); outline-offset: 2px; }

/* ── Consent checkbox (shipped inert: no CSS was wired to :checked) ─────── */
.cep-check input[type="checkbox"]:checked + span {
  background: var(--black) !important;
  border-color: var(--black) !important;
}
.cep-check input[type="checkbox"]:checked + span::before {
  content: "✓";
  color: var(--cream);
  font-size: 0.78rem;
  line-height: 1;
}
.cep-check input[type="checkbox"]:focus-visible + span { outline: 2px solid var(--black); outline-offset: 2px; }

/* ── Validation feedback ───────────────────────────────────────────────── */
.f-err {
  display: none;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--gold-deep);
}
.f-err.is-shown { display: block; }
.invalid input,
.invalid select,
.invalid textarea { border-color: var(--gold-deep) !important; }
.cep-group.invalid .cep-opt { border-color: var(--gold-deep); }
/* Soft "confirma o país" hint — a warning, never a block. */
.f-warn {
  display: none;
  margin-top: 6px;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--gold-deep);
}
.f-warn.is-shown { display: block; }

/* ── Nav ────────────────────────────────────────────────────────────────
   The menu items were <span>s in the export; as real anchors they'd pick up
   the global link colour, so keep them looking exactly as designed. */
.cep-navlinks a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-soft);
}
.cep-navlinks a:hover { color: var(--black); }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* Breathing room so a jumped-to section doesn't start flush against the top. */
#programa, #o-que-recebes, #alunas { scroll-margin-top: 24px; }

/* ── Phone row ──────────────────────────────────────────────────────────
   Flex items default to min-width:auto, so the country select and the number
   input refuse to shrink below their content and get clipped by the row's
   overflow:hidden on a 375px screen. */
.cep-phone,
.cep-phone > *,
.cep-phone input[type="tel"] { min-width: 0; }
@media (max-width: 430px) {
  .cep-phone select {
    padding-left: 10px !important;
    padding-right: 22px !important;
    font-size: 0.82rem !important;
  }
  .cep-phone input[type="tel"] { padding-left: 10px !important; }
}

/* ── Country-code select ────────────────────────────────────────────────
   The open popup is drawn by the OS, not by this page's CSS. color-scheme
   keeps it legible; the option rule is the fallback where it's ignored. */
#f-pais, #h-pais { color-scheme: light; }
#f-pais option, #h-pais option { background-color: #fcf4f2; color: #000; }

/* ── Motivo (conditional follow-up) ─────────────────────────────────────── */
#f-motivo-box[hidden] { display: none !important; }
#f-motivo:focus { border-color: var(--black) !important; }

/* ── Sticky CTA bar ─────────────────────────────────────────────────────── */
#cepSticky { display: block; }
#cepSticky[hidden] { display: none !important; }

/* ── Testimonial lightbox (mobile only, as in the mockup) ───────────────── */
#cepZoom[hidden] { display: none !important; }

/* Modal body scrolls; the page behind it is locked by lp.js. */
#cepModal .cep-modal-body { -webkit-overflow-scrolling: touch; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}