/**
 * KK Hero Banner — per-slide layout + Owl slider.
 * Uses theme Owl init: .mkdf-owl-slider (see assets/js/modules/common.js).
 *
 * Full-bleed on the root <section.kk-hero> (100vw + calc margins) so the block breaks
 * out of VC columns; .kk-hero__slides-wrap stays width:100% of that section. kk-hero.js
 * refresh.owl.carousel still helps Owl after layout.
 *
 * Height: min-height baseline + --kk-hero-unified-slide-h (tallest slide, set in kk-hero.js)
 * so all slides share one height and the Owl track matches the section (no blue strip).
 *
 * KK hero only: .kk-hero__slides.mkdf-owl-slider is a column flex container so
 * .owl-stage-outer grows to the hero min-height (avoids blue strip under slides).
 * Dots stay position:absolute on the carousel root, over the slide backgrounds.
 */

.kk-hero {
  --kk-hero-fill: clamp(360px, 42vw, 540px);
  /* Set by kk-hero.js to tallest slide so all slides / Owl track share one height */
  --kk-hero-unified-slide-h: 0px;

  position: relative;
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: hidden;
  overflow-y: visible;
  background-color: #1a2d4d;
  min-height: max(var(--kk-hero-fill), var(--kk-hero-unified-slide-h));
  height: auto;
}

.kk-hero__slides-wrap {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  width: 100%;
  min-height: max(var(--kk-hero-fill), var(--kk-hero-unified-slide-h));
  height: auto;
  max-width: none;
  margin: 0;
}

.kk-hero .kk-hero__slides.mkdf-owl-slider {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  width: 100vw;
  min-height: max(var(--kk-hero-fill), var(--kk-hero-unified-slide-h));
  height: auto;
  margin: 0;
}

/* Fill slides-wrap height so .owl-item can stretch to full track height */
.kk-hero .kk-hero__slides .owl-stage-outer {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: max(var(--kk-hero-fill), var(--kk-hero-unified-slide-h));
  height: auto;
  width: 100%;
  max-width: none;
  overflow: hidden;
  cursor: grab;
}

.kk-hero .kk-hero__slides .owl-stage-outer:active {
  cursor: grabbing;
}

/* Keep pointer on tappable content over the grab cursor */
.kk-hero .kk-hero__slides .owl-stage-outer a,
.kk-hero .kk-hero__slides .owl-stage-outer button,
.kk-hero .kk-hero__slides .owl-stage-outer input,
.kk-hero .kk-hero__slides .owl-stage-outer textarea,
.kk-hero .kk-hero__slides .owl-stage-outer select {
  cursor: pointer;
}

/*
 * Do not set width on .owl-item or override its float:left — Owl Carousel sets
 * inline widths + translate3d on .owl-stage and relies on items being floated
 * side by side. Forcing width:100% or float:none breaks slide advancing.
 */
.kk-hero .kk-hero__slides .owl-stage {
  min-height: max(var(--kk-hero-fill), var(--kk-hero-unified-slide-h));
  height: auto;
}

.kk-hero .kk-hero__slides .owl-item {
  box-sizing: border-box;
  min-height: max(var(--kk-hero-fill), var(--kk-hero-unified-slide-h));
  height: auto;
  border: 0;
  outline: 0;
  box-shadow: none;
}

.kk-hero .kk-hero__slides .owl-item > .kk-hero__slide {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  min-height: max(var(--kk-hero-fill), var(--kk-hero-unified-slide-h));
  height: auto;
}

.kk-hero__slide {
  --kk-hero-cta-bg: #4b5568;
  --kk-hero-cta-bg-hover: #5c687d;
  --kk-hero-cta-border: rgba(255, 255, 255, 0.85);

  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: max(var(--kk-hero-fill), var(--kk-hero-unified-slide-h));
  height: auto;
  overflow: visible;
}

.kk-hero__slide--theme-gris {
  --kk-hero-cta-bg: #4b5568;
  --kk-hero-cta-bg-hover: #5c687d;
  --kk-hero-cta-border: rgba(255, 255, 255, 0.85);
}

.kk-hero__slide--theme-dorado {
  --kk-hero-cta-bg: #b68a2f;
  --kk-hero-cta-bg-hover: #c69a3d;
  --kk-hero-cta-border: #b68a2f;
}

