/* Kactus hero slider (Figma: hero v4, 314:292) */
.k-hero {
  position: relative;
  left: 50%;
  width: 100vw;
  height: 680px;
  margin-left: -50vw;
  overflow: hidden;
}

.k-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}

.k-hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.k-hero__cover {
  position: absolute;
  inset: 0;
  z-index: 1; /* el destello (::before) queda por encima del fondo de color pero DEBAJO de las fotos */
  overflow: hidden;
  background: linear-gradient(180deg, rgba(22, 22, 22, 0.1) 0%, rgba(22, 22, 22, 0.05) 100%);
}

/* Resplandor blanco semitransparente anclado a la DERECHA, que sube y baja en
   diagonal manteniéndose a la derecha (sin cruzar el texto central).
   Figma: hero v4, capa "cover". Solo en el slide activo; respeta reduced-motion. */
.k-hero__cover::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -8%;
  left: auto;
  width: 58%;
  height: 160%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.28) 45%, rgba(255, 255, 255, 0) 70%);
  filter: blur(12px);
  pointer-events: none;
  will-change: transform;
}

.k-hero__slide.is-active .k-hero__cover::before {
  animation: k-hero-glow 5.5s ease-in-out infinite;
}

/* Movimiento sobre todo vertical con leve diagonal; amplitud horizontal pequeña
   para que el foco no invada el centro. */
@keyframes k-hero-glow {
  0%   { transform: translate(5%, -18%); }
  50%  { transform: translate(-3%, 16%); }
  100% { transform: translate(5%, -18%); }
}

@media (prefers-reduced-motion: reduce) {
  .k-hero__slide.is-active .k-hero__cover::before { animation: none; }
}

.k-hero__img {
  position: absolute;
  z-index: 2; /* las fotos por encima del destello */
  object-fit: contain;
  filter: drop-shadow(10px 10px 20px rgba(22, 22, 22, 0.2));
  opacity: 0;
}

.k-hero__img--left {
  top: 190px;
  left: 2.6%;
  width: 20.8%;
  max-width: 400px;
  height: 400px;
  object-position: left top;
  transform: translate(-60px, 20px);
}

.k-hero__img--right {
  top: 180px;
  right: 0;
  width: 20.8%;
  max-width: 400px;
  height: 500px;
  object-position: right center;
  transform: translate(60px, -20px);
}

.is-active .k-hero__img {
  opacity: 0.9;
  transform: translate(0, 0);
  transition: opacity 0.9s ease 0.25s, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s;
}

.k-hero__info {
  position: absolute;
  z-index: 3; /* el texto por encima de fotos y destello */
  top: 220px;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  width: min(920px, 60vw);
  text-align: center;
  transform: translateX(-50%);
}

