/* modules/CtaBand/frontend/assets/cta-band.css
 * Geometría de la banda final de CTA. El color de acento y el contraste salen de los tokens (§5).
 * Banda redondeada con fondo de marca, contenido centrado y botón invertido (claro sobre acento). */

.lcl-container .lcl-cta-band__inner {
  position: relative;
  overflow: hidden;
  text-align: center;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: clamp(48px, 7vw, 92px) clamp(28px, 5vw, 64px);
  border-radius: var(--r-xl);
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--shadow-accent);
}

/* Brillo sutil arriba-derecha, derivado del propio acento (no un color nuevo). */
.lcl-container .lcl-cta-band__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 80% 0%, color-mix(in oklab, var(--accent-contrast) 18%, transparent), transparent 60%);
  pointer-events: none;
}

/* Título/subtítulo van sobre el acento → texto claro. Se scopean bajo __inner (3 clases) para
   ganarle en especificidad a la regla del tema `.theme-befound h2/p` (que los pintaría oscuros). */
.lcl-container .lcl-cta-band__inner .lcl-cta-band__title {
  position: relative;
  font-size: clamp(34px, 5.5vw, 64px);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--accent-contrast);
}

.lcl-container .lcl-cta-band__inner .lcl-cta-band__subtitle {
  position: relative;
  margin: var(--space-4) auto 0;
  max-width: 48ch;
  font-size: var(--fs-title-2);
  line-height: var(--lh-relaxed);
  color: color-mix(in oklab, var(--accent-contrast) 88%, transparent);
}

.lcl-container .lcl-cta-band__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* Botón invertido: superficie clara, texto en el acento. Hereda la forma pill de .lcl-btn del tema. */
.lcl-container .lcl-cta-band__btn {
  background: var(--surface);
  border-color: var(--surface);
  color: var(--accent-pressed);
  box-shadow: var(--shadow-2);
}
.lcl-container .lcl-cta-band__btn:hover {
  background: var(--bg-primary);
  border-color: var(--bg-primary);
  color: var(--accent-pressed);
  transform: translateY(-2px);
}

.lcl-container .lcl-cta-band__inner .lcl-cta-band__link {
  color: var(--accent-contrast);
  font-weight: var(--fw-bold);
  font-size: var(--fs-callout);
  padding-bottom: 2px;
  border-bottom: 1.5px solid color-mix(in oklab, var(--accent-contrast) 50%, transparent);
}
.lcl-container .lcl-cta-band__inner .lcl-cta-band__link:hover {
  color: var(--accent-contrast);
  border-bottom-color: var(--accent-contrast);
}

/* ───────────────────────────────────────────────────────────────────────────
   Variante 'dark-grid' — banda oscura (ink) con grilla enmascarada y radius
   grande, dos botones (1:1 mockup Service App). Colores por token.
   ─────────────────────────────────────────────────────────────────────────── */
.lcl-container .lcl-cta-band--dark-grid .lcl-cta-band__inner {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: 64px 40px;
  text-align: center;
  background: linear-gradient(150deg, var(--label-primary), oklch(0.32 0.06 262));
  box-shadow: var(--shadow-3);
}
.lcl-container .lcl-cta-band--dark-grid .lcl-cta-band__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(oklch(1 0 0 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(100% 100% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(100% 100% at 50% 0%, #000, transparent 75%);
}
.lcl-container .lcl-cta-band--dark-grid .lcl-cta-band__title,
.lcl-container .lcl-cta-band--dark-grid .lcl-cta-band__subtitle,
.lcl-container .lcl-cta-band--dark-grid .lcl-cta-band__actions {
  position: relative;
}
.lcl-container .lcl-cta-band--dark-grid .lcl-cta-band__title { color: #fff; }
.lcl-container .lcl-cta-band--dark-grid .lcl-cta-band__subtitle { color: oklch(0.88 0.01 257); }
.lcl-container .lcl-cta-band--dark-grid .lcl-cta-band__btn {
  background: #fff;
  color: var(--label-primary);
  border-color: #fff;
}
.lcl-container .lcl-cta-band--dark-grid .lcl-cta-band__link {
  color: #fff;
  border: 1px solid oklch(1 0 0 / 0.25);
  border-radius: var(--r-md);
  padding: 15px 28px;
}
.lcl-container .lcl-cta-band--dark-grid .lcl-cta-band__link:hover {
  color: #fff;
  background: oklch(1 0 0 / 0.1);
  border-color: oklch(1 0 0 / 0.4);
}