.kk-hero__slide--text-blanco .kk-hero__content,
.kk-hero__slide--text-blanco .kk-hero__title,
.kk-hero__slide--text-blanco .kk-hero__desc,
.kk-hero__slide--text-blanco .kk-hero__title h1,
.kk-hero__slide--text-blanco .kk-hero__title h2,
.kk-hero__slide--text-blanco .kk-hero__title h3,
.kk-hero__slide--text-blanco .kk-hero__title h4,
.kk-hero__slide--text-blanco .kk-hero__title h5,
.kk-hero__slide--text-blanco .kk-hero__title h6,
.kk-hero__slide--text-blanco .kk-hero__desc h1,
.kk-hero__slide--text-blanco .kk-hero__desc h2,
.kk-hero__slide--text-blanco .kk-hero__desc h3,
.kk-hero__slide--text-blanco .kk-hero__desc h4,
.kk-hero__slide--text-blanco .kk-hero__desc h5,
.kk-hero__slide--text-blanco .kk-hero__desc h6,
.kk-hero__slide--text-blanco .kk-hero__desc strong,
.kk-hero__slide--text-blanco .kk-hero__desc b,
.kk-hero__slide--text-blanco .kk-hero__desc a {
  color: #fff;
}

.kk-hero__slide--text-azul .kk-hero__content,
.kk-hero__slide--text-azul .kk-hero__title,
.kk-hero__slide--text-azul .kk-hero__desc,
.kk-hero__slide--text-azul .kk-hero__title h1,
.kk-hero__slide--text-azul .kk-hero__title h2,
.kk-hero__slide--text-azul .kk-hero__title h3,
.kk-hero__slide--text-azul .kk-hero__title h4,
.kk-hero__slide--text-azul .kk-hero__title h5,
.kk-hero__slide--text-azul .kk-hero__title h6,
.kk-hero__slide--text-azul .kk-hero__desc h1,
.kk-hero__slide--text-azul .kk-hero__desc h2,
.kk-hero__slide--text-azul .kk-hero__desc h3,
.kk-hero__slide--text-azul .kk-hero__desc h4,
.kk-hero__slide--text-azul .kk-hero__desc h5,
.kk-hero__slide--text-azul .kk-hero__desc h6,
.kk-hero__slide--text-azul .kk-hero__desc strong,
.kk-hero__slide--text-azul .kk-hero__desc b,
.kk-hero__slide--text-azul .kk-hero__desc a {
  color: #293750;
}

.kk-hero__slide-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.kk-hero__slide .kk-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(20, 38, 68, 0.72) 0%,
    rgba(20, 38, 68, 0.5) 45%,
    rgba(20, 38, 68, 0.2) 100%
  );
}

.kk-hero__slide .kk-hero__inner {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 48px);
  flex: 0 0 auto;
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-top: clamp(20px, 3vw, 40px);
  padding-right: clamp(16px, 3vw, 32px);
  padding-bottom: 0;
  padding-left: clamp(16px, 3vw, 32px);
}

.kk-hero__slide--person-right .kk-hero__inner {
  flex-direction: row-reverse;
}

.kk-hero__slide--person-left .kk-hero__inner {
  padding-left: 0;
}

.kk-hero__slide--person-right .kk-hero__inner {
  padding-right: 0;
}

.kk-hero__person {
  flex: 0 1 auto;
  align-self: end;
  margin: 0;
  max-width: min(38%, 420px);
  line-height: 0;
}

.kk-hero__person img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(420px, 42vh);
  object-fit: contain;
  object-position: bottom center;
}

.kk-hero__content {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding-right: clamp(62px, 9vw, 92px);
  padding-bottom: clamp(24px, 4vw, 48px);
  color: #fff;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.kk-hero__content::after {
  content: "";
  display: table;
  clear: both;
}

.kk-hero__title {
  margin: 0;
  font-family: "Cormorant Garamond", "Cormorant", Georgia, serif;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  font-size: clamp(1.2rem, 1.85vw + 0.65rem, 2.2rem);
}

.kk-hero__title h1 {
  margin: 0 0 0.55em;
  font-weight: 500;
  line-height: 1.2;
  font-size: clamp(1.35rem, 2.4vw + 0.65rem, 2.6rem);
}

.kk-hero__title h2 {
  margin: 0 0 0.55em;
  font-weight: 500;
  line-height: 1.2;
  font-size: 1em;
}

.kk-hero__logo {
  position: absolute;
  top: -0.25em;
  right: 0;
  z-index: 3;
  display: block;
  width: auto;
  height: clamp(40px, 6vw, 60px);
  margin: 0;
}

/* Override theme-wide Owl img width:100% rule for logo. */
.kk-hero .mkdf-owl-slider .owl-item .kk-hero__logo {
  top: 2em;
  right: 2em;
  width: auto;
  max-width: none;
}

.kk-hero__desc {
  margin: 0 0 1em;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 0.7vw + 0.78rem, 1.18rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
}

.kk-hero__desc p,
.kk-hero__desc ul {
  font-style: italic;
}

.kk-hero__desc strong,
.kk-hero__desc b {
  font-weight: 700;
  color: #fff;
}

.kk-hero .resaltar {
  background-color: #aa8e58;
}

