/* ==========================================================================
   CTA EM DOIS CAMINHOS — cam-
   Dois blocos de mesma largura, cada um um link inteiro.
   Tokens usados: --bg --fg --fg-2 --fg-muted --rule --rule-2 --accent
                  --dark --display --radius-media --radius-pill --ease
   ========================================================================== */

.cam-topo{max-inline-size:720px}

/* PESO IGUAL É LARGURA IGUAL: 1fr e 1fr, e nenhuma regra abaixo mexe nisso.
   Ver o cabeçalho do markup e o overlay/aviso-cookies. */
.cam-grade{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(32px,5vh,52px);
}
/* O slot existe por causa do §5: o reveal (data-rv) mora nele, e o link por
   dentro fica livre para ter caixa, véu e foco próprios. */
.cam-slot{display:flex}

.cam-caminho{
  position:relative;flex:1;
  display:grid;align-content:space-between;gap:clamp(40px,6vh,72px);
  min-block-size:clamp(240px,26vw,330px);
  padding:clamp(24px,3vw,40px);
  border:1px solid var(--rule);border-radius:var(--radius-media);
  background:color-mix(in srgb,var(--fg) 4%,var(--bg));
  color:var(--fg);
  isolation:isolate;
}
/* O realce de hover é um VÉU em opacidade, e não troca de background: uma
   transição sobre background que lê token de escopo não acompanha a troca
   do escopo (medido na prova/manchetes-imprensa). Nada se move (CLAUDE.md
   §6): o bloco só acende. */
.cam-caminho::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:currentColor;opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);
}
.cam-caminho:hover::before{opacity:.05}
.cam-caminho:hover{border-color:var(--rule-2)}
.cam-caminho:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* O caminho na cor de marca: fundo --accent e tinta --dark, a mesma dupla do
   .btn-primary do core — que é o par que o tema já garante legível. */
.cam-caminho--marca{
  background:var(--accent);border-color:var(--accent);color:var(--dark);
}
.cam-caminho--marca:hover{border-color:var(--accent)}
.cam-caminho--marca .cam-rot,
.cam-caminho--marca .cam-apoio{color:color-mix(in srgb,var(--dark) 72%,transparent)}

.cam-rot{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted);
  padding-inline-end:56px;             /* não passa por baixo da seta */
}
.cam-corpo{display:grid;gap:12px}
.cam-titulo{
  font-family:var(--display);font-weight:700;
  font-size:clamp(26px,3.1vw,44px);line-height:1.06;letter-spacing:-.025em;
  overflow-wrap:anywhere;
}
.cam-apoio{font-size:15px;line-height:1.55;color:var(--fg-2);max-inline-size:42ch}

.cam-seta{
  position:absolute;inset-block-start:clamp(20px,2.6vw,32px);inset-inline-end:clamp(20px,2.6vw,32px);
  inline-size:40px;block-size:40px;display:grid;place-items:center;
  border:1px solid currentColor;border-radius:var(--radius-pill);
  opacity:.7;transition:opacity .3s var(--ease);
}
.cam-caminho:hover .cam-seta{opacity:1}

@media(prefers-reduced-motion:reduce){
  .cam-caminho::before,.cam-seta{transition:none}
}

@media(max-width:760px){
  .cam-grade{grid-template-columns:1fr}
  .cam-caminho{min-block-size:0}
}