/* =========================================================
   WELEDA
   PROMOCIÓN FINALIZADA
   ========================================================= */

:root {
  --finalizada-white: #ffffff;
  --finalizada-black: #000000;
  --finalizada-green: #0b4535;
}

/* =========================================================
   DOCUMENTO
   ========================================================= */

html {
  margin: 0;
  padding: 0;

  background: var(--finalizada-black);
}

body {
  margin: 0;
  padding: 0;

  min-width: 320px;

  background: var(--finalizada-black);

  font-family: "Sculpin Variable", Arial, Helvetica, sans-serif;
}

/* =========================================================
   LANDING
   ========================================================= */

.promocion-finalizada {
  position: sticky;

  top: 0;

  z-index: 1;

  width: 100%;

  height: 100vh;
  height: 100svh;

  min-height: 650px;

  overflow: hidden;

  isolation: isolate;

  background-image: url("../../img/landing/bg_img.png");

  background-repeat: no-repeat;
  background-position: center 45%;
  background-size: cover;
}

.promocion-finalizada::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  background: linear-gradient(
    to bottom,
    rgba(20, 0, 0, 0.30) 0%,
    rgba(20, 0, 0, 0.33) 55%,
    rgba(20, 0, 0, 0.40) 100%
  );

  pointer-events: none;
}

/* =========================================================
   HEADER
   ========================================================= */

.promocion-finalizada .landing__header {
  position: absolute;

  top: 20px;
  left: 50%;

  z-index: 20;

  transform: translateX(-50%);

  display: flex;

  width: min(1440px, calc(100% - 72px));

  height: 80px;

  padding: 0 20px;

  justify-content: center;
  align-items: center;

  background: #ffffff;
}

.promocion-finalizada .landing__logo {
  display: block;

  width: 240px;
  height: auto;

  max-height: 58px;

  object-fit: contain;
}

/* =========================================================
   CONTENIDO PRINCIPAL
   ========================================================= */

.promocion-finalizada__content {
  position: relative;

  z-index: 2;

  width: min(1270px, calc(100% - 80px));

  height: 100%;

  margin: 0 auto;

  padding: clamp(135px, 15vh, 170px) 0 clamp(40px, 6vh, 65px);

  display: grid;

  grid-template-columns:
    minmax(400px, 1fr)
    minmax(500px, 0.95fr);

  align-items: center;

  gap: clamp(50px, 6vw, 90px);
}

/* =========================================================
   VISUAL
   ========================================================= */

.promocion-finalizada__visual {
  min-width: 0;

  display: flex;

  justify-content: flex-end;
  align-items: center;
}

.promocion-finalizada__image {
  display: block;

  width: min(100%, 600px);

  height: auto;

  max-height: calc(100svh - 180px);

  object-fit: contain;
}

/* =========================================================
   COPY
   ========================================================= */

.promocion-finalizada__copy {
  width: 100%;

  max-width: 650px;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;
}

.promocion-finalizada__eyebrow {
  margin: 0 0 12px;

  color: var(--finalizada-white);

  text-align: left;

  text-shadow: 0 0 20px rgba(0, 0, 0, 0.45);

  font-family: "Sculpin Variable", Arial, Helvetica, sans-serif;

  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;

  letter-spacing: -0.4px;
}

/* =========================================================
   TÍTULO
   ========================================================= */

.promocion-finalizada__title {
  margin: 0;

  color: #bdbdbd;

  background: linear-gradient(
    270deg,
    #777575 0%,
    #969696 32.21%,
    #d9d9d9 72.6%,
    #969696 100%
  );

  background-clip: text;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-align: left;

  font-family: "Sculpin Variable", Arial, Helvetica, sans-serif;

  font-size: 72px;

  font-style: normal;

  font-weight: 700;

  line-height: 112%;

  letter-spacing: -2.16px;
}

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

.promocion-finalizada__text {
  width: 100%;

  max-width: 610px;

  margin: clamp(38px, 5vh, 54px) 0 0;

  color: var(--finalizada-white);

  text-align: left;

  text-shadow: 0 0 20px rgba(0, 0, 0, 0.58);

  font-family: "Sculpin Variable", Arial, Helvetica, sans-serif;

  font-size: 23px;

  font-style: normal;

  font-weight: 400;

  line-height: 125%;
}

.promocion-finalizada__text p {
  margin: 0;
}

.promocion-finalizada__text p + p {
  margin-top: 24px;
}

.promocion-finalizada__thanks {
  font-weight: 700;
}

/* =========================================================
   DESKTOP GRANDE
   ========================================================= */

