/* =========================================================
   RH agêntico   componentes só desta página

   Camada 3 de 3: styles.css → llm.css → didatica.css → aqui.
   Os planos da topologia, o montador de agente, a ordem de
   subida, o roteador de tier, a cadeia de auditoria, o
   pipeline, o certificado e o modal do café.
   ========================================================= */

/* =========================
   Trilho: progresso do leitor
   ========================= */
.rh-track {
  padding: var(--sm);
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: #fff;
}

.rh-track__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sm);
}

.rh-track__label {
  font-size: calc(var(--sm) / 1.1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-45);
}

.rh-track__count {
  font-size: calc(var(--sm) / 1.06);
  font-weight: 700;
  color: var(--prompt-green);
}

.rh-track__bar {
  height: 4px;
  margin-top: calc(var(--sm) / 1.6);
  border-radius: 999px;
  background: var(--hair-soft);
  overflow: hidden;
}

.rh-track__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--prompt-green);
  transition: width .4s cubic-bezier(.16, 1, .3, 1);
}

.rh-track__cta {
  width: 100%;
  margin-top: calc(var(--sm) / 1.4);
  padding: calc(var(--sm) / 1.5);
  border: 1px solid var(--prompt-green);
  border-radius: 8px;
  background: color-mix(in srgb, var(--prompt-green) 10%, #fff);
  color: var(--prompt-green);
  font-size: calc(var(--sm) / 1.06);
  font-weight: 700;
}

.rh-track__cta:hover { background: color-mix(in srgb, var(--prompt-green) 18%, #fff); }

/* o reset global pinta cor em cada nó, inclusive no <svg> e no <path>: sem
   devolver a herança, o traço (stroke="currentColor") e a lágrima cheia
   (fill="currentColor") sairiam pretos em vez de seguir a cor do botão */
.rh-cafe svg,
.rh-cafe svg *,
.rh-nocafe svg,
.rh-nocafe svg * { color: inherit; }

/* o café que ainda não veio: aparece quando o leitor avança sem ter apoiado */
.rh-cafe {
  display: flex;
  align-items: center;
  gap: calc(var(--sm) / 1.6);
  width: 100%;
  margin-top: calc(var(--sm) / 1.4);
  padding: calc(var(--sm) / 1.7) calc(var(--sm) / 1.4);
  border: 1px solid color-mix(in srgb, var(--c-amber) 34%, var(--hair));
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-amber) 7%, #fff);
  text-align: left;
  transition: background .18s ease, border-color .18s ease;
}

.rh-cafe:hover {
  background: color-mix(in srgb, var(--c-amber) 14%, #fff);
  border-color: color-mix(in srgb, var(--c-amber) 55%, var(--hair));
}

.rh-cafe__ico,
.rh-cafe__face {
  flex: 0 0 auto;
  display: block;
  color: var(--c-amber);
}

.rh-cafe__ico svg { width: 18px; height: 18px; display: block; }

.rh-cafe__face {
  margin-left: auto;
  color: color-mix(in srgb, var(--c-amber) 62%, #fff);
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), color .18s ease;
}

.rh-cafe__face svg { width: 20px; height: 20px; display: block; }

.rh-cafe:hover .rh-cafe__face {
  transform: rotate(-9deg);
  color: var(--c-amber);
}

.rh-cafe__txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.rh-cafe__txt b {
  font-size: calc(var(--sm) / 1.06);
  font-weight: 700;
  color: var(--c-amber);
}

.rh-cafe__txt span {
  font-size: calc(var(--sm) / 1.24);
  color: var(--ink-45);
}

/* o mesmo pedido no rodapé, colado no "Próximo": quem só avança passa por ele
   a cada etapa, e aí o vermelho é o ponto: é o único traço quente da página */
.rh-foot__go {
  display: flex;
  align-items: center;
  gap: calc(var(--sm) / 1.4);
}

.rh-nocafe {
  --rh-red: #c92a2a;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--sm) / 1.8);
  padding: calc(var(--sm) / 1.3) var(--md);
  border: 1px solid var(--rh-red);
  border-radius: 999px;
  background: var(--rh-red);
  color: #fff;
  font-size: calc(var(--md) / 1.06);
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 12px rgba(201, 42, 42, .26);
  animation: rh-nocafe-in .42s both;
  transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.rh-nocafe:hover {
  background: #a61e1e;
  border-color: #a61e1e;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(201, 42, 42, .34);
}

.rh-nocafe__face {
  flex: 0 0 auto;
  display: block;
  color: #fff;
  transition: transform .22s cubic-bezier(.16, 1, .3, 1);
}

.rh-nocafe__face svg { width: 20px; height: 20px; display: block; }

.rh-nocafe:hover .rh-nocafe__face { transform: rotate(-10deg) scale(1.06); }

.rh-nocafe__txt { color: #fff; }

@keyframes rh-nocafe-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .rh-cafe,
  .rh-cafe__face,
  .rh-nocafe,
  .rh-nocafe__face { transition: none; }
  .rh-cafe:hover .rh-cafe__face,
  .rh-nocafe:hover .rh-nocafe__face { transform: none; }
  .rh-nocafe { animation: none; }
}

/* no celular o rodapé já disputa espaço com Anterior/Próximo: fica a carinha,
   e o texto do botão vive no aria-label */
@media (max-width: 640px) {
  .rh-nocafe { padding: calc(var(--sm) / 1.3); }
  .rh-nocafe__txt { display: none; }
}

.llm-nav__item.is-done .llm-nav__n {
  border-color: var(--prompt-green);
  color: var(--prompt-green);
}

/* =========================
   Conclusão de etapa
   ========================= */
.rh-done {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sm);
  margin-top: var(--lg);
  padding-top: var(--md);
  border-top: 1px dashed var(--hair);
}

.rh-done__hint {
  font-size: calc(var(--sm) / 1.04);
  color: var(--ink-45);
  flex: 1 1 240px;
}

.rh-done.is-done .llm-btn--primary {
  border-color: var(--prompt-green);
  background: color-mix(in srgb, var(--prompt-green) 12%, #fff);
  color: var(--prompt-green);
}

/* =========================
   Etapa 1: os planos
   ========================= */
.rh-topo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: calc(var(--sm) / 1.4);
}

.rh-plane {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--sm) / 2.4);
  padding: var(--sm);
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: #fff;
  text-align: left;
  transition: border-color .2s ease, background .2s ease;
}

.rh-plane:hover { border-color: var(--c); }

.rh-plane.is-on {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 8%, #fff);
}

.rh-plane__icon svg { width: 18px; height: 18px; stroke: var(--c); }
.rh-plane__icon { background: transparent; }

.rh-plane__name { font-weight: 700; font-size: calc(var(--md) / 1.1); }

.rh-plane__n {
  font-size: calc(var(--sm) / 1.14);
  color: var(--ink-45);
}

.rh-detail {
  margin-top: var(--md);
  padding: var(--md);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--c);
  border-radius: 10px;
  background: color-mix(in srgb, var(--c) 4%, #fff);
}

.rh-detail__title { font-weight: 700; margin-bottom: calc(var(--sm) / 1.6); }

.rh-detail__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(var(--sm) / 3);
  margin-bottom: var(--sm);
}