.kk-hero__desc ul,
.kk-hero__desc ol {
  margin: 0.5em 0 0.75em;
  padding-left: 1.25em;
}

.kk-hero__desc li {
  margin: 0.25em 0;
}

.kk-hero__desc ul {
  list-style: none;
  padding-left: 0;
}

.kk-hero__desc ul li {
  position: relative;
  padding-left: 1.7em;
}

.kk-hero__desc ul li::before {
  content: "";
  position: absolute;
  top: 0.12em;
  left: 0;
  width: 1.35em;
  height: 1.35em;
  background-image: url("../img/icono-check.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.kk-hero__cta {
  display: inline-block;
  box-sizing: border-box;
  margin-top: 0.25em;
  margin-bottom: clamp(30px, 2.4vw, 52px);
  padding: 0.65em 1.35em;
  border-radius: 999px;
  border: none;
  background-color: var(--kk-hero-cta-bg);
  color: #fff !important;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.9rem, 0.4vw + 0.78rem, 1.08rem);
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.kk-hero__cta:hover,
.kk-hero__cta:focus {
  background-color: var(--kk-hero-cta-bg-hover);
  color: #fff !important;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.kk-hero__content .kk-hero__cta {
  float: right;
  margin-right: calc(-1 * clamp(62px, 9vw, 92px));
}

.kk-hero .kk-hero__slides.mkdf-owl-slider .owl-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  margin: 0 !important;
  padding: 0 12px;
  text-align: center;
  z-index: 3;
}

.kk-hero .kk-hero__slides .owl-dots .owl-dot {
  cursor: pointer;
}

.kk-hero .kk-hero__slides .owl-dots .owl-dot span {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.kk-hero .kk-hero__slides .owl-dots .owl-dot.active span,
.kk-hero .kk-hero__slides .owl-dots .owl-dot:hover span {
  background: #fff;
}

.kk-hero .kk-hero__slides .owl-nav .owl-prev,
.kk-hero .kk-hero__slides .owl-nav .owl-next {
  z-index: 3;
  cursor: pointer;
  background-color: rgba(41, 55, 80, 0.75);
  color: #fff;
}

.kk-hero .kk-hero__slides .owl-nav .owl-prev > span:before,
.kk-hero .kk-hero__slides .owl-nav .owl-next > span:before {
  color: #fff;
}

@media only screen and (max-width: 768px) {
  .kk-hero {
    /* svh-based floor: old 560px + 140vw forced ~920px at 768w — far taller than phone screens */
    --kk-mobile-min: clamp(260px, 52svh, 480px);
    min-height: max(var(--kk-mobile-min), var(--kk-hero-unified-slide-h));
  }

  .kk-hero__slides-wrap,
  .kk-hero .kk-hero__slides.mkdf-owl-slider,
  .kk-hero .kk-hero__slides .owl-stage-outer,
  .kk-hero .kk-hero__slides .owl-stage,
  .kk-hero .kk-hero__slides .owl-item,
  .kk-hero .kk-hero__slides .owl-item > .kk-hero__slide {
    min-height: max(var(--kk-mobile-min), var(--kk-hero-unified-slide-h));
  }

  .kk-hero__slide {
    min-height: max(var(--kk-mobile-min), var(--kk-hero-unified-slide-h));
    padding-bottom: 32px;
  }

  .kk-hero__slide .kk-hero__inner {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-top: clamp(48px, 10svh, 72px);
    padding-right: clamp(16px, 3vw, 32px);
    padding-bottom: 0px;
    padding-left: clamp(16px, 3vw, 32px);
  }

  .kk-hero__slide--person-right .kk-hero__inner {
    flex-direction: column;
  }

  .kk-hero__person {
    display: none;
  }

  .kk-hero__content {
    text-align: left;
    padding-right: 0;
    padding-bottom: 28px;
  }

  /* Wrapper size must not drive h2 via 1em past h1 — h1/h2 each get explicit clamps */
  .kk-hero__title {
    font-size: 1rem;
  }

  .kk-hero__title h1 {
    text-align: center;
    font-size: clamp(1.28rem, 5.8vw + 0.35rem, 2.15rem);
  }

  .kk-hero__title h2 {
    text-align: center;
    font-size: clamp(1.02rem, 4.2vw + 0.28rem, 1.55rem);
  }

  .kk-hero__cta {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-bottom: clamp(30px, 4vw, 44px);
    padding: 0.52em 1.05em;
    font-size: clamp(0.8rem, 0.6vw + 0.62rem, 0.92rem);
  }

  .kk-hero__content .kk-hero__cta {
    margin-right: 0;
  }

  .kk-hero__logo {
    top: -0.1em;
    right: 0;
    height: 36px;
  }

  .kk-hero .kk-hero__slides.mkdf-owl-slider .owl-dots {
    bottom: 12px;
    margin: 0 !important;
  }
}