/* home-ideias.css (24/10/2026): busca por situação, balança animada, passos e "a lei, lado a lado".
   Só var(--ra-*); nenhum hex. Celular primeiro; quebra em 768 px. Carregado só em "/". */


/* ---------- hero ---------- */
.rh-hero {
  margin-top: 72px;
  padding: 2rem 0 2.5rem;
  background: var(--ra-superficie);
  border-bottom: 1px solid var(--ra-gray-200);
}
.rh-hero__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.rh-hero__grade > * { min-width: 0; }
.rh-hero__arte { justify-self: center; width: 9rem; color: var(--ra-azul); }
.rh-balanca { display: block; width: 100%; height: auto; overflow: visible; }
.rh-hero__arte { position: relative; }
.rh-hero__arte::before {
  content: ""; position: absolute; inset: -18%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ra-dourado) 42%, transparent), transparent);
  opacity: var(--glow, 0);
}
.rh-bal { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.ra-js .rh-hero__arte .rh-bal { opacity: 0; }
.ra-js .rh.rh-pronto .rh-hero__arte .rh-bal { opacity: 1; }
.b-onda { animation: rh-onda 3.4s linear infinite; }
.b-onda--d { animation-delay: -1.3s; }
@keyframes rh-onda { to { transform: translateX(-80px); } }
.b-seta path { transition: stroke 0.4s; }
.b-seta.is-ouro path { stroke: var(--ra-dourado); }
.b-flecha path { transition: stroke 0.5s; }
.b-flecha.is-ouro path { stroke: var(--ra-dourado); }

/* hero escuro quando a ideia 1 está ligada */
.rh.has-1 .rh-hero {
  background:
    radial-gradient(60% 90% at 85% 0%, color-mix(in srgb, var(--ra-dourado) 30%, transparent), transparent 62%),
    linear-gradient(160deg, var(--ra-azul) 30%, var(--ra-azul-2));
  border-bottom: 0;
  color: white;
}
.rh.has-1 .rh-hero .ra-home-hero__titulo { color: white; }
.rh.has-1 .rh-hero .ra-home-hero__sub { color: color-mix(in srgb, white 86%, transparent); }
.rh.has-1 .rh-hero__arte { color: white; }
.rh.has-1 .rh-hero .ra-home-hero__ctas .cta-primary { background: white; color: var(--ra-azul); border: 2px solid white; }
.rh.has-1 .rh-hero .ra-home-hero__ctas .cta-primary:hover { background: var(--ra-dourado); border-color: var(--ra-dourado); color: var(--ra-azul); }
.rh.has-1 .rh-hero .ra-home-hero__ctas .whatsapp-btn { color: white; border-color: color-mix(in srgb, white 70%, transparent); background: transparent; }
.rh.has-1 .rh-hero .ra-home-hero__ctas .whatsapp-btn:hover { background: white; color: var(--ra-azul); }
.rh.has-1 .rh-hero .ra-home-hero__depois,
.rh.has-1 .rh-hero .ra-home-hero__depois-rotulo,
.rh.has-1 .rh-hero .ra-home-hero__depois * { color: color-mix(in srgb, white 88%, transparent); }

@media (min-width: 768px) {
  .rh-hero { padding: 4.5rem 0 5rem; }
  .rh.has-2 .rh-hero__grade { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; gap: 3rem; }
  .rh-hero__arte { width: 100%; max-width: 19rem; }
}

/* ---------- ideia 1: busca por situação ---------- */
.rh-busca { margin: 0 0 1.5rem; }
.rh-busca__rotulo { display: block; margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 700; color: white; }
.rh-busca__campo { position: relative; max-width: 40rem; }
.ra-js .rh-busca__campo { min-height: 56px; }
.rh-busca__campo input {
  width: 100%;
  min-height: 56px;
  padding: 0 1.25rem 0 3rem;
  border: 2px solid transparent;
  border-radius: var(--ra-raio-pilula);
  background: white;
  color: var(--ra-gray-900);
  font: inherit;
  font-size: 1.0625rem;
  box-shadow: 0 12px 32px -16px color-mix(in srgb, black 55%, transparent);
}
.rh-busca__campo input::placeholder { color: var(--ra-gray-500); }
.rh-busca__campo input:focus-visible { outline: 3px solid var(--ra-dourado); outline-offset: 2px; }
.rh-busca__lupa { display: none; position: absolute; left: 1.1rem; top: 50%; width: 1.25rem; height: 1.25rem; margin-top: -0.625rem; color: var(--ra-azul-2); pointer-events: none; z-index: 1; }

.rh-chips { list-style: none; margin: 0.875rem 0 0; padding: 0; display: flex; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, black 90%, transparent); mask-image: linear-gradient(90deg, black 90%, transparent); }
.rh-chips::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .rh-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; max-width: 40rem; -webkit-mask-image: none; mask-image: none; }
  .rh-chips li:nth-child(n+7) { display: none; }
  .rh-chips .rh-chip { width: 100%; height: 100%; min-height: 52px; padding: 0.5rem 1rem; white-space: normal; border-radius: var(--ra-raio-card); line-height: 1.3; }
}
.rh-chips[hidden] { display: none; }
.rh-chips li { flex: none; scroll-snap-align: start; }
.rh-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid color-mix(in srgb, white 38%, transparent);
  border-radius: var(--ra-raio-pilula);
  background: color-mix(in srgb, white 9%, transparent);
  color: white;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.rh-chip:hover { background: white; color: var(--ra-azul); border-color: white; }