.rh-detail__list li {
  padding-left: var(--md);
  position: relative;
  font-size: calc(var(--md) / 1.12);
  color: var(--ink-80);
}

.rh-detail__list li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--c);
  font-weight: 700;
}

.rh-detail__block {
  font-size: calc(var(--md) / 1.1);
  line-height: 1.5;
  color: var(--ink-80);
}

.rh-detail__why {
  margin-top: calc(var(--sm) / 1.6);
  font-size: calc(var(--md) / 1.18);
  color: var(--ink-45);
}

/* =========================
   Etapa 2: montador de agente
   ========================= */
.rh-builder,
.rh-router {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--md);
  margin-bottom: var(--md);
}

.rh-builder__label {
  display: block;
  margin-bottom: calc(var(--sm) / 2);
  font-size: calc(var(--sm) / 1.1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-45);
}

.rh-verdict__box {
  margin-top: var(--md);
  padding: var(--sm) var(--md);
  border: 1px solid var(--c);
  border-radius: 10px;
  background: color-mix(in srgb, var(--c) 7%, #fff);
  font-size: calc(var(--md) / 1.1);
  line-height: 1.5;
}

/* log de linhas, reutilizado por várias etapas */
.rh-log { margin-top: var(--sm); }

.rh-log__line {
  padding: calc(var(--sm) / 2) 0 calc(var(--sm) / 2) var(--md);
  border-left: 2px solid var(--hair);
  font-size: calc(var(--md) / 1.14);
  line-height: 1.5;
  color: var(--ink-80);
}

.rh-log__line--ok { border-left-color: var(--c-green); }
.rh-log__line--aviso { border-left-color: var(--c-amber); }
.rh-log__line--erro { border-left-color: var(--c-pink); }

.rh-log__line code,
.rh-detail code {
  padding: 0 4px;
  border-radius: 4px;
  background: var(--hair-soft);
}

/* =========================
   Etapa 3: ordem de subida
   ========================= */
.rh-boot { display: grid; gap: var(--md); }

.rh-boot__pool,
.rh-boot__seq {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--sm) / 1.6);
  min-height: 52px;
  padding: calc(var(--sm) / 1.4);
  border: 1px dashed var(--hair);
  border-radius: 10px;
}

