/* Piloto RH10 — identidade visual do site da RH10 (rh10.com.br, 15/09/2026):
   laranja #f15a22 + azul-marinho #071432, fonte Nunito, botões em pílula, faixa laranja com onda.
   Carregado DEPOIS de landing.css e só nas páginas do piloto: remapeia os tokens e complementa. */
:root {
  --rh-laranja: #f15a22;
  --rh-laranja-deep: #d84a15;
  --rh-laranja-text: #c4430f;   /* laranja escurecido para texto pequeno (contraste AA em fundo claro) */
  --rh-laranja-soft: #fff1eb;
  --rh-navy: #071432;
  --rh-navy-2: #14295e;
  --rh-azul: #1c3783;
  --rh-azul-soft: #eef1f8;
  --rh-azul-claro: #2196f3;
  /* tokens da landing.css remapeados */
  --areia: #f7f8fb;
  --areia-deep: #e9ecf4;
  --papel: #ffffff;
  --card: #ffffff;
  --terracota: var(--rh-laranja);
  --terracota-deep: var(--rh-laranja-deep);
  --marine: var(--rh-azul);
  --petroleo: var(--rh-navy);
  --marinho: var(--rh-navy-2);
  --tinta: #22233a;
  --muted: #6b6a7e;
  --line: #e2e5ee;
  --ok: #1f8a4c;
  --err: #c62828;
  --shadow: 0 10px 30px rgba(7, 20, 50, 0.08);
  --font-display: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
}
body { background: var(--areia); }

/* —— Estrutura: telas sem largura fixa; conteúdo centralizado em .wrap —— */
.wrap { max-width: 28rem; margin: 0 auto; }
.rh-body { padding: 0 1.15rem; position: relative; z-index: 1; margin-top: -0.75rem; }
.page-vaga .screen.landing { max-width: none; padding: 0 0 calc(var(--sticky-h) + var(--safe-b) + 1rem); }
.page-obrigada .screen.end-screen { max-width: none; padding: 0 0 calc(1.5rem + var(--safe-b)); justify-content: flex-start; }
.page-obrigada .rh-body .end-card { margin-top: 0; }
@media (min-width: 480px) {
  .page-vaga .screen.landing { padding-top: 0; padding-bottom: 2rem; }
}

/* —— Cabeçalho com o logo (como o site: fundo branco, logo à esquerda) —— */
.rh-header { background: #fff; border-bottom: 1px solid var(--line); }
.rh-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 1.15rem; }
.rh-logo { display: block; height: 54px; width: auto; }
.rh-logo-pcd { display: block; height: 38px; width: auto; }

