/* ==========================================================
   GRUPO EMPRESARIAL KAMANA
   HOME EXPERIENCE STRIP V1

   Inspirado en la franja inferior del hero
   de la propuesta visual aprobada.
   ========================================================== */

.home-experience-strip {
  position: relative;

  z-index: 3;

  padding:
    20px 0;

  overflow: hidden;

  border-top:
    1px solid
    rgba(255,255,255,.08);

  border-bottom:
    1px solid
    rgba(255,255,255,.08);

  background:
    linear-gradient(
      180deg,
      #101214 0%,
      #0b0d0f 100%
    ) !important;

  box-shadow:
    none !important;
}


.home-experience-strip::before,
.home-experience-strip::after {
  position: absolute;

  width: 210px;
  height: 210px;

  border-radius: 50%;

  content: "";

  filter:
    blur(80px);

  opacity: .07;

  pointer-events: none;
}


.home-experience-strip::before {
  top: -110px;
  left: -80px;

  background:
    #ef0f74;
}


.home-experience-strip::after {
  right: -80px;
  bottom: -110px;

  background:
    #0879d8;
}


.home-experience-grid {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap:
    16px;
}


/* ==========================================================
   CARDS
   ========================================================== */

.home-experience-card {
  --feature-accent:
    #ef0f74;

  --feature-glow:
    rgba(239,15,116,.18);

  position: relative;

  display: grid;

  grid-template-columns:
    68px 1fr 38px;

  min-width: 0;

  min-height:
    128px;

  align-items:
    center;

  gap:
    15px;

  padding:
    20px 17px;

  overflow:
    hidden;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--feature-accent) 46%,
      rgba(255,255,255,.12)
    );

  border-radius:
    17px;

  background:
    radial-gradient(
      circle at 15% 50%,
      var(--feature-glow),
      transparent 38%
    ),

    linear-gradient(
      135deg,
      #171a1d 0%,
      #111315 70%,
      #0b0d0f 100%
    );

  color:
    #fff;

  text-decoration:
    none;

  box-shadow:
    0 14px 34px
    rgba(0,0,0,.26),

    inset 0 1px 0
    rgba(255,255,255,.035);

  transition:
    transform 190ms ease,
    border-color 190ms ease,
    box-shadow 190ms ease;
}


.home-experience-card:hover {
  transform:
    translateY(-3px);

  border-color:
    var(--feature-accent);

  box-shadow:
    0 20px 42px
    rgba(0,0,0,.34),

    0 0 28px
    var(--feature-glow);
}


/* ==========================================================
   COLOR POR TARJETA
   ========================================================== */

.home-experience-card--pink {
  --feature-accent:
    #ef0f74;

  --feature-glow:
    rgba(239,15,116,.22);
}


.home-experience-card--yellow {
  --feature-accent:
    #ffbd0a;

  --feature-glow:
    rgba(255,189,10,.20);
}


.home-experience-card--blue {
  --feature-accent:
    #078ee9;

  --feature-glow:
    rgba(7,142,233,.20);
}


.home-experience-card--cream {
  --feature-accent:
    #efd4b8;

  --feature-glow:
    rgba(239,212,184,.14);
}


/* ==========================================================
   NUMERACIÓN
   ========================================================== */

.home-experience-number {
  position: absolute;

  top: 12px;
  right: 14px;

  color:
    rgba(255,255,255,.38);

  font-size:
    .67rem;

  font-weight:
    700;

  letter-spacing:
    .08em;
}


/* ==========================================================
   ICONOS
   ========================================================== */

.home-experience-icon {
  position: relative;

  z-index: 2;

  display: grid;

  width: 62px;
  height: 62px;

  place-items:
    center;

  border-radius:
    50%;

  background:
    var(--feature-accent);

  color:
    #fff;

  box-shadow:
    0 0 28px
    var(--feature-glow);
}


.home-experience-card--yellow
.home-experience-icon,

.home-experience-card--cream
.home-experience-icon {
  color:
    #151515;
}


.home-experience-icon svg {
  width:
    31px;

  height:
    31px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


/* ==========================================================
   TEXTO
   ========================================================== */

.home-experience-copy {
  position: relative;

  z-index: 2;

  display: flex;

  min-width: 0;

  flex-direction:
    column;

  gap:
    7px;
}


.home-experience-copy strong {
  color:
    #fff !important;

  font-family:
    var(--sans);

  font-size:
    .98rem;

  font-weight:
    700;

  line-height:
    1.2;
}


.home-experience-copy small {
  max-width:
    220px;

  color:
    rgba(255,255,255,.69);

  font-size:
    .82rem;

  font-weight:
    400;

  line-height:
    1.45;
}


/* ==========================================================
   FLECHA
   ========================================================== */

.home-experience-arrow {
  position: relative;

  z-index: 2;

  display: grid;

  width: 34px;
  height: 34px;

  place-items:
    center;

  align-self:
    end;

  border:
    1px solid
    var(--feature-accent);

  border-radius:
    50%;

  color:
    #fff;

  font-size:
    1rem;

  font-weight:
    500;

  transition:
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}


.home-experience-card:hover
.home-experience-arrow {
  transform:
    translateX(2px);

  background:
    var(--feature-accent);

  color:
    #101214;
}


/* ==========================================================
   LÍNEA INFERIOR
   ========================================================== */

.home-experience-card::after {
  position: absolute;

  bottom: 7px;
  left: 18px;

  width:
    110px;

  height:
    3px;

  border-radius:
    999px;

  background:
    var(--feature-accent);

  content: "";

  box-shadow:
    0 0 16px
    var(--feature-glow);
}


/* ==========================================================
   HOJAS DECORATIVAS
   ========================================================== */

.home-experience-decoration {
  position: absolute;

  z-index: 1;

  right: -14px;
  bottom: -22px;

  width:
    92px;

  height:
    92px;

  color:
    var(--feature-accent);

  opacity:
    .12;

  pointer-events:
    none;
}


.home-experience-decoration
svg {
  width:
    100%;

  height:
    100%;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.15;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


/* ==========================================================
   EVITAR ESTILOS GENERALES DEL BODY DARK
   ========================================================== */

main#contenido
> section.home-experience-strip {
  padding-top:
    20px !important;

  padding-bottom:
    20px !important;

  border-top:
    1px solid
    rgba(255,255,255,.08);

  background:
    linear-gradient(
      180deg,
      #101214,
      #0b0d0f
    );

  box-shadow:
    none;
}


main#contenido
> section.home-experience-strip
:is(
  h2,
  h3,
  h4
) {
  color:
    #fff;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (
  max-width: 1150px
) {

  .home-experience-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}


@media (
  max-width: 620px
) {

  .home-experience-strip,
  main#contenido
  > section.home-experience-strip {
    padding-top:
      14px !important;

    padding-bottom:
      14px !important;
  }


  .home-experience-grid {
    grid-template-columns:
      1fr;

    gap:
      11px;
  }


  .home-experience-card {
    grid-template-columns:
      58px 1fr 34px;

    min-height:
      112px;

    padding:
      16px;
  }


  .home-experience-icon {
    width:
      54px;

    height:
      54px;
  }


  .home-experience-icon svg {
    width:
      27px;

    height:
      27px;
  }


  .home-experience-card::after {
    width:
      86px;
  }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (
  prefers-reduced-motion:
  reduce
) {

  .home-experience-card,
  .home-experience-arrow {
    transition:
      none;
  }
}