.k-hero__title,
.k-hero__subtitle {
  width: 100%;
  margin: 0;
  font-family: var(--k-font-title, "Laviossa", serif);
  font-weight: 500;
  color: var(--k-white, #f5f3eb);
  opacity: 0;
  transform: translateY(25px);
}

.k-hero__title {
  font-size: clamp(48px, 4.2vw, 80px);
  line-height: 1.06;
}

.k-hero__subtitle {
  margin-top: 5px;
  font-size: clamp(20px, 1.6vw, 30px);
  line-height: 1.33;
}

.k-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 330px;
  max-width: 100%;
  padding: 10px;
  font-family: var(--k-font-text, "Sweet Sans Pro", sans-serif);
  font-size: 16px;
  line-height: 24px;
  color: var(--k-dark-orange, #934906);
  background: var(--k-white, #f5f3eb);
  border: 1px solid var(--k-dark-orange, #934906);
  opacity: 0;
  transform: translateY(25px);
}

.k-hero__btn:hover {
  color: var(--k-white, #f5f3eb);
  text-decoration: none;
  background: var(--k-dark-orange, #934906);
}

.is-active .k-hero__title,
.is-active .k-hero__subtitle,
.is-active .k-hero__btn {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease 0.15s, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s;
}

.is-active .k-hero__subtitle {
  transition-delay: 0.3s;
}

.is-active .k-hero__btn {
  transition-delay: 0.45s;
}

.k-hero__arrows {
  position: absolute;
  bottom: 30px;
  left: 50%;
  z-index: 2;
  display: flex;
  gap: 40px;
  transform: translateX(-50%);
}

.k-hero__arrow {
  display: inline-flex;
  padding: 0;
  color: #ded5cc;
  cursor: pointer;
  background: none;
  border: none;
}

/* hover: el trazo mantiene el color; se rellena el círculo con soft-brown-30 */
.k-hero__arrow:hover rect {
  fill: var(--k-soft-brown-30, rgba(222, 213, 204, 0.3));
}

.k-hero__slide--red { background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 960' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><g transform='rotate(180 960 480)'><rect width='1920' height='960' fill='url(%23g)'/></g><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(146.82 67.765 -24.721 73.412 451.76 282.35)'><stop stop-color='rgba(255,140,117,1)' offset='0.097'/><stop stop-color='rgba(242,99,82,1)' offset='0.249'/><stop stop-color='rgba(229,58,46,1)' offset='0.4'/><stop stop-color='rgba(185,29,24,1)' offset='0.75'/><stop stop-color='rgba(164,18,15,1)' offset='0.875'/><stop stop-color='rgba(142,6,6,1)' offset='1'/></radialGradient></defs></svg>"); }
.k-hero__slide--yellow { background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 960' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><g transform='rotate(180 960 480)'><rect width='1920' height='960' fill='url(%23g)'/></g><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(146.82 67.765 -24.721 73.412 451.76 282.35)'><stop stop-color='rgba(240,221,112,1)' offset='0.097'/><stop stop-color='rgba(223,201,79,1)' offset='0.4'/><stop stop-color='rgba(202,173,57,1)' offset='0.575'/><stop stop-color='rgba(182,145,35,1)' offset='0.75'/><stop stop-color='rgba(186,153,19,1)' offset='1'/></radialGradient></defs></svg>"); }
.k-hero__slide--pink { background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 960' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><g transform='rotate(180 960 480)'><rect width='1920' height='960' fill='url(%23g)'/></g><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(146.82 67.765 -24.721 73.412 451.76 282.35)'><stop stop-color='rgba(242,166,196,1)' offset='0.097'/><stop stop-color='rgba(222,127,164,1)' offset='0.249'/><stop stop-color='rgba(201,87,131,1)' offset='0.4'/><stop stop-color='rgba(165,59,119,1)' offset='0.75'/><stop stop-color='rgba(130,35,106,1)' offset='1'/></radialGradient></defs></svg>"); }
.k-hero__slide--orange { background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 960' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><g transform='rotate(180 960 480)'><rect width='1920' height='960' fill='url(%23g)'/></g><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(146.82 67.765 -24.721 73.412 451.76 282.35)'><stop stop-color='rgba(255,225,133,1)' offset='0.097'/><stop stop-color='rgba(255,184,82,1)' offset='0.249'/><stop stop-color='rgba(255,164,57,1)' offset='0.324'/><stop stop-color='rgba(255,143,31,1)' offset='0.4'/><stop stop-color='rgba(203,104,17,1)' offset='0.75'/><stop stop-color='rgba(147,73,6,1)' offset='1'/></radialGradient></defs></svg>"); }
.k-hero__slide--turquoise { background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 960' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><g transform='rotate(180 960 480)'><rect width='1920' height='960' fill='url(%23g)'/></g><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(146.82 67.765 -24.721 73.412 451.76 282.35)'><stop stop-color='rgba(139,252,225,1)' offset='0.097'/><stop stop-color='rgba(84,218,189,1)' offset='0.249'/><stop stop-color='rgba(56,200,171,1)' offset='0.324'/><stop stop-color='rgba(28,183,153,1)' offset='0.4'/><stop stop-color='rgba(21,127,106,1)' offset='0.75'/><stop stop-color='rgba(20,100,86,1)' offset='0.875'/><stop stop-color='rgba(19,73,66,1)' offset='1'/></radialGradient></defs></svg>"); }
.k-hero__slide--blue { background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 960' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><g transform='rotate(180 960 480)'><rect width='1920' height='960' fill='url(%23g)'/></g><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(146.82 67.765 -24.721 73.412 451.76 282.35)'><stop stop-color='rgba(118,219,242,1)' offset='0.097'/><stop stop-color='rgba(78,190,215,1)' offset='0.249'/><stop stop-color='rgba(38,160,188,1)' offset='0.4'/><stop stop-color='rgba(29,110,144,1)' offset='0.75'/><stop stop-color='rgba(35,86,122,1)' offset='0.875'/><stop stop-color='rgba(40,61,99,1)' offset='1'/></radialGradient></defs></svg>"); }
.k-hero__slide--green { background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 960' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><g transform='rotate(180 960 480)'><rect width='1920' height='960' fill='url(%23g)'/></g><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(146.82 67.765 -24.721 73.412 451.76 282.35)'><stop stop-color='rgba(168,214,110,1)' offset='0.097'/><stop stop-color='rgba(124,177,73,1)' offset='0.249'/><stop stop-color='rgba(99,147,47,1)' offset='0.4'/><stop stop-color='rgba(60,105,30,1)' offset='0.75'/><stop stop-color='rgba(44,84,25,1)' offset='0.875'/><stop stop-color='rgba(29,76,25,1)' offset='1'/></radialGradient></defs></svg>"); }

/* Mobile hero (Figma 542:15090): 350px, below header */
@media (max-width: 767px) {
  .k-hero {
    height: 350px;
  }

  /* En móvil no se muestran las imágenes del hero (Figma móvil) */
  .k-hero__img {
    display: none;
  }

  .k-hero__info {
    top: 74px;
    gap: 20px;
    width: calc(100% - 30px);
  }

  .k-hero__title {
    font-size: 34px;
    line-height: 40px;
  }

  .k-hero__subtitle {
    margin-top: 5px;
    font-size: 18px;
    line-height: 26px;
  }

  .k-hero__btn {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 20px;
  }

  .k-hero__arrows {
    bottom: 20px;
    gap: 25px;
  }

  .k-hero__arrow svg {
    width: 26px;
    height: 26px;
  }
}