.panel-single-header {
  --h: auto;
  --bg: #fff;
  --text-main: color-mix(in srgb, var(--color-subtle) 95%, transparent);
  --text-soft: color-mix(in srgb, var(--color-subtle) 70%, transparent);
  --text-muted: color-mix(in srgb, var(--color-subtle) 45%, transparent);
  --border: color-mix(in srgb, var(--color-subtle) 20%, transparent);
  padding: 1rem 0 3rem 0;
  background-color: var(--bg);
  height: var(--h);
  display: flex;
  align-items: center;

  @media (width >=992px) {
    --h: 56rem;
    padding: 4.5rem 0 3rem;
  }
}

.panel-single-header__inner {
  max-width: 1312px;
  margin: 0 auto;
  align-items: center;
}

.panel-single-header__layout {
  --gap: 1rem;
  display: grid;
  grid-template: 'header' 'image' 'layers' 'metas' 'footer';
  column-gap: var(--gap);

  @media (width >=992px) {
    --gap: 3rem;
    grid-template: 'header image' 'layers image' 'footer metas' / 1fr 1fr;
  }
}

#panel-single-header-header {
  grid-area: header;
}

#panel-single-header-layers {
  grid-area: layers;
}

#panel-single-header-meta {
  grid-area: metas;
}

#panel-single-header-footer {
  grid-area: footer;
}

#panel-single-header-image-section {
  grid-area: image;

  @media (width >=992px) {
    align-self: flex-end;
    margin-bottom: 2rem;
  }
}

.panel-single-header__kicker {
  --mb: 2rem;
  margin-bottom: var(--mb);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm-line);
  color: var(--text-soft);
}

.panel-single-header__kicker-category,
.panel-single-header__kicker-tag {
  display: inline-flex;
  --px: .75rem;
  --py: .25rem;
  padding-inline: var(--px);
  padding-block: var(--py);
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--color-subtle) 10%, transparent);
  color: var(--color-neutral-1);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm-line);
  font-weight: 400;
}

.panel-single-header__title {
  margin: 0 0 1rem;
  color: var(--text-main);
  font-size: var(--text-h1);
  line-height: var(--text-h1-line);
  font-weight: 600;
}

.panel-single-header__description {
  color: var(--text-soft);
  font-size: var(--text-body-md);
  line-height: var(--text-body-md-line);

  @media (width >=992px) {
    padding-right: 6rem;
    font-size: var(--text-body-lg);
    line-height: var(--text-body-lg-line);
  }

  p {
    margin: 0;
  }
}

.panel-single-header__layers {
  --mt: 2rem;
  list-style: none;
  margin-top: var(--mt);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;

  @media (width >=992px) {
    --mt: 4rem;
  }
}

.panel-single-header__layer-item {
  --gap: 1rem;
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
}

.panel-single-header__layer-index {
  --size: 1.75rem;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  background-color: var(--color-neutral-border);
  color: var(--color-neutral-1);
  font-size: var(--text-body-md);
  line-height: 1;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  @media (width >=992px) {
    --size: 2rem;
  }
}

.panel-single-header__layer-text {
  display: flex;
  flex-direction: column;
}

.panel-single-header__layer-name {
  margin: 0;
  color: var(--text-main);
  font-size: var(--text-body-md);
  line-height: var(--text-body-md-line);
  font-weight: 600;
}

.panel-single-header__layer-desc {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-body-md);
  line-height: var(--text-body-md-line);
}

.panel-single-header__footer {
  --mt: 2rem;
  margin-top: var(--mt);

  @media (width >=992px) {
    --mt: 8.25rem;
  }
}

.panel-single-header__cta {
  border-radius: 999px;
  background-color: var(--color-primary);
  color: var(--color-neutral-5);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-line);
  font-weight: 700;
  text-decoration: none;
  padding: 0.9rem 1.6rem;
  width: 100%;

  @media (width >=992px) {
    width: auto;
  }

  &::before {
    background-color: var(--color-black) !important;
  }
}