@media (min-width: 1600px) {
  .promocion-finalizada__content {
    width: min(1350px, calc(100% - 100px));

    grid-template-columns:
      minmax(500px, 1fr)
      minmax(560px, 0.95fr);
  }

  .promocion-finalizada__image {
    width: min(100%, 650px);
  }
}

/* =========================================================
   DESKTOP CON POCA ALTURA
   ========================================================= */

@media (min-width: 901px) and (max-height: 820px) {
  .promocion-finalizada .landing__header {
    top: 15px;

    height: 70px;
  }

  .promocion-finalizada .landing__logo {
    width: 215px;

    max-height: 50px;
  }

  .promocion-finalizada__content {
    padding: 105px 0 25px;
  }

  .promocion-finalizada__image {
    max-height: calc(100svh - 125px);
  }

  .promocion-finalizada__eyebrow {
    font-size: 17px;
  }

  .promocion-finalizada__title {
    font-size: 58px;
  }

  .promocion-finalizada__text {
    margin-top: 30px;

    font-size: 20px;
  }

  .promocion-finalizada__text p + p {
    margin-top: 18px;
  }
}

/* =========================================================
   TABLET HORIZONTAL
   ========================================================= */

@media (max-width: 1180px) {
  .promocion-finalizada__content {
    width: calc(100% - 60px);

    grid-template-columns:
      minmax(350px, 0.95fr)
      minmax(430px, 1.05fr);

    gap: 42px;
  }

  .promocion-finalizada__image {
    width: min(100%, 520px);
  }

  .promocion-finalizada__title {
    font-size: clamp(54px, 6vw, 66px);
  }

  .promocion-finalizada__text {
    font-size: clamp(20px, 2.2vw, 23px);
  }
}

/* =========================================================
   TABLET VERTICAL
   ========================================================= */

@media (max-width: 900px) {
  .promocion-finalizada {
    position: relative;

    height: auto;

    min-height: 100svh;

    overflow: visible;

    background-position: center center;
  }

  .promocion-finalizada .landing__header {
    top: 16px;

    width: calc(100% - 32px);

    height: 64px;

    padding: 0 16px;
  }

  .promocion-finalizada .landing__logo {
    width: min(210px, 65vw);

    max-height: 48px;
  }

  .promocion-finalizada__content {
    width: min(calc(100% - 40px), 650px);

    height: auto;

    min-height: 100svh;

    padding: 112px 0 60px;

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

    align-content: start;

    gap: 28px;
  }

  .promocion-finalizada__visual {
    justify-content: center;
  }

  .promocion-finalizada__image {
    width: min(430px, 80vw);

    max-height: 350px;
  }

  .promocion-finalizada__copy {
    min-width: 0;

    max-width: 600px;

    margin: 0 auto;

    align-items: center;

    text-align: center;
  }

  .promocion-finalizada__eyebrow {
    text-align: center;
  }

  .promocion-finalizada__title {
    max-width: 100%;

    text-align: center;

    font-size: clamp(48px, 8vw, 62px);
  }

  .promocion-finalizada__text {
    max-width: 560px;

    margin-top: 28px;

    text-align: center;

    font-size: clamp(19px, 3vw, 22px);
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {
  .promocion-finalizada {
    position: relative;

    height: auto;

    min-height: 100svh;

    overflow: visible;

    background-image: url("../../img/landing/bg_img_mobile.png");

    background-repeat: no-repeat;

    background-position: center top;

    background-size: cover;
  }

  .promocion-finalizada::before {
    background: rgba(20, 0, 0, 0.30);
  }

  .promocion-finalizada .landing__header {
    top: 16px;

    width: calc(100% - 32px);

    height: 64px;

    padding: 0 16px;
  }

  .promocion-finalizada .landing__logo {
    width: min(210px, 65vw);

    max-height: 48px;
  }

  .promocion-finalizada__content {
    width: calc(100% - 32px);

    min-height: 100svh;

    margin: 0 auto;

    padding: 104px 0 44px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 20px;
  }

  .promocion-finalizada__visual {
    width: 100%;

    justify-content: center;
  }

  .promocion-finalizada__image {
    width: min(315px, 78vw);

    max-height: 290px;
  }

  .promocion-finalizada__copy {
    align-items: center;

    text-align: center;
  }

  .promocion-finalizada__eyebrow {
    margin-bottom: 10px;

    text-align: center;

    font-size: 16px;
  }

  .promocion-finalizada__title {
    text-align: center;

    font-size: clamp(40px, 12vw, 52px);

    line-height: 108%;

    letter-spacing: -1.2px;
  }

  .promocion-finalizada__text {
    margin-top: 24px;

    text-align: center;

    font-size: 18px;

    line-height: 128%;
  }

  .promocion-finalizada__text p + p {
    margin-top: 18px;
  }
}