/* =========================================================================
   SHOWCASE.CSS — Franjas de imagen a todo el ancho (full-width) con efecto
   parallax y velo azul. Aportan un aire premium entre secciones.
   ========================================================================= */

.showcase {
  position: relative; width: 100%;
  min-height: clamp(320px, 46vw, 520px);
  display: flex; align-items: center;
  color: #fff; overflow: hidden;
  background-color: var(--navy-deep);
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* parallax en escritorio */
}
/* Velo azul en degradado para mantener la paleta y la legibilidad */
.showcase::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(20,44,70,.90) 0%, rgba(27,58,92,.72) 45%, rgba(46,109,164,.42) 100%);
}
.showcase__inner { position: relative; z-index: 2; padding: clamp(3rem, 7vw, 5rem) 0; max-width: 640px; }
.showcase__eyebrow {
  display: inline-block; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  font-size: .78rem; color: var(--blue-soft); margin-bottom: 1rem;
}
.showcase__title { color: #fff; font-size: clamp(1.8rem, 4.4vw, 3rem); line-height: 1.1; }
.showcase__title em { color: var(--blue-soft); font-style: italic; }
.showcase__text { margin-top: 1.1rem; color: var(--text-on-navy-soft); font-size: 1.08rem; }
.showcase__actions { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* Variante centrada (para la franja CTA) */
.showcase--center { text-align: center; }
.showcase--center .showcase__inner { margin: 0 auto; }
.showcase--center .showcase__actions { justify-content: center; }
.showcase--compact { min-height: clamp(260px, 34vw, 380px); }

/* En móvil se desactiva el parallax (mejor rendimiento y evita saltos) */
@media (max-width: 820px) {
  .showcase { background-attachment: scroll; }
}