.panel-single-header__media {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.panel-single-header__image-stage {
  position: relative;
  aspect-ratio: 16 / 10;
}

.panel-single-header__layer-image-index {
  transition: all var(--animation-duration) ease;

  &::after {
    --w: 1px;
    --h: 8px;
    content: "";
    width: var(--w);
    height: var(--h);
    background-color: color-mix(in srgb, var(--color-subtle) 20%, transparent);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

  &:nth-of-type(1) {
    --right: 20%;
    --bottom: 24%;
    right: var(--right);
    bottom: var(--bottom);

    &::after {
      content: none;
    }
  }

  &:nth-of-type(2) {
    --left: 14%;
    --top: 68%;
    left: var(--left);
    top: var(--top);

    &::after {
      --w: 8px;
      --h: 1px;
      left: 100%;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  &:nth-of-type(3) {
    --right: 60%;
    --top: 24%;
    right: var(--right);
    top: var(--top);

  }

  &:nth-of-type(4) {
    --left: 16rem;
    --bottom: 7rem;
    left: var(--left);
    bottom: var(--bottom);
  }
}

.panel-single-header__image-stage--bicapa {
  .panel-single-header__layer-image-index {
    &:nth-of-type(1) {
      --bottom: auto;
      --top: 16%;
      --right: 40%;
      top: var(--top);
    }

    &:nth-of-type(2) {
      --top: 60%;
    }
  }

  &.is-expanded {
    .panel-single-header__layer-image-index {
      &:nth-of-type(2) {
        --top: 70% !important;
      }
    }
  }

}


.panel-single-header__layer-image-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--animation-duration) ease, opacity var(--animation-duration) ease;
  transform: translateY(0);
  /* La primera capa queda por encima y las siguientes van detrás. */
  z-index: 1;

  &:nth-of-type(1) {
    z-index: 3;
  }

  &:nth-of-type(2) {
    z-index: 2;
  }

  &:nth-of-type(3) {
    z-index: 1;
  }
}

.panel-single-header__image-stage.is-expanded {
  .panel-single-header__layer-image-wrap {
    --translate-y: 2rem;

    /* La primera capa sube y las últimas bajan. */
    &:nth-of-type(1) {
      transform: translateY(calc(var(--translate-y) * -1));
    }

    &:nth-of-type(2) {
      transform: translateY(0);
    }

    &:nth-of-type(3) {
      transform: translateY(var(--translate-y));
    }

    &:nth-of-type(4) {
      transform: translateY(calc(var(--translate-y) * 2));
    }
  }

  /* Con dos capas, la segunda es la última: baja. */
  &.panel-single-header__image-stage--bicapa {
    .panel-single-header__layer-image-wrap:nth-of-type(2) {
      transform: translateY(var(--translate-y));
    }
  }

  /* El índice 1 baja y el 3 sube al expandir. */
  .panel-single-header__layer-image-index {
    &:nth-of-type(1) {
      --bottom: 16%;
    }

    &:nth-of-type(2) {
      --top: 60%;
    }

    &:nth-of-type(3) {
      --top: 14%;
    }

    &:nth-of-type(4) {
      --bottom: 7rem;
    }
  }
}

.panel-single-header__layer-image {
  width: 100%;
  height: 100% !important;
  object-fit: contain;
  scale: 1.25;
}

.panel-single-header__layer-image-index {
  --size: 2rem;
  position: absolute;
  width: var(--size);
  height: var(--size);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-body-md);
  border: 1px solid var(--border);
  line-height: var(--text-body-md-line);
  font-weight: 700;
  color: var(--text-main);
  background-color: #fff;
  border-radius: 999px;
  z-index: 10;
}

.panel-single-header__expand {
  --px: 1.25rem;
  --py: .75rem;
  padding-inline: var(--px);
  padding-block: var(--py);
  align-self: flex-end;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-weight: 700;
  background: #fff;
  color: var(--text-main);
  text-transform: lowercase;
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm-line);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  margin-left: auto;
  position: relative;
  z-index: 4;

  &:hover {
    border-color: var(--color-primary);
    background-color: #fff !important;
    color: var(--color-primary);
  }
}

.panel-single-header__expand-icon {
  width: 1rem;
  height: 1rem;
  display: inline-flex;

  svg {
    width: 100%;
    height: 100%;
    display: block;
  }
}

.panel-single-header__meta {
  --mt: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: var(--mt);
  align-items: flex-end;
  text-align: right;
}

.panel-single-header__meta-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.panel-single-header__meta-label {
  color: var(--text-main);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-line);
  font-weight: 600;
}

.panel-single-header__meta-value {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-line);

  a {
    color: var(--text-soft);
    text-decoration: underline;

    &:hover {
      color: var(--color-primary);
    }
  }
}