.rh-boot__seq { border-style: solid; background: color-mix(in srgb, var(--prompt-green) 4%, #fff); }

.rh-svc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: calc(var(--sm) / 1.6) var(--sm);
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: #fff;
  text-align: left;
}

.rh-svc:hover { border-color: var(--prompt-green); }

.rh-svc--seq {
  flex-direction: row;
  align-items: center;
  gap: calc(var(--sm) / 1.6);
  border-color: var(--prompt-green);
}

.rh-svc__name { font-weight: 700; font-size: calc(var(--md) / 1.14); }
.rh-svc__desc { font-size: calc(var(--sm) / 1.06); color: var(--ink-45); }

.rh-svc__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--prompt-green);
  color: #fff;
  font-size: calc(var(--sm) / 1.2);
  font-weight: 700;
}

.rh-empty {
  font-size: calc(var(--md) / 1.14);
  color: var(--ink-45);
}

.rh-smoke { margin-top: var(--md); }

/* =========================
   Etapa 4: tiers
   ========================= */
.rh-router__out { margin-top: var(--md); }

.rh-tier {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sm);
  padding: var(--sm) var(--md);
  border: 1px solid var(--c);
  border-radius: 10px;
  background: color-mix(in srgb, var(--c) 8%, #fff);
  margin-bottom: var(--sm);
}

.rh-tier__name { font-weight: 700; color: var(--c); }
.rh-tier__alvo { font-size: calc(var(--md) / 1.12); }
.rh-tier__note { font-size: calc(var(--sm) / 1.04); color: var(--ink-45); }

/* =========================
   Etapa 5: política devolvida
   ========================= */
.rh-doc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sm) var(--md);
  border: 1px solid var(--c);
  border-left: 3px solid var(--c);
  border-radius: 10px;
  background: color-mix(in srgb, var(--c) 6%, #fff);
  margin-bottom: var(--sm);
}

.rh-doc__title { font-weight: 700; }
.rh-doc__meta { font-size: calc(var(--sm) / 1.04); color: var(--ink-45); }
.rh-doc__rule { font-size: calc(var(--md) / 1.1); color: var(--ink-80); }

/* =========================
   Etapa 6: contratos
   ========================= */
.rh-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--md);
  margin-top: var(--md);
}