.rh-resultados { max-width: 40rem; margin-top: 0.75rem; padding: 0.5rem; background: white; border-radius: var(--ra-raio-card); color: var(--ra-gray-800); box-shadow: 0 16px 40px -20px color-mix(in srgb, black 60%, transparent); }
.rh-resultados__n { margin: 0.25rem 0.5rem 0.25rem; font-size: 0.8125rem; color: var(--ra-gray-600); }
.rh-resultados__lista { list-style: none; margin: 0; padding: 0; max-height: 18rem; overflow-y: auto; }
.rh-resultados__lista li[hidden] { display: none; }
.rh-resultados__lista li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; border-radius: 8px; }
.rh-resultados__lista li:hover, .rh-resultados__lista li.is-ativo { background: var(--ra-tinta-azul-2); }
.rh-resultados__lista a { flex: 1; display: flex; align-items: center; min-height: 44px; padding: 0.25rem 0.5rem; color: var(--ra-azul); font-weight: 600; text-decoration: none; }
.rh-resultados__lista span { flex: none; padding-right: 0.5rem; font-size: 0.75rem; color: var(--ra-gray-600); }
.rh-vazio { margin: 0.5rem; }
.rh-vazio a { color: var(--ra-azul-2); font-weight: 600; }
.rh-mais { margin: 0.5rem 0 0; }
.rh.has-1 .rh-hero .rh-mais a { color: white; }

