/* ==========================================================================
   diag-banner.css — Gancho destacado al Diagnóstico Digital Rápido.
   El "empieza aquí" del sitio: banda premium con el anillo de madurez como
   motivo + titular serif + CTA teal. Se usa en la home (tras el hero) y arriba
   del Experience Center. Solo tokens de variables.css. CSP-safe.
   Base sin padding horizontal (hereda el del contenedor, p.ej. .exp);
   .diagbn--home agrega el gutter para cuando es hijo directo de <main>.
   ========================================================================== */

.diagbn { padding-block: clamp(24px, 4vw, 48px); }
.diagbn--home { padding-inline: var(--gutter); }

.diagbn__inner {
  position: relative; overflow: hidden;
  max-width: var(--container); margin-inline: auto;
  display: grid; gap: clamp(18px, 3vw, 40px); align-items: center;
  padding: clamp(26px, 4vw, 48px) clamp(24px, 4vw, 54px);
  border-radius: var(--r-lg);
  background: radial-gradient(125% 130% at 10% 15%, #15384a 0%, #0C1B26 62%);
  border: 1px solid rgba(127, 208, 204, .24);
  box-shadow: var(--sh-card);
}
@media (min-width: 720px) { .diagbn__inner { grid-template-columns: auto 1fr; } }
/* halo teal decorativo */
.diagbn__inner::before {
  content: ""; position: absolute; right: -8%; top: -50%; width: 55%; height: 200%;
  background: radial-gradient(circle, rgba(28, 122, 130, .24), transparent 60%); pointer-events: none;
}

/* ----- Anillo (motivo de madurez) ----- */
.diagbn__ring { position: relative; width: 132px; height: 132px; justify-self: center; }
.diagbn__ring svg { display: block; }
.diagbn__ring-bg { stroke: rgba(127, 208, 204, .16); }
.diagbn__ring-arc {
  stroke: var(--c-teal-200); stroke-dasharray: 327; stroke-dashoffset: 108;
  animation: diagbn-draw 1.15s var(--t-acc) both;
}
@keyframes diagbn-draw { from { stroke-dashoffset: 327; } to { stroke-dashoffset: 108; } }
/* F6 «PULSO»: anillo.js pausa el dibujo hasta que el banner entra al viewport
   (en la home vive bajo el hero y corría sin público). Sin JS no hay pausa. */
.diagbn--wait .diagbn__ring-arc { animation-play-state: paused; }
.diagbn__ring-txt {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 600; font-size: 2rem; color: var(--c-on-dark); line-height: 1;
}
.diagbn__ring-txt small { margin-top: 3px; font: 700 .64rem var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--c-teal-200); }

/* ----- Texto + CTA ----- */
.diagbn__body { position: relative; }
.diagbn__eyebrow {
  margin: 0 0 12px; display: inline-flex; align-items: center; gap: 9px;
  font: 700 .74rem var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--c-teal-200);
}
.diagbn__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-teal-200); animation: diagbn-pulse 2.2s infinite; }
@keyframes diagbn-pulse {
  0% { box-shadow: 0 0 0 0 rgba(127, 208, 204, .5); }
  70% { box-shadow: 0 0 0 8px rgba(127, 208, 204, 0); }
  100% { box-shadow: 0 0 0 0 rgba(127, 208, 204, 0); }
}
.diagbn__title { margin: 0 0 12px; font-family: var(--font-serif); font-weight: 600; color: var(--c-on-dark); font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.01em; }
.diagbn__lead { margin: 0 0 22px; color: var(--c-on-dark-soft); font-size: var(--fs-lead-sm); line-height: 1.55; max-width: 60ch; }
.diagbn__lead strong { color: var(--c-on-dark); font-weight: 600; }
.diagbn__cta {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 14px 30px;
  border-radius: var(--r-pill); font: 700 1rem var(--font-sans); text-decoration: none;
  background: var(--g-teal); color: #fff; box-shadow: var(--sh-cta);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.diagbn__cta:hover { transform: translateY(-2px); }
.diagbn__cta:focus-visible { outline: 2px solid var(--c-teal-200); outline-offset: 3px; }
.diagbn__arrow { transition: transform var(--t-fast); }
.diagbn__cta:hover .diagbn__arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .diagbn__ring-arc { animation: none; }
  .diagbn__dot { animation: none; }
}