.rh-json {
  margin-top: calc(var(--sm) / 2);
  padding: var(--sm);
  max-height: 340px;
  overflow: auto;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--bg);
  color: rgba(255, 255, 255, .88);
  font-size: calc(var(--sm) / 1.06);
  line-height: 1.5;
  white-space: pre;
}

.rh-channel { margin-top: calc(var(--sm) / 2); }

.rh-card,
.rh-whats,
.rh-mail {
  padding: var(--md);
  border: 1px solid var(--hair);
  border-radius: 12px;
  font-size: calc(var(--md) / 1.1);
  line-height: 1.55;
}

.rh-card__lead { font-weight: 700; margin-bottom: var(--sm); }

.rh-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: calc(var(--sm) / 1.4);
  margin-bottom: var(--sm);
}

.rh-card__grid dt { font-size: calc(var(--sm) / 1.06); color: var(--ink-45); }
.rh-card__grid dd { font-weight: 700; }

.rh-card__cite,
.rh-card__limit,
.rh-card__bot {
  font-size: calc(var(--sm) / 1.02);
  color: var(--ink-60);
  margin-bottom: calc(var(--sm) / 2);
}

.rh-card__cite a,
.rh-card__bot a { text-decoration: underline; }

.rh-card .llm-btn { margin: calc(var(--sm) / 2) 0; }

.rh-whats {
  background: color-mix(in srgb, var(--c-green) 6%, #fff);
  border-color: color-mix(in srgb, var(--c-green) 30%, transparent);
}

.rh-whats p { margin-bottom: calc(var(--sm) / 1.6); }
.rh-whats__bot { font-size: calc(var(--sm) / 1.06); color: var(--ink-45); }

.rh-mail p, .rh-mail ul { margin-bottom: calc(var(--sm) / 1.6); }
.rh-mail ul { padding-left: var(--lg); }
.rh-mail__h { padding-bottom: calc(var(--sm) / 2); border-bottom: 1px solid var(--hair); }

/* =========================
   Etapa 7: cadeia de auditoria
   ========================= */
.rh-chain { display: flex; flex-direction: column; gap: calc(var(--sm) / 1.4); }

.rh-link {
  display: flex;
  gap: var(--sm);
  padding: var(--sm);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--c-green);
  border-radius: 10px;
}

.rh-link.is-broken {
  border-left-color: var(--c-pink);
  background: color-mix(in srgb, var(--c-pink) 5%, #fff);
}

.rh-link__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  font-size: calc(var(--sm) / 1.2);
  font-weight: 700;
}

.rh-link__body { flex: 1 1 auto; min-width: 0; }

.rh-link__head {
  font-size: calc(var(--md) / 1.14);
  margin-bottom: calc(var(--sm) / 2.4);
}

.rh-link__detail {
  width: 100%;
  padding: calc(var(--sm) / 2.4) calc(var(--sm) / 1.6);
  border: 1px solid var(--hair);
  border-radius: 6px;
  font-size: calc(var(--sm) / 1.02);
}

.rh-link__detail:focus { outline: 2px solid var(--c-blue); outline-offset: 1px; }

.rh-link__hash {
  margin-top: calc(var(--sm) / 2.4);
  font-size: calc(var(--sm) / 1.14);
  color: var(--ink-45);
  overflow-wrap: anywhere;
}

.rh-link__hash code, .rh-link__head code { background: var(--hair-soft); padding: 0 3px; border-radius: 4px; }

/* =========================
   Etapa 8: o fluxo
   ========================= */
.rh-pipe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: calc(var(--sm) / 1.4);
  margin-top: var(--md);
}

.rh-stage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--sm) / 3);
  padding: var(--sm);
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: #fff;
  opacity: .55;
  text-align: left;
  transition: opacity .3s ease, border-color .3s ease, background .3s ease;
}

.rh-stage.is-done { opacity: .8; border-color: color-mix(in srgb, var(--c) 40%, transparent); }

.rh-stage.is-on {
  opacity: 1;
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 8%, #fff);
}