/* ---------- ideia 2: linha dos passos ---------- */
.rh-linha__grade { display: grid; gap: 1.5rem; }
.rh-linha__intro p { margin: 0; max-width: 28rem; color: var(--ra-gray-700); }
.rh-linha__passos { list-style: none; margin: 0; padding: 0; position: relative; }
.rh-passo { position: relative; display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding-bottom: 1.75rem; }
.rh-passo:last-child { padding-bottom: 0; }
.rh-passo::before { /* trilho */
  content: ""; position: absolute; left: 1.1875rem; top: 2.5rem; bottom: 0; width: 2px;
  background: var(--ra-gray-200);
}
.rh-passo::after { /* preenchimento que se desenha ao entrar na tela */
  content: ""; position: absolute; left: 1.1875rem; top: 2.5rem; bottom: 0; width: 2px;
  background: var(--ra-dourado);
  transform: scaleY(0); transform-origin: top; transition: transform 0.7s ease 0.15s;
}
.rh-passo:last-child::before, .rh-passo:last-child::after { display: none; }
.rh-passo__n {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: white; border: 2px solid var(--ra-gray-300); color: var(--ra-gray-600);
  font-weight: 800; transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.rh-passo.is-on .rh-passo__n { background: var(--ra-azul); border-color: var(--ra-azul); color: white; }
.rh-passo.is-on::after { transform: scaleY(1); }
.rh-passo__t { margin: 0.25rem 0 0.25rem; font-size: 1.125rem; color: var(--ra-azul); }
.rh-passo p { margin: 0; color: var(--ra-gray-700); max-width: 34rem; }
@media (min-width: 768px) {
  .rh-linha__grade { grid-template-columns: 1fr 1.3fr; gap: 3rem; align-items: start; }
  .rh-linha__intro { position: sticky; top: 6rem; }
}

/* balança fixa ao lado dos passos (movimento C) */
.rh:not(.has-c) .rh-mov-c { display: none; }
.rh-linha__intro { display: contents; }
.rh-linha__intro > h2, .rh-linha__intro > p { grid-column: 1; }
.rh-linha__bal {
  position: sticky; top: 72px; z-index: 4; display: flex; justify-content: center;
  padding: 0.5rem 0; background: var(--ra-superficie); border-bottom: 1px solid var(--ra-gray-200); color: var(--ra-azul);
}
.rh-linha__bal .rh-bal { width: auto; height: 6.5rem; }
@media (min-width: 768px) {
  .rh-linha__intro { display: block; position: sticky; top: 6rem; }
  .rh-linha__bal { position: static; margin-top: 1.5rem; border: 0; background: none; justify-content: flex-start; }
  .rh-linha__bal .rh-bal { width: 16rem; height: auto; }
}

/* ---------- ideia 3: a lei, lado a lado ---------- */
.rh-lei__sub { margin: 0 0 1rem; max-width: 40rem; color: var(--ra-gray-700); }
.rh-lei__ex { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
html:not(.ra-js) .rh-lei__ex, html:not(.ra-js) .rh-lei__modo { display: none; }
.ra-js .rh-busca__lupa { display: block; }
.rh-pilula, .rh-seg {
  min-height: 44px; padding: 0 1rem; border: 1.5px solid var(--ra-azul-2); border-radius: var(--ra-raio-pilula);
  background: white; color: var(--ra-azul-2); font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.rh-pilula[aria-pressed="true"] { background: var(--ra-azul); border-color: var(--ra-azul); color: white; }
.rh-lei__modo { display: inline-flex; flex-wrap: wrap; padding: 0.25rem; margin-bottom: 1rem; background: white; border: 1px solid var(--ra-gray-200); border-radius: var(--ra-raio-pilula); gap: 0.125rem; }
.rh-seg { border: 0; background: transparent; }
.rh-seg[aria-pressed="true"] { background: var(--ra-azul-2); color: white; }
.rh-seg--lado { display: none; }
@media (min-width: 768px) { .rh-seg--lado { display: inline-block; } }

.rh-lei__painel[data-modo="lei"] .rh-ex__simples,
.rh-lei__painel[data-modo="simples"] .rh-ex__lei { display: none; }
.rh-ex { display: grid; gap: 1rem; animation: rh-entra 0.35s ease; }
.rh-ex[hidden] { display: none; }
@keyframes rh-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (min-width: 768px) {
  .rh-lei__painel[data-modo="lado"] .rh-ex { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
.rh-ex__lei, .rh-ex__simples { padding: 1.25rem; border-radius: var(--ra-raio-card); background: white; border: 1px solid var(--ra-gray-200); }
.rh-ex__lei { background: var(--ra-dourado-claro); border-color: var(--ra-dourado); }
.rh-ex h3 { margin: 0 0 0.75rem; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ra-gray-700); }
.rh-ex blockquote { margin: 0; padding: 0; border: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.0625rem; line-height: 1.6; color: var(--ra-gray-900); }
.rh-ex blockquote p { margin: 0 0 0.75rem; }
.rh-ex blockquote p:last-child { margin-bottom: 0; }
.rh-ex__simples p { margin: 0 0 0.75rem; font-size: 1.0625rem; line-height: 1.6; color: var(--ra-gray-900); }
.rh-ex__fonte { margin: 0.875rem 0 0; font-size: 0.8125rem; color: var(--ra-gray-700); }
.rh-ex__guia { display: inline-flex; align-items: center; min-height: 44px; color: var(--ra-azul-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rh-lei__aviso { margin: 0.75rem 0 1.5rem; font-size: 0.875rem; color: var(--ra-gray-700); }

/* fita de leis */
.rh-fita { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); }
.rh-fita__trilha { display: flex; width: max-content; animation: rh-fita 45s linear infinite; }
.rh-fita:hover .rh-fita__trilha, .rh-fita:focus-within .rh-fita__trilha { animation-play-state: paused; }
.rh-fita__metade { list-style: none; margin: 0; padding: 0 0.625rem 0 0; display: flex; gap: 0.625rem; }
.rh-lei-chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; white-space: nowrap;
  border: 1px solid var(--ra-gray-300); border-radius: var(--ra-raio-pilula); background: white;
  color: var(--ra-azul); font-size: 0.9375rem; font-weight: 600; text-decoration: none;
}
.rh-lei-chip:hover { border-color: var(--ra-dourado); background: var(--ra-dourado-claro); }
@keyframes rh-fita { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .b-onda, .rh-fita__trilha, .rh-ex { animation: none; }
  .rh-passo::after, .rh-passo__n { transition: none; }
  .rh-fita__trilha { width: auto; flex-wrap: wrap; }
  .rh-fita__metade { flex-wrap: wrap; }
  .rh-fita__metade[aria-hidden="true"] { display: none; }
  .rh-fita { -webkit-mask-image: none; mask-image: none; }
}