/* ==========================================================================
   Banner «Tú pones la visión»: fondo naranja con anillos, título con contorno
   azul y las tres paletas paso a paso. Acotado a .k-banner.
   ========================================================================== */

.k-banner {
  --kb-blue: #26509d;
  --kb-blue-deep: #1c3f80;
  padding: clamp(28px, 2.9vw, 56px) clamp(20px, 4.2vw, 80px);
  background: #f8952a url("../../img/banner-fondo.jpg") 50% 50% / cover no-repeat
}

.k-banner-inner {
  display: grid;
  grid-template-columns: minmax(0, .45fr) minmax(0, 1fr);
  align-items: center;
  max-width: 1760px;
  margin-inline: auto
}

.k-banner-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 1.9vw, 34px);
  padding-right: clamp(0px, 4vw, 76px);
  text-align: center
}

/* Título blanco con contorno azul: una copia con trazo va detrás de cada línea. */
.k-banner-title {
  margin: 0;
  color: #fff;
  font: 600 clamp(30px, 2.75vw, 54px)/1.08 Verveine, sans-serif;
  letter-spacing: -.01em;
  text-transform: uppercase
}

.k-banner-title span {
  position: relative;
  isolation: isolate;
  display: block
}

.k-banner-title span:before {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--kb-blue);
  -webkit-text-stroke: .2em var(--kb-blue);
  pointer-events: none
}

.k-banner .k-banner-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .72em 1.3em;
  border-radius: 999px;
  background: var(--kb-blue);
  color: #fff;
  font: 600 clamp(15px, 1.12vw, 21px)/1.2 Monserrat, Montserrat, sans-serif;
  letter-spacing: .02em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(28, 63, 128, .25);
  transition: background .2s ease, transform .2s ease
}

.k-banner .k-banner-cta:hover,
.k-banner .k-banner-cta:focus-visible {
  color: #fff;
  background: var(--kb-blue-deep);
  transform: translateY(-2px)
}

.k-banner-visual img {
  display: block;
  width: 100%;
  height: auto
}

/* Tablet: texto arriba y paletas debajo. */
@media (max-width:1024px) {
  .k-banner {
    padding-block: 44px 36px
  }

  .k-banner-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    max-width: 860px
  }

  .k-banner-copy {
    padding-right: 0
  }
}

/* Móvil: composición vertical de las paletas con las etiquetas arriba, para que se lean. */
@media (max-width:640px) {
  .k-banner {
    padding: 40px 16px 32px
  }

  .k-banner-visual {
    display: block;
    max-width: 420px;
    margin-inline: auto
  }
}