.rh-stage__tag {
  font-size: calc(var(--sm) / 1.24);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c);
}

.rh-stage__icon svg { width: 16px; height: 16px; stroke: var(--c); }
.rh-stage__icon { background: transparent; }
.rh-stage__name { font-size: calc(var(--md) / 1.14); font-weight: 700; }

/* =========================
   Etapa 9: effective dating
   ========================= */
.rh-records { display: flex; flex-direction: column; gap: calc(var(--sm) / 1.6); margin: var(--md) 0; }

.rh-rec {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sm);
  padding: calc(var(--sm) / 1.3) var(--sm);
  border: 1px solid var(--hair);
  border-radius: 8px;
  opacity: .6;
}

.rh-rec.is-on {
  opacity: 1;
  border-color: var(--c-blue);
  background: color-mix(in srgb, var(--c-blue) 7%, #fff);
}

.rh-rec.is-right {
  opacity: 1;
  border-color: var(--c-green);
  border-style: dashed;
}

.rh-rec__cargo { font-weight: 700; }
.rh-rec__dept, .rh-rec__range { font-size: calc(var(--sm) / 1.04); color: var(--ink-45); }

.rh-rec__flag {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--c-blue);
  color: #fff;
  font-size: calc(var(--sm) / 1.2);
  font-weight: 700;
}

.rh-rec__flag--right { background: var(--c-green); }

/* =========================
   Etapa 10: pipeline
   ========================= */
.rh-ci {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: calc(var(--sm) / 1.4);
  margin-top: var(--md);
}

/* O estado do portão vive na cor da borda e no número, não numa
   barra por cima: o cartão é arredondado e a barra brigava com o
   canto. */
.rh-gate {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sm);
  border: 1px solid var(--hair);
  border-radius: 10px;
  transition: border-color .25s ease, background .25s ease;
}

.rh-gate.is-pass { border-color: color-mix(in srgb, var(--c-green) 45%, transparent); }
.rh-gate.is-pass .rh-gate__n { color: var(--c-green); }

.rh-gate.is-fail {
  border-color: var(--c-pink);
  background: color-mix(in srgb, var(--c-pink) 5%, #fff);
}

.rh-gate.is-fail .rh-gate__n { color: var(--c-pink); }
.rh-gate.is-skip { opacity: .45; }

.rh-gate__n { font-size: calc(var(--sm) / 1.2); font-weight: 700; color: var(--ink-45); }
.rh-gate__name { font-weight: 700; }
.rh-gate__desc { font-size: calc(var(--sm) / 1.06); color: var(--ink-45); }

.rh-gate__msg {
  margin-top: calc(var(--sm) / 2.4);
  font-size: calc(var(--sm) / 1.04);
  color: var(--c-pink);
}

/* =========================
   Etapa 11: regra dos 4/5
   ========================= */
.rh-fifths { display: flex; flex-direction: column; gap: calc(var(--sm) / 1.4); }

.rh-group {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(160px, 1.4fr) minmax(70px, auto);
  align-items: center;
  gap: var(--sm);
}

.rh-group__name { font-weight: 700; }
.rh-group__in { display: flex; align-items: center; gap: calc(var(--sm) / 1.6); }
.rh-group__in .llm-input { width: 88px; }
.rh-group__of { font-size: calc(var(--sm) / 1.04); color: var(--ink-45); }

.rh-group__rate {
  text-align: right;
  font-weight: 700;
  color: var(--c-blue);
}

/* =========================
   Etapa 12: checklist e certificado
   ========================= */
.rh-check {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: calc(var(--sm) / 1.6);
  margin-bottom: var(--md);
}

.rh-check__item {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--sm) / 1.4);
  padding: calc(var(--sm) / 1.3) var(--sm);
  border: 1px solid var(--hair);
  border-radius: 8px;
  font-size: calc(var(--md) / 1.14);
  line-height: 1.45;
  cursor: pointer;
}

