/**
 * Ebre Compass — caja CTA con brújula. Tokens de marca.
 */
.ebre-compass .ec-box {
  background: rgb(var(--brand-primary));
  color: #fff;
  border-radius: var(--radius-lg, 2rem);
  padding: 2rem;
  box-shadow: 0 20px 40px rgb(0 0 0 / 0.18);
}
@media (min-width: 768px) { .ebre-compass .ec-box { padding: 3rem; } }

.ebre-compass .ec-glow { background: rgb(255 255 255 / 0.06); filter: blur(40px); }

.ebre-compass .ec-dial {
  width: 12rem; height: 12rem;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.1);
  backdrop-filter: blur(6px);
  border: 1px solid rgb(255 255 255 / 0.2);
  box-shadow: 0 10px 20px rgb(0 0 0 / 0.15);
  display: flex; align-items: center; justify-content: center;
}
.ebre-compass .ec-needle-cap {
  width: 12px; height: 12px; border-radius: 9999px;
  background: #fff; border: 2px solid rgb(var(--brand-primary));
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
}

.ebre-compass .ec-eyebrow { color: rgb(var(--brand-accent)); }
.ebre-compass .ec-title { color: #fff; font-size: clamp(1.875rem, 4vw, 2.25rem); }
.ebre-compass .ec-body { color: rgb(255 255 255 / 0.8); font-size: 1rem; }

.ebre-compass .ec-cta {
  background: rgb(var(--brand-accent));
  color: rgb(var(--on-accent, var(--brand-primary)));
  padding: 0.875rem 2rem;
  border-radius: var(--radius-pill, 9999px);
  transition: opacity .3s ease, transform .3s ease;
}
.ebre-compass .ec-cta:hover { opacity: 0.92; transform: translateY(-1px); }