/* —— Faixa laranja com onda (herói do site) —— */
.rh-hero {
  position: relative;
  background: linear-gradient(165deg, #ff6b3f 0%, var(--rh-laranja) 55%, #e64f16 100%);
  color: #fff;
  padding: 1.5rem 0 2.9rem;
  overflow: hidden;
}
.rh-hero .wrap { padding: 0 1.15rem; }
.rh-hero .eyebrow {
  display: inline-block; color: #fff; background: rgba(7, 20, 50, 0.32); border-radius: 999px;
  padding: 0.3rem 0.75rem; font-size: 0.7rem; letter-spacing: 0.14em; font-weight: 800; margin: 0 0 0.8rem;
}
.rh-hero h1 {
  font-family: var(--font-display); color: #fff; font-weight: 800;
  font-size: clamp(1.75rem, 6.4vw, 2.3rem); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 0.75rem;
  text-shadow: 0 1px 2px rgba(7, 20, 50, 0.18);
}
.rh-hero .lede {
  display: inline-block; color: #fff; background: rgba(7, 20, 50, 0.32); border-radius: 12px;
  padding: 0.5rem 0.75rem; font-size: 1rem; font-weight: 600; max-width: none; margin: 0;
}
.rh-hero .lede strong { color: #fff; font-weight: 800; }
.rh-hero .lede .dot { margin: 0 0.35rem; opacity: 0.7; }
.rh-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 34px; display: block; }
.rh-wave path { fill: var(--areia); }

/* —— Títulos das seções (azul, com o divisor "••• —" do site em laranja) —— */
.ficha .label, .steps .label, .form-sheet .label {
  font-family: var(--font-display); font-size: 1.15rem; text-transform: none; letter-spacing: 0;
  color: var(--rh-azul); font-weight: 800; margin: 0 0 0.75rem;
}
.ficha .label::after, .steps .label::after, .form-sheet .label::after {
  content: ""; display: block; height: 4px; width: 62px; margin-top: 0.35rem;
  background:
    radial-gradient(circle, var(--rh-laranja) 1.8px, transparent 2.3px) 0 50% / 7px 4px no-repeat,
    radial-gradient(circle, var(--rh-laranja) 1.8px, transparent 2.3px) 7px 50% / 7px 4px no-repeat,
    radial-gradient(circle, var(--rh-laranja) 1.8px, transparent 2.3px) 14px 50% / 7px 4px no-repeat,
    linear-gradient(var(--rh-laranja), var(--rh-laranja)) 26px 50% / 36px 3px no-repeat;
}
.ficha .label + .ficha-list { margin-top: 0; }
.ficha .label:not(:first-child) { margin-top: 1rem; }

/* —— Ficha da vaga —— */
.ficha-list { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.4rem 0.75rem; margin: 0 0 1rem; font-size: 0.95rem; }
.ficha-list dt { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; padding-top: 0.15rem; }
.ficha-list dd { margin: 0; color: var(--tinta); font-weight: 600; }
.req-list { margin: 0 0 0.6rem; padding-left: 1.15rem; font-size: 0.95rem; line-height: 1.45; }
.req-list li { margin: 0.25rem 0; }
.req-list li::marker, .steps-list li::marker { color: var(--rh-laranja); font-weight: 800; }
.cota-note {
  margin: 0.6rem 0 0; padding: 0.6rem 0.75rem; border-radius: 10px; border-left: 4px solid var(--rh-laranja);
  background: var(--rh-laranja-soft); color: var(--rh-navy); font-size: 0.9rem;
}
.cota-note strong { color: var(--rh-navy); }
.obs-peca { margin: 0.6rem 0 0; }
.steps-list { margin: 0 0 0.6rem; padding-left: 1.2rem; font-size: 0.95rem; line-height: 1.45; }
.steps-list li { margin: 0.3rem 0; }
.steps-list strong { color: var(--rh-navy); }
.card { box-shadow: 0 6px 22px rgba(7, 20, 50, 0.06); }

/* —— Botões: pílulas do site (azul-marinho cheio; contorno azul-marinho) —— */
.page-vaga .btn, .page-obrigada .btn {
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; font-size: 0.9rem; line-height: 1.2; white-space: normal;
}
.btn.primary { background: var(--rh-navy); color: #fff; box-shadow: 0 8px 20px rgba(7, 20, 50, 0.22); }
.btn.primary:not(:disabled):hover { background: var(--rh-navy-2); }
.btn.ghost { background: #fff; color: var(--rh-navy); border: 2px solid var(--rh-navy); }
.btn.ghost:hover { background: var(--rh-azul-soft); }
.sticky-cta .btn { box-shadow: 0 10px 28px rgba(7, 20, 50, 0.3); }
.btn-send, .btn-otp-validate { text-transform: none; letter-spacing: 0; font-weight: 800; }
.linkish { color: var(--rh-laranja-text); font-weight: 700; }
.linkish:hover { color: var(--rh-laranja-deep); }
.eyebrow { color: var(--rh-laranja-text); }
.consent-sheet { border-color: color-mix(in srgb, var(--rh-laranja) 45%, var(--line)); }
.consent input { accent-color: var(--rh-laranja); }

/* —— Formulário —— */
.field { margin: 0 0 0.85rem; }
.field label { display: block; font-size: 0.9rem; font-weight: 700; color: var(--rh-navy); margin-bottom: 0.3rem; }
.field input {
  width: 100%; min-height: var(--touch); border: 1.5px solid #cfd4e2; border-radius: 12px;
  padding: 0.65rem 0.85rem; font: inherit; font-size: 1rem; background: var(--card); color: var(--tinta);
}
.field input:focus-visible { outline: 2px solid var(--rh-azul-claro); outline-offset: 1px; border-color: var(--rh-azul-claro); }
.field input[aria-invalid="true"] { border-color: var(--err); }
.field .hint { margin: 0.35rem 0 0; }
.btn-otp { margin-top: 0.25rem; }
.otp-box { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed var(--line); animation: fade-in 0.25s ease; }
.otp-box label { display: block; font-size: 0.9rem; font-weight: 700; color: var(--rh-navy); margin-bottom: 0.35rem; }
.otp-row { display: flex; gap: 0.5rem; align-items: stretch; }
.otp-row input {
  flex: 1; min-width: 0; min-height: var(--touch); border: 1.5px solid #cfd4e2; border-radius: 12px;
  padding: 0.65rem 0.85rem; font: inherit; font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--card); color: var(--tinta);
}
.otp-row input:focus-visible { outline: 2px solid var(--rh-azul-claro); outline-offset: 1px; border-color: var(--rh-azul-claro); }
.btn-otp-validate { width: auto; min-width: 7rem; padding-inline: 1rem; border-radius: 12px; }
.otp-hint { margin: 0.5rem 0 0; }
.otp-actions { margin: 0.25rem 0 0; }
.otp-status { margin: 0.75rem 0 0; padding: 0.6rem 0.75rem; border-radius: 10px; font-size: 0.92rem; background: var(--rh-azul-soft); color: var(--rh-navy); }
.otp-status.ok { background: #e3f3ec; color: var(--ok); font-weight: 700; }
.otp-status.err { background: #fbe4e2; color: var(--err); }
.form-sheet.locked input { background: var(--areia-deep); color: var(--muted); }

/* —— Conversa —— */
.talk-brand { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.35rem 0.35rem 0.1rem; }
.talk-brand img { height: 30px; width: auto; display: block; }
.talk-brand span { font-size: 0.78rem; color: var(--muted); font-weight: 700; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.state-panel[data-state="connecting"] .avatar-ring { background: var(--rh-navy); }
.state-panel[data-state="speaking"] .avatar-ring {
  background: var(--rh-laranja);
  box-shadow: 0 0 0 4px rgba(241, 90, 34, 0.3), 0 0 0 10px rgba(241, 90, 34, 0.12);
}
@media (prefers-reduced-motion: reduce) {
  .state-panel[data-state="speaking"] .avatar-ring { box-shadow: 0 0 0 6px rgba(241, 90, 34, 0.35); }
}
.bubble.sofia { background: var(--rh-azul-soft); color: var(--rh-navy); }
.bubble.you { background: var(--rh-laranja-soft); color: var(--tinta); }
.progress-fill, .meter-fill { background: linear-gradient(90deg, var(--rh-laranja), var(--rh-navy)); }

/* —— Fim —— */
.fim-box { margin: 1rem 0 0; }
.fim-title { margin: 0 0 0.35rem; font-family: var(--font-display); font-size: 1.2rem; color: var(--rh-azul); font-weight: 800; }
.page-fim .end-ctas { margin-top: 0.85rem; }
.end-lede { color: var(--tinta); }
.spinner { display: inline-block; width: 0.9rem; height: 0.9rem; border: 2px solid var(--line); border-top-color: var(--rh-laranja); border-radius: 50%; animation: spin 0.9s linear infinite; vertical-align: -0.15rem; margin-right: 0.35rem; }
@keyframes spin { to { transform: rotate(360deg); } }

/* —— Rodapé —— */
.foot { color: var(--muted); opacity: 1; }
.foot a { color: var(--rh-laranja-text); text-underline-offset: 3px; }
.mic-fallback h2, .modal-inner h2 { color: var(--rh-azul); font-weight: 800; }

/* ---- página "todas as vagas" (21/09): link da bio do Instagram/TikTok ---- */
.page-vagas .rh-body { margin-top: 0.4rem; padding-bottom: 2rem; }
.vcidade { margin: 1.1rem 0 0; }
.vcidade-h { margin: 0 0 0.5rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; color: var(--rh-azul); letter-spacing: 0.01em; }
.vlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.vcard { padding: 0.95rem 1rem 1rem; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.vcargo { margin: 0; font-family: var(--font-display); font-size: 1.12rem; line-height: 1.25; font-weight: 800; color: var(--rh-navy); }
.vsal { margin: 0.2rem 0 0; font-weight: 700; color: var(--rh-laranja-text); font-size: 0.98rem; }
.vtags { margin: 0.55rem 0 0.8rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.vtag { display: inline-block; padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: var(--rh-azul-soft); color: var(--rh-navy); }
.vtag-pcd { background: var(--rh-laranja-soft); color: var(--rh-laranja-text); }
.vbtn { display: block; text-align: center; text-decoration: none; }
.vindice { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.9rem 0 0.2rem; }
.vchip { display: inline-block; padding: 0.32rem 0.7rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700; text-decoration: none; background: #fff; color: var(--rh-azul); border: 1px solid var(--line); }
.vcidade { scroll-margin-top: 0.75rem; }