.rh-check__item.is-on {
  border-color: var(--prompt-green);
  background: color-mix(in srgb, var(--prompt-green) 6%, #fff);
}

.rh-check__item input { margin-top: 3px; accent-color: var(--prompt-green); }

.rh-cert { margin: var(--lg) 0; }

.rh-cert__box {
  padding: var(--md);
  border: 1px solid var(--c);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--c) 6%, #fff);
}

.rh-cert__tag {
  font-size: calc(var(--sm) / 1.1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c);
}

.rh-cert__title {
  margin: calc(var(--sm) / 2) 0 calc(var(--sm) / 1.6);
  font-size: var(--lg);
  font-weight: 700;
}

/* =========================
   Modal do café
   ========================= */
.rh-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--md);
}

.rh-modal[hidden] { display: none; }

.rh-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(14, 16, 22, .45);
  animation: rhFade .25s ease;
}

.rh-modal__box {
  position: relative;
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: var(--lg);
  border: 1px solid var(--hair);
  border-radius: var(--radius2);
  background: #fff;
  box-shadow: 0 24px 80px rgba(14, 16, 22, .28);
  animation: rhRise .35s cubic-bezier(.16, 1, .3, 1);
}

@keyframes rhFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes rhRise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

.rh-modal__x {
  position: absolute;
  top: var(--sm);
  right: var(--sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--sm) / 2);
  border-radius: 999px;
}

.rh-modal__x:hover { background: var(--hair-soft); }

.rh-modal__eyebrow {
  font-size: calc(var(--sm) / 1.1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--prompt-green);
}

.rh-modal__title {
  margin: calc(var(--sm) / 2) 0 var(--sm);
  font-size: calc(var(--lg) * 1.2);
  line-height: 1.15;
}

.rh-modal__text {
  margin-bottom: var(--sm);
  font-size: calc(var(--md) / 1.06);
  line-height: 1.55;
  color: var(--ink-80);
}

.rh-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--sm) / 1.4);
  margin: var(--md) 0 calc(var(--sm) / 1.4);
}

.rh-modal__fine {
  font-size: calc(var(--sm) / 1.04);
  color: var(--ink-45);
  line-height: 1.5;
}

.rh-modal__text a, .rh-modal__fine a, .rh-form__erro a { text-decoration: underline; }

/* formulário */
.rh-form { display: flex; flex-direction: column; gap: var(--sm); }

.rh-form__row { display: flex; flex-direction: column; gap: calc(var(--sm) / 3); }

.rh-form__row > span {
  font-size: calc(var(--sm) / 1.1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-45);
}

.rh-form__erro {
  padding: calc(var(--sm) / 1.4) var(--sm);
  border: 1px solid var(--c-pink);
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-pink) 6%, #fff);
  font-size: calc(var(--sm) / 1.02);
  line-height: 1.5;
}

/* PIX */
.rh-pix {
  display: grid;
  grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
  gap: var(--md);
  align-items: start;
  margin: var(--md) 0;
}

.rh-pix__qr {
  padding: calc(var(--sm) / 1.6);
  border: 1px solid var(--hair);
  border-radius: 10px;
}

.rh-pix__qr svg { width: 100%; height: auto; display: block; }

.rh-pix__side { display: flex; flex-direction: column; gap: calc(var(--sm) / 1.6); }

.rh-pix__code {
  width: 100%;
  padding: calc(var(--sm) / 1.4);
  border: 1px solid var(--hair);
  border-radius: 8px;
  font-size: calc(var(--sm) / 1.14);
  line-height: 1.45;
  resize: vertical;
  overflow-wrap: anywhere;
}

/* =========================
   Telas menores
   ========================= */
@media (max-width: 720px) {
  .rh-pix { grid-template-columns: minmax(0, 1fr); }
  .rh-group { grid-template-columns: minmax(0, 1fr); gap: calc(var(--sm) / 2); }
  .rh-group__rate { text-align: left; }
  .rh-json { max-height: 260px; }
}