/* =========================================================
   05 · LANDING PAGES
   BLOQUE 01 · HERO
========================================================= */

.lp-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(35, 186, 98, .08), transparent 32%),
    #f7f8f6;
  padding: 145px 24px 70px;
}

.lp-hero__inner {
  position: relative;
  z-index: 5;
  width: min(1180px, 100%);
  margin: 0 auto;
  text-align: center;
}


/* palabra gigante de fondo */

.lp-hero__bg-word {
  position: absolute;
  z-index: 0;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(120px, 18vw, 310px);
  font-weight: 800;
  letter-spacing: -.07em;
  color: rgba(20, 27, 24, .025);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}


/* eyebrow */

.lp-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 25px;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6c746f;
}

.lp-hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: #f28c28;
}


/* título */

.lp-hero__title {
  margin: 0 auto;
  max-width: 950px;

  font-size: clamp(55px, 7.2vw, 108px);
  line-height: .91;
  font-weight: 700;
  letter-spacing: -.055em;
  color: #151b18;
}

.lp-hero__title span {
  display: block;
}

.lp-hero__title-accent {
  color: #138b50;
}


/* texto */

.lp-hero__lead {
  max-width: 760px;
  margin: 32px auto 0;

  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -.02em;
  color: #29332e;
}

.lp-hero__text {
  max-width: 700px;
  margin: 15px auto 0;

  font-size: 15px;
  line-height: 1.7;
  color: #758079;
}


/* botones */

.lp-hero__actions {
  margin-top: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.lp-hero__button {
  display: inline-flex;
  align-items: center;
  gap: 18px;

  min-height: 54px;
  padding: 0 25px;

  border-radius: 999px;
  background: #151b18;
  color: #fff;

  text-decoration: none;
  font-size: 14px;
  font-weight: 600;

  transition:
    transform .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.lp-hero__button span {
  font-size: 20px;
  transition: transform .25s ease;
}

.lp-hero__button:hover {
  transform: translateY(-2px);
  background: #138b50;
  box-shadow: 0 15px 35px rgba(19, 139, 80, .18);
}

.lp-hero__button:hover span {
  transform: translateX(4px);
}

.lp-hero__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  color: #4f5954;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

.lp-hero__link span {
  color: #f28c28;
  transition: transform .25s ease;
}

.lp-hero__link:hover span {
  transform: translateY(4px);
}


/* =========================================================
   RUTA DE CONVERSIÓN
========================================================= */

.lp-flow {
  position: relative;
  margin: 70px auto 0;
  width: min(980px, 100%);

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.lp-flow__line {
  position: absolute;
  z-index: 0;
  top: 31px;
  left: 11%;
  right: 11%;

  height: 1px;
  background: #d5ddd8;
  overflow: visible;
}

.lp-flow__runner {
  position: absolute;
  top: 50%;
  left: 0;

  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f28c28;
  box-shadow:
    0 0 0 5px rgba(242, 140, 40, .12),
    0 0 18px rgba(242, 140, 40, .4);

  transform: translate(-50%, -50%);
  animation: lpRunner 5.5s ease-in-out infinite;
}

.lp-flow__item {
  position: relative;
  z-index: 2;

  min-height: 108px;
  padding: 18px 10px 16px;

  display: flex;
  flex-direction: column;
  align-items: center;

  border-radius: 18px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(29, 40, 34, .07);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lp-flow__number {
  width: 27px;
  height: 27px;

  display: grid;
  place-items: center;

  margin-bottom: 10px;

  border-radius: 50%;
  background: #f7f8f6;
  border: 1px solid #cfd8d2;

  font-size: 10px;
  font-weight: 700;
  color: #718078;
}

.lp-flow__item strong {
  font-size: 12px;
  letter-spacing: .12em;
  color: #202824;
}

.lp-flow__item small {
  margin-top: 5px;
  font-size: 11px;
  color: #8a938e;
}

.lp-flow__item--active {
  background: #138b50;
  border-color: #138b50;
  box-shadow: 0 18px 45px rgba(19, 139, 80, .17);
}

.lp-flow__item--active .lp-flow__number {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.24);
  color: #fff;
}

.lp-flow__item--active strong,
.lp-flow__item--active small {
  color: #fff;
}


/* animación */

@keyframes lpRunner {
  0%,
  10% {
    left: 0%;
  }

  30% {
    left: 33.33%;
  }

  50% {
    left: 66.66%;
  }

  70%,
  88% {
    left: 100%;
    background: #138b50;
    box-shadow:
      0 0 0 6px rgba(19, 139, 80, .12),
      0 0 20px rgba(19, 139, 80, .42);
  }

  100% {
    left: 0%;
  }
}


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

@media (max-width: 800px) {

  .lp-hero {
    min-height: auto;
    padding: 125px 20px 55px;
  }

  .lp-hero__title {
    font-size: clamp(49px, 14vw, 75px);
  }

  .lp-hero__lead {
    margin-top: 25px;
    font-size: 20px;
  }

  .lp-hero__text {
    font-size: 14px;
  }

  .lp-flow {
    margin-top: 50px;
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 450px;
  }

  .lp-flow__line {
    top: 52px;
    bottom: 52px;
    left: 31px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .lp-flow__runner {
    display: none;
  }

  .lp-flow__item {
    min-height: 78px;
    padding: 14px 18px 14px 65px;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
  }

  .lp-flow__number {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }

  .lp-flow__item strong {
    font-size: 12px;
  }

  .lp-flow__item small {
    font-size: 11px;
  }

  .lp-hero__bg-word {
    top: 28%;
    font-size: 30vw;
    transform: translate(-50%, -50%) rotate(-90deg);
  }
}
/* =========================================================
   05 · LANDING PAGES
   BLOQUE 01 · HERO
========================================================= */

.lp-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(35, 186, 98, .08), transparent 32%),
    #f7f8f6;
  padding: 145px 24px 70px;
}

.lp-hero__inner {
  position: relative;
  z-index: 5;
  width: min(1180px, 100%);
  margin: 0 auto;
  text-align: center;
}


/* palabra gigante de fondo */

.lp-hero__bg-word {
  position: absolute;
  z-index: 0;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(120px, 18vw, 310px);
  font-weight: 800;
  letter-spacing: -.07em;
  color: rgba(20, 27, 24, .025);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}


/* eyebrow */

.lp-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 25px;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6c746f;
}

.lp-hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: #f28c28;
}


/* título */

.lp-hero__title {
  margin: 0 auto;
  max-width: 950px;

  font-size: clamp(55px, 7.2vw, 108px);
  line-height: .91;
  font-weight: 700;
  letter-spacing: -.055em;
  color: #151b18;
}

.lp-hero__title span {
  display: block;
}

.lp-hero__title-accent {
  color: #138b50;
}


/* texto */

.lp-hero__lead {
  max-width: 760px;
  margin: 32px auto 0;

  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -.02em;
  color: #29332e;
}

.lp-hero__text {
  max-width: 700px;
  margin: 15px auto 0;

  font-size: 15px;
  line-height: 1.7;
  color: #758079;
}


/* botones */

.lp-hero__actions {
  margin-top: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.lp-hero__button {
  display: inline-flex;
  align-items: center;
  gap: 18px;

  min-height: 54px;
  padding: 0 25px;

  border-radius: 999px;
  background: #151b18;
  color: #fff;

  text-decoration: none;
  font-size: 14px;
  font-weight: 600;

  transition:
    transform .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.lp-hero__button span {
  font-size: 20px;
  transition: transform .25s ease;
}

.lp-hero__button:hover {
  transform: translateY(-2px);
  background: #138b50;
  box-shadow: 0 15px 35px rgba(19, 139, 80, .18);
}

.lp-hero__button:hover span {
  transform: translateX(4px);
}

.lp-hero__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  color: #4f5954;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

.lp-hero__link span {
  color: #f28c28;
  transition: transform .25s ease;
}

.lp-hero__link:hover span {
  transform: translateY(4px);
}


/* =========================================================
   RUTA DE CONVERSIÓN
========================================================= */

.lp-flow {
  position: relative;
  margin: 70px auto 0;
  width: min(980px, 100%);

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.lp-flow__line {
  position: absolute;
  z-index: 0;
  top: 31px;
  left: 11%;
  right: 11%;

  height: 1px;
  background: #d5ddd8;
  overflow: visible;
}

.lp-flow__runner {
  position: absolute;
  top: 50%;
  left: 0;

  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f28c28;
  box-shadow:
    0 0 0 5px rgba(242, 140, 40, .12),
    0 0 18px rgba(242, 140, 40, .4);

  transform: translate(-50%, -50%);
  animation: lpRunner 5.5s ease-in-out infinite;
}

.lp-flow__item {
  position: relative;
  z-index: 2;

  min-height: 108px;
  padding: 18px 10px 16px;

  display: flex;
  flex-direction: column;
  align-items: center;

  border-radius: 18px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(29, 40, 34, .07);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lp-flow__number {
  width: 27px;
  height: 27px;

  display: grid;
  place-items: center;

  margin-bottom: 10px;

  border-radius: 50%;
  background: #f7f8f6;
  border: 1px solid #cfd8d2;

  font-size: 10px;
  font-weight: 700;
  color: #718078;
}

.lp-flow__item strong {
  font-size: 12px;
  letter-spacing: .12em;
  color: #202824;
}

.lp-flow__item small {
  margin-top: 5px;
  font-size: 11px;
  color: #8a938e;
}

.lp-flow__item--active {
  background: #138b50;
  border-color: #138b50;
  box-shadow: 0 18px 45px rgba(19, 139, 80, .17);
}

.lp-flow__item--active .lp-flow__number {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.24);
  color: #fff;
}

.lp-flow__item--active strong,
.lp-flow__item--active small {
  color: #fff;
}


/* animación */

@keyframes lpRunner {
  0%,
  10% {
    left: 0%;
  }

  30% {
    left: 33.33%;
  }

  50% {
    left: 66.66%;
  }

  70%,
  88% {
    left: 100%;
    background: #138b50;
    box-shadow:
      0 0 0 6px rgba(19, 139, 80, .12),
      0 0 20px rgba(19, 139, 80, .42);
  }

  100% {
    left: 0%;
  }
}


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

@media (max-width: 800px) {

  .lp-hero {
    min-height: auto;
    padding: 125px 20px 55px;
  }

  .lp-hero__title {
    font-size: clamp(49px, 14vw, 75px);
  }

  .lp-hero__lead {
    margin-top: 25px;
    font-size: 20px;
  }

  .lp-hero__text {
    font-size: 14px;
  }

  .lp-flow {
    margin-top: 50px;
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 450px;
  }

  .lp-flow__line {
    top: 52px;
    bottom: 52px;
    left: 31px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .lp-flow__runner {
    display: none;
  }

  .lp-flow__item {
    min-height: 78px;
    padding: 14px 18px 14px 65px;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
  }

  .lp-flow__number {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }

  .lp-flow__item strong {
    font-size: 12px;
  }

  .lp-flow__item small {
    font-size: 11px;
  }

  .lp-hero__bg-word {
    top: 28%;
    font-size: 30vw;
    transform: translate(-50%, -50%) rotate(-90deg);
  }
}
/* =========================================================
   ANIMACIÓN DE ENTRADA DEL HERO
========================================================= */

.lp-hero__eyebrow,
.lp-hero__title span,
.lp-hero__lead,
.lp-hero__text,
.lp-hero__actions,
.lp-flow__item {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(7px);
}

.lp-hero.is-loaded .lp-hero__eyebrow {
  animation: lpReveal .65s ease forwards .15s;
}

.lp-hero.is-loaded .lp-hero__title span:nth-child(1) {
  animation: lpRevealTitle .8s cubic-bezier(.2,.8,.2,1) forwards .30s;
}

.lp-hero.is-loaded .lp-hero__title span:nth-child(2) {
  animation: lpRevealTitle .8s cubic-bezier(.2,.8,.2,1) forwards .46s;
}

.lp-hero.is-loaded .lp-hero__title span:nth-child(3) {
  animation: lpRevealTitle .8s cubic-bezier(.2,.8,.2,1) forwards .62s;
}

.lp-hero.is-loaded .lp-hero__lead {
  animation: lpReveal .7s ease forwards .85s;
}

.lp-hero.is-loaded .lp-hero__text {
  animation: lpReveal .7s ease forwards 1s;
}

.lp-hero.is-loaded .lp-hero__actions {
  animation: lpReveal .7s ease forwards 1.15s;
}

.lp-hero.is-loaded .lp-flow__item:nth-child(2) {
  animation: lpBlockReveal .65s cubic-bezier(.2,.8,.2,1) forwards 1.35s;
}

.lp-hero.is-loaded .lp-flow__item:nth-child(3) {
  animation: lpBlockReveal .65s cubic-bezier(.2,.8,.2,1) forwards 1.48s;
}

.lp-hero.is-loaded .lp-flow__item:nth-child(4) {
  animation: lpBlockReveal .65s cubic-bezier(.2,.8,.2,1) forwards 1.61s;
}

.lp-hero.is-loaded .lp-flow__item:nth-child(5) {
  animation: lpBlockReveal .65s cubic-bezier(.2,.8,.2,1) forwards 1.74s;
}

@keyframes lpReveal {
  from {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes lpRevealTitle {
  from {
    opacity: 0;
    transform: translateY(42px) scale(.985);
    filter: blur(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes lpBlockReveal {
  from {
    opacity: 0;
    transform: translateY(32px) scale(.96);
    filter: blur(7px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
.lp-hero__bg-word {
  opacity: 0;
}

.lp-hero.is-loaded .lp-hero__bg-word {
  animation: lpBgWord 1.8s ease forwards .35s;
}

@keyframes lpBgWord {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(.96);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}


/* =========================================================
   05 · LANDING PAGES
   BLOQUE 02 · DIFERENCIA
========================================================= */

.lp-difference {
  position: relative;
  overflow: hidden;
  padding: 120px 24px;
  background: #151b18;
}

.lp-difference__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}


/* =========================================================
   INTRO
========================================================= */

.lp-difference__intro {
  max-width: 850px;
  margin-bottom: 65px;
}

.lp-difference__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 22px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  color: #9ca7a1;
}

.lp-difference__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: #f28c28;
}

.lp-difference__title {
  margin: 0;

  font-size: clamp(42px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 650;

  color: #fff;
}

.lp-difference__title span {
  color: #7f8a84;
}

.lp-difference__lead {
  margin: 28px 0 0;

  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.2;
  font-weight: 600;

  color: #36b66d;
}

.lp-difference__text {
  max-width: 720px;
  margin: 15px 0 0;

  font-size: 17px;
  line-height: 1.8;

  color: #aab4ae;
}


/* =========================================================
   COMPARACIÓN
========================================================= */

.lp-difference__comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.lp-difference__card {
  position: relative;
  min-height: 420px;

  padding: 36px;

  border-radius: 28px;

  transition:
    transform .35s ease,
    border-color .35s ease,
    background .35s ease;
}

.lp-difference__card:hover {
  transform: translateY(-5px);
}


/* WEB */

.lp-difference__card--web {
  background: #1c2420;
  border: 1px solid rgba(255,255,255,.07);
}

.lp-difference__card--web:hover {
  border-color: rgba(255,255,255,.13);
}


/* LANDING */

.lp-difference__card--landing {
  background:
    radial-gradient(
      circle at 85% 10%,
      rgba(54,182,109,.18),
      transparent 35%
    ),
    #1d2822;

  border: 1px solid rgba(54,182,109,.24);
}

.lp-difference__card--landing:hover {
  border-color: rgba(54,182,109,.45);
}


/* encabezado tarjeta */

.lp-difference__card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lp-difference__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .17em;
  color: #939e98;
}

.lp-difference__symbol {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.1);

  color: #fff;
  font-size: 18px;
}


/* textos */

.lp-difference__card h3 {
  margin: 65px 0 14px;

  font-size: clamp(31px, 3vw, 45px);
  line-height: 1;
  letter-spacing: -.035em;

  color: #fff;
}

.lp-difference__card p {
  max-width: 470px;
  margin: 0;

  font-size: 15px;
  line-height: 1.75;

  color: #9da8a2;
}


/* =========================================================
   MUCHOS CAMINOS
========================================================= */

.lp-paths {
  margin-top: 42px;

  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lp-paths span {
  padding: 9px 13px;

  border-radius: 999px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);

  font-size: 11px;
  color: #a7b0ab;
}


/* =========================================================
   UN SOLO OBJETIVO
========================================================= */

.lp-focus {
  position: relative;

  height: 55px;

  margin-top: 42px;

  display: flex;
  align-items: center;
}

.lp-focus__dot {
  position: relative;
  z-index: 2;

  width: 9px;
  height: 9px;

  border-radius: 50%;
  background: #f28c28;

  box-shadow:
    0 0 0 6px rgba(242,140,40,.09);
}

.lp-focus__line {
  flex: 1;
  height: 1px;

  margin: 0 14px;

  background:
    linear-gradient(
      90deg,
      #f28c28 0%,
      #36b66d 100%
    );

  transform-origin: left center;
}

.lp-focus__goal {
  padding: 13px 20px;

  border-radius: 999px;

  background: #36b66d;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15em;

  color: #fff;
}


/* =========================================================
   FRASE FINAL
========================================================= */

.lp-difference__statement {
  margin-top: 65px;

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
}

.lp-difference__statement span,
.lp-difference__statement strong {
  font-size: 11px;
  letter-spacing: .18em;
}

.lp-difference__statement span {
  color: #747e78;
}

.lp-difference__statement strong {
  color: #36b66d;
}

.lp-difference__statement-line {
  height: 1px;
  background: rgba(255,255,255,.09);
}


/* =========================================================
   ANIMACIÓN
========================================================= */

/* Solo ocultamos para animar cuando JS está funcionando */

/* =========================================================
   BLOQUE 02 · ESTADO SEGURO
   El contenido siempre permanece visible
========================================================= */

.lp-difference__intro,
.lp-difference__card,
.lp-difference__statement {
  opacity: 1;
  transform: translateY(0);
}

@keyframes lpDiffReveal {

  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}

@keyframes lpLineGrow {

  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }

}


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

@media (max-width: 850px) {

  .lp-difference {
    padding: 85px 20px;
  }

  .lp-difference__intro {
    margin-bottom: 45px;
  }

  .lp-difference__comparison {
    grid-template-columns: 1fr;
  }

  .lp-difference__card {
    min-height: auto;
    padding: 30px;
  }

  .lp-difference__card h3 {
    margin-top: 45px;
  }

  .lp-difference__statement {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .lp-difference__statement-line {
    width: 100%;
  }

}
/* =========================================================
   05 · LANDING PAGES
   BLOQUE 03 · OBJETIVOS
========================================================= */

.lp-goals {
  position: relative;
  padding: 125px 24px;
  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #f7f8f6 0%,
      #ffffff 100%
    );
}

.lp-goals__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}


/* =========================================================
   CABECERA
========================================================= */

.lp-goals__head {
  max-width: 900px;
  margin-bottom: 65px;
}

.lp-goals__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 20px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;

  color: #777f7b;
}

.lp-goals__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: #f28c28;
}

.lp-goals__title {
  margin: 0;

  font-size: clamp(43px, 5.5vw, 78px);
  line-height: 1.02;
  letter-spacing: -.05em;

  color: #151b18;
}

.lp-goals__title span {
  display: block;
  color: #148b50;
}

.lp-goals__intro {
  max-width: 690px;

  margin: 25px 0 0;

  font-size: 17px;
  line-height: 1.75;

  color: #707a74;
}


/* =========================================================
   GRID
========================================================= */

.lp-goals__grid {
  display: grid;

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

  gap: 16px;
}


/* =========================================================
   TARJETAS
========================================================= */

.lp-goal {
  position: relative;

  min-height: 340px;

  padding: 32px;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border-radius: 28px;

  background: #f3f5f3;

  border:
    1px solid rgba(20, 30, 25, .06);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}

.lp-goal:hover {
  transform: translateY(-5px);

  box-shadow:
    0 22px 55px rgba(18, 28, 23, .08);
}


/* grande */

.lp-goal--large {
  min-height: 410px;

  background:
    linear-gradient(
      145deg,
      #161d19 0%,
      #202b25 100%
    );

  color: #fff;
}


/* verde */

.lp-goal--green {
  background:
    linear-gradient(
      145deg,
      #12874d 0%,
      #19a15d 100%
    );

  color: #fff;
}


/* ancho completo */

.lp-goal--wide {
  grid-column: 1 / -1;

  min-height: 270px;

  display: grid;

  grid-template-columns:
    minmax(0, 1.3fr)
    minmax(300px, .7fr);

  align-items: center;

  gap: 50px;

  background: #fff;

  border:
    1px solid #dfe5e1;
}


/* =========================================================
   NÚMERO
========================================================= */

.lp-goal__number {
  position: absolute;

  top: 27px;
  right: 30px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;

  color: #9aa39e;
}

.lp-goal--large .lp-goal__number,
.lp-goal--green .lp-goal__number {
  color: rgba(255,255,255,.55);
}


/* =========================================================
   ICONO
========================================================= */

.lp-goal__icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  margin-bottom: auto;

  border-radius: 50%;

  background: #fff;

  border:
    1px solid rgba(20,30,25,.08);

  font-size: 19px;
  font-weight: 600;

  color: #151b18;
}

.lp-goal--large .lp-goal__icon {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.10);
  color: #fff;
}

.lp-goal--green .lp-goal__icon {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}


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

.lp-goal__content {
  margin-top: 45px;
}

.lp-goal__label {
  display: block;

  margin-bottom: 12px;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;

  color: #87918b;
}

.lp-goal--large .lp-goal__label,
.lp-goal--green .lp-goal__label {
  color: rgba(255,255,255,.60);
}

.lp-goal h3 {
  max-width: 470px;

  margin: 0;

  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.06;
  letter-spacing: -.035em;

  color: #151b18;
}

.lp-goal--large h3,
.lp-goal--green h3 {
  color: #fff;
}

.lp-goal p {
  max-width: 520px;

  margin: 16px 0 0;

  font-size: 14px;
  line-height: 1.75;

  color: #707b75;
}

.lp-goal--large p,
.lp-goal--green p {
  color: rgba(255,255,255,.72);
}


/* =========================================================
   RESULTADO TARJETA 01
========================================================= */

.lp-goal__result {
  margin-top: 35px;

  display: flex;
  align-items: center;

  gap: 14px;
}

.lp-goal__result span,
.lp-goal__result strong {
  font-size: 10px;
  letter-spacing: .17em;
}

.lp-goal__result span {
  color: rgba(255,255,255,.48);
}

.lp-goal__result i {
  font-style: normal;

  color: #f28c28;
}

.lp-goal__result strong {
  padding: 9px 14px;

  border-radius: 999px;

  background: #148b50;

  color: #fff;
}


/* =========================================================
   CAMPAÑA FINAL
========================================================= */

.lp-goal__campaign {
  display: flex;
  align-items: center;

  gap: 12px;
}

.lp-goal__campaign span,
.lp-goal__campaign strong {
  white-space: nowrap;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

.lp-goal__campaign span {
  color: #7d8881;
}

.lp-goal__campaign strong {
  color: #148b50;
}

.lp-goal__campaign-line {
  flex: 1;

  min-width: 40px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      #d9dfdc,
      #148b50
    );
}


/* =========================================================
   ANIMACIÓN
   El bloque siempre es visible sin JS
========================================================= */

.lp-goals__head,
.lp-goal {
  opacity: 1;
  transform: translateY(0);
}

@keyframes lpGoalReveal {

  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


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

@media (max-width: 850px) {

  .lp-goals {
    padding: 85px 20px;
  }

  .lp-goals__head {
    margin-bottom: 45px;
  }

  .lp-goals__grid {
    grid-template-columns: 1fr;
  }

  .lp-goal {
    min-height: 310px;
    padding: 28px;
  }

  .lp-goal--wide {
    grid-column: auto;

    display: flex;

    min-height: 340px;

    gap: 35px;
  }

  .lp-goal__campaign {
    width: 100%;

    margin-top: auto;
  }

}

@media (max-width: 520px) {

  .lp-goal__campaign {
    flex-wrap: wrap;
  }

  .lp-goal__campaign-line {
    min-width: 25px;
  }

}
/* =========================================================
   05 · LANDING PAGES
   BLOQUE 04 · ANATOMÍA
========================================================= */

.lp-anatomy {
  position: relative;
  overflow: hidden;
  padding: 125px 24px;
  background: #eef2ef;
}

.lp-anatomy__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}


/* =========================================================
   CABECERA
========================================================= */

.lp-anatomy__head {
  max-width: 880px;
  margin-bottom: 70px;
}

.lp-anatomy__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  color: #717b75;
}

.lp-anatomy__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: #f28c28;
}

.lp-anatomy__title {
  margin: 0;

  font-size: clamp(42px, 5.3vw, 76px);
  line-height: 1.03;
  letter-spacing: -.05em;

  color: #151b18;
}

.lp-anatomy__title span {
  display: block;
  color: #148b50;
}

.lp-anatomy__intro {
  max-width: 700px;
  margin: 24px 0 0;

  font-size: 17px;
  line-height: 1.75;
  color: #707a74;
}


/* =========================================================
   LAYOUT
========================================================= */

.lp-anatomy__layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 70px;
  align-items: center;
}


/* =========================================================
   LISTA
========================================================= */

.lp-anatomy__list {
  display: flex;
  flex-direction: column;
}

.lp-anatomy__item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;

  padding: 27px 0;

  border-bottom: 1px solid #d8dfda;
}

.lp-anatomy__item:first-child {
  padding-top: 0;
}

.lp-anatomy__number {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 50%;
  border: 1px solid #c9d1cc;

  font-size: 10px;
  font-weight: 700;
  color: #7b857f;

  transition:
    background .3s ease,
    color .3s ease,
    border-color .3s ease,
    transform .3s ease;
}

.lp-anatomy__item:hover .lp-anatomy__number {
  background: #148b50;
  border-color: #148b50;
  color: #fff;
  transform: scale(1.08);
}

.lp-anatomy__label {
  display: block;
  margin-bottom: 7px;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  color: #9aa39e;
}

.lp-anatomy__item h3 {
  margin: 0;

  font-size: clamp(22px, 2vw, 29px);
  line-height: 1.15;
  letter-spacing: -.025em;

  color: #18201c;
}

.lp-anatomy__item p {
  max-width: 470px;
  margin: 10px 0 0;

  font-size: 14px;
  line-height: 1.7;
  color: #717b75;
}


/* =========================================================
   MOCKUP
========================================================= */

.lp-anatomy__visual {
  position: relative;
  min-height: 620px;

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

.lp-anatomy__screen {
  position: relative;
  z-index: 2;

  width: min(520px, 90%);
  min-height: 560px;

  overflow: hidden;

  border-radius: 30px;

  background:
    radial-gradient(
      circle at 80% 15%,
      rgba(20,139,80,.16),
      transparent 35%
    ),
    #151b18;

  box-shadow:
    0 35px 80px rgba(18,28,23,.18);

  transform: rotate(2deg);

  transition: transform .45s ease;
}

.lp-anatomy__visual:hover .lp-anatomy__screen {
  transform: rotate(0deg) translateY(-5px);
}


/* navegador */

.lp-anatomy__browser {
  height: 50px;

  display: flex;
  align-items: center;
  gap: 7px;

  padding: 0 20px;

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

.lp-anatomy__browser span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.20);
}

.lp-anatomy__browser span:first-child {
  background: #f28c28;
}


/* interior */

.lp-anatomy__screen-content {
  padding: 65px 50px 45px;
}

.lp-anatomy__mini-eyebrow {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .17em;
  color: #7f8c85;
}

.lp-anatomy__mock-title {
  margin-top: 18px;

  font-size: clamp(37px, 4vw, 55px);
  line-height: .98;
  letter-spacing: -.05em;

  color: #fff;
}

.lp-anatomy__mock-title strong {
  display: block;
  font-weight: 650;
  color: #36b66d;
}


/* líneas de texto */

.lp-anatomy__mock-text {
  width: 88%;
  height: 8px;
  margin-top: 36px;

  border-radius: 999px;

  background: rgba(255,255,255,.12);
}

.lp-anatomy__mock-text--short {
  width: 62%;
  margin-top: 9px;
}


/* botón mockup */

.lp-anatomy__mock-button {
  width: fit-content;

  margin-top: 35px;
  padding: 15px 19px;

  display: flex;
  align-items: center;
  gap: 18px;

  border-radius: 999px;

  background: #f28c28;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;

  color: #fff;

  box-shadow:
    0 15px 35px rgba(242,140,40,.18);
}

.lp-anatomy__mock-button span {
  font-size: 16px;
}


/* prueba social */

.lp-anatomy__mock-proof {
  margin-top: 70px;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;

  padding-top: 25px;

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

.lp-anatomy__mock-proof div {
  display: flex;
  flex-direction: column;
}

.lp-anatomy__mock-proof strong {
  font-size: 20px;
  color: #fff;
}

.lp-anatomy__mock-proof span {
  margin-top: 4px;

  font-size: 9px;
  letter-spacing: .1em;
  color: #7f8a84;
}


/* =========================================================
   POINTERS
========================================================= */

.lp-anatomy__pointer {
  position: absolute;
  z-index: 4;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 8px 12px;

  border-radius: 999px;

  background: #fff;

  box-shadow:
    0 10px 30px rgba(18,28,23,.10);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;

  color: #59625d;
}

.lp-anatomy__pointer span {
  width: 7px;
  height: 7px;

  border-radius: 50%;
  background: #148b50;

  box-shadow:
    0 0 0 5px rgba(20,139,80,.10);
}

.lp-anatomy__pointer--1 {
  top: 120px;
  left: 0;
}

.lp-anatomy__pointer--2 {
  bottom: 105px;
  left: 8px;
}

.lp-anatomy__pointer--3 {
  top: 340px;
  right: 0;
}

.lp-anatomy__pointer--3 span {
  background: #f28c28;

  box-shadow:
    0 0 0 5px rgba(242,140,40,.10);
}


/* =========================================================
   MOVIMIENTO SUTIL
========================================================= */

@keyframes lpPointerFloat1 {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }

}

@keyframes lpPointerFloat2 {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(7px);
  }

}

.lp-anatomy__pointer--1,
.lp-anatomy__pointer--3 {
  animation: lpPointerFloat1 4.5s ease-in-out infinite;
}

.lp-anatomy__pointer--2 {
  animation: lpPointerFloat2 5s ease-in-out infinite;
}


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

@media (max-width: 950px) {

  .lp-anatomy__layout {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .lp-anatomy__visual {
    min-height: 590px;
  }

}

@media (max-width: 650px) {

  .lp-anatomy {
    padding: 85px 20px;
  }

  .lp-anatomy__head {
    margin-bottom: 50px;
  }

  .lp-anatomy__item {
    grid-template-columns: 42px 1fr;
    gap: 15px;
  }

  .lp-anatomy__visual {
    min-height: auto;
    padding: 20px 0 40px;
  }

  .lp-anatomy__screen {
    width: 100%;
    min-height: 500px;
    transform: none;
  }

  .lp-anatomy__screen-content {
    padding: 55px 30px 35px;
  }

  .lp-anatomy__pointer {
    display: none;
  }

}

/* =========================================================
   05 · LANDING PAGES
   BLOQUE 05 · ECOSISTEMA
========================================================= */

.lp-ecosystem {
  position: relative;
  overflow: hidden;

  padding: 125px 24px;

  background:
    radial-gradient(
      circle at 50% 55%,
      rgba(20,139,80,.12),
      transparent 28%
    ),
    #151b18;
}

.lp-ecosystem__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}


/* =========================================================
   CABECERA
========================================================= */

.lp-ecosystem__head {
  max-width: 900px;
}

.lp-ecosystem__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 20px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;

  color: #8f9a94;
}

.lp-ecosystem__eyebrow::before {
  content: "";

  width: 28px;
  height: 2px;

  background: #f28c28;
}

.lp-ecosystem__title {
  margin: 0;

  font-size: clamp(43px, 5.4vw, 76px);
  line-height: 1.03;
  letter-spacing: -.05em;

  color: #fff;
}

.lp-ecosystem__title span {
  display: block;
  color: #36b66d;
}

.lp-ecosystem__intro {
  max-width: 700px;

  margin: 25px 0 0;

  font-size: 17px;
  line-height: 1.75;

  color: #9ca8a1;
}


/* =========================================================
   ESCENARIO
========================================================= */

.lp-ecosystem__stage {
  position: relative;

  min-height: 720px;

  margin-top: 55px;

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


/* órbitas */

.lp-ecosystem__orbit {
  position: absolute;

  top: 50%;
  left: 50%;

  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.07);

  transform: translate(-50%, -50%);

  pointer-events: none;
}

.lp-ecosystem__orbit--1 {
  width: 520px;
  height: 520px;
}

.lp-ecosystem__orbit--2 {
  width: 700px;
  height: 700px;

  border-style: dashed;

  opacity: .65;
}


/* =========================================================
   CENTRO
========================================================= */

.lp-core {
  position: relative;
  z-index: 5;

  width: 300px;
  height: 300px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 20%,
      rgba(255,255,255,.09),
      transparent 35%
    ),
    #1d2822;

  border: 1px solid rgba(54,182,109,.28);

  box-shadow:
    0 0 0 22px rgba(54,182,109,.025),
    0 35px 90px rgba(0,0,0,.28);

  animation:
    lpCoreFloat 5s ease-in-out infinite;
}

.lp-core__eyebrow {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;

  color: #7d8a82;
}

.lp-core__title {
  margin-top: 12px;

  font-size: 46px;
  line-height: .9;
  letter-spacing: -.06em;

  color: #fff;
}

.lp-core__title span {
  display: block;
  color: #36b66d;
}

.lp-core p {
  max-width: 210px;

  margin: 18px 0 0;

  font-size: 12px;
  line-height: 1.6;

  color: #8d9992;
}

.lp-core__cta {
  margin-top: 20px;

  padding: 11px 16px;

  display: inline-flex;
  align-items: center;
  gap: 12px;

  border-radius: 999px;

  background: #f28c28;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;

  color: #fff;
}


/* =========================================================
   CANALES
========================================================= */

.lp-channel {
  position: absolute;
  z-index: 4;

  min-width: 190px;

  padding: 16px 18px;

  display: flex;
  align-items: center;
  gap: 13px;

  border-radius: 18px;

  background: rgba(255,255,255,.055);

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

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 18px 45px rgba(0,0,0,.12);

  transition:
    transform .35s ease,
    border-color .35s ease,
    background .35s ease;
}

.lp-channel:hover {
  transform: translateY(-5px);

  background: rgba(255,255,255,.08);

  border-color: rgba(54,182,109,.30);
}

.lp-channel__icon {
  flex: 0 0 42px;

  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: rgba(255,255,255,.07);

  font-size: 12px;
  font-weight: 800;

  color: #f28c28;
}

.lp-channel strong {
  display: block;

  font-size: 13px;
  color: #fff;
}

.lp-channel small {
  display: block;

  margin-top: 4px;

  font-size: 10px;
  color: #87938c;
}


/* posiciones */

.lp-channel--ads {
  top: 80px;
  left: 110px;
}

.lp-channel--social {
  top: 105px;
  right: 95px;
}

.lp-channel--mail {
  left: 20px;
  top: 330px;
}

.lp-channel--whatsapp {
  right: 20px;
  top: 355px;
}

.lp-channel--form {
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
}

.lp-channel--form:hover {
  transform:
    translateX(-50%)
    translateY(-5px);
}


/* =========================================================
   LÍNEAS DECORATIVAS
========================================================= */

.lp-channel::after {
  content: "";

  position: absolute;

  width: 75px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.06),
      rgba(54,182,109,.45)
    );

  pointer-events: none;
}

.lp-channel--ads::after {
  right: -75px;
  top: 50%;

  transform: rotate(18deg);
  transform-origin: left center;
}

.lp-channel--social::after {
  left: -75px;
  top: 50%;

  transform: rotate(-18deg);
  transform-origin: right center;
}

.lp-channel--mail::after {
  right: -75px;
  top: 50%;
}

.lp-channel--whatsapp::after {
  left: -75px;
  top: 50%;
}

.lp-channel--form::after {
  width: 1px;
  height: 70px;

  top: -70px;
  left: 50%;

  background:
    linear-gradient(
      180deg,
      rgba(54,182,109,.45),
      rgba(255,255,255,.05)
    );
}


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

.lp-ecosystem__bottom {
  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;

  gap: 25px;

  margin-top: 20px;
}

.lp-ecosystem__bottom-line {
  height: 1px;
  background: rgba(255,255,255,.08);
}

.lp-ecosystem__bottom p {
  max-width: 620px;

  margin: 0;

  text-align: center;

  font-size: 14px;
  line-height: 1.7;

  color: #7f8b84;
}

.lp-ecosystem__bottom strong {
  color: #fff;
  font-weight: 500;
}


/* =========================================================
   ANIMACIÓN SEGURA
========================================================= */

@keyframes lpCoreFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

}

.lp-channel--ads {
  animation:
    lpChannelFloatA 5.5s ease-in-out infinite;
}

.lp-channel--social {
  animation:
    lpChannelFloatB 6s ease-in-out infinite;
}

.lp-channel--mail {
  animation:
    lpChannelFloatB 5.2s ease-in-out infinite;
}

.lp-channel--whatsapp {
  animation:
    lpChannelFloatA 6.4s ease-in-out infinite;
}

@keyframes lpChannelFloatA {

  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -6px;
  }

}

@keyframes lpChannelFloatB {

  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 6px;
  }

}


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

@media (max-width: 900px) {

  .lp-ecosystem__stage {
    min-height: auto;

    margin-top: 55px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 12px;
  }

  .lp-ecosystem__orbit {
    display: none;
  }

  .lp-core {
    grid-column: 1 / -1;

    position: relative;

    width: 290px;
    height: 290px;

    margin: 0 auto 25px;
  }

  .lp-channel {
    position: relative;

    top: auto;
    left: auto;
    right: auto;
    bottom: auto;

    min-width: 0;

    width: 100%;

    animation: none;
  }

  .lp-channel::after {
    display: none;
  }

  .lp-channel--form {
    grid-column: 1 / -1;

    width: calc(50% - 6px);

    margin: 0 auto;

    transform: none;
  }

  .lp-channel--form:hover {
    transform: translateY(-5px);
  }

}


@media (max-width: 620px) {

  .lp-ecosystem {
    padding: 85px 20px;
  }

  .lp-ecosystem__stage {
    grid-template-columns: 1fr;
  }

  .lp-core,
  .lp-channel--form {
    grid-column: auto;
  }

  .lp-core {
    width: 270px;
    height: 270px;
  }

  .lp-channel--form {
    width: 100%;
  }

  .lp-ecosystem__bottom {
    grid-template-columns: 1fr;

    margin-top: 45px;
  }

  .lp-ecosystem__bottom-line {
    width: 100%;
  }

}

/* =========================================================
   05 · LANDING PAGES
   BLOQUE 06 · LO QUE CONSTRUIMOS
========================================================= */

.lp-build {
  position: relative;
  overflow: hidden;
  padding: 125px 24px;
  background: #f7f8f6;
}

.lp-build__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}


/* =========================================================
   CABECERA
========================================================= */

.lp-build__head {
  max-width: 930px;
  margin-bottom: 65px;
}

.lp-build__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 20px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;

  color: #727c76;
}

.lp-build__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: #f28c28;
}

.lp-build__title {
  margin: 0;

  font-size: clamp(42px, 5.2vw, 75px);
  line-height: 1.03;
  letter-spacing: -.05em;

  color: #151b18;
}

.lp-build__title span {
  display: block;
  color: #148b50;
}

.lp-build__intro {
  max-width: 720px;

  margin: 25px 0 0;

  font-size: 17px;
  line-height: 1.75;

  color: #707a74;
}


/* =========================================================
   GRID
========================================================= */

.lp-build__grid {
  display: grid;

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

  gap: 16px;
}


/* =========================================================
   TARJETAS
========================================================= */

.lp-build__card {
  position: relative;

  min-height: 310px;

  padding: 30px;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border-radius: 26px;

  background: #fff;

  border:
    1px solid rgba(20,30,25,.07);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.lp-build__card:hover {
  transform: translateY(-5px);

  box-shadow:
    0 22px 60px rgba(18,28,23,.08);

  border-color:
    rgba(20,139,80,.18);
}


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

.lp-build__card--main {
  grid-column: span 2;

  min-height: 390px;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(20,139,80,.15),
      transparent 32%
    ),
    #151b18;

  color: #fff;
}

.lp-build__card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lp-build__status {
  padding: 7px 10px;

  border-radius: 999px;

  background: rgba(54,182,109,.12);

  border: 1px solid rgba(54,182,109,.20);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;

  color: #48c77e;
}


/* =========================================================
   ETIQUETAS
========================================================= */

.lp-build__tag {
  display: block;

  margin-bottom: 14px;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;

  color: #8a948e;
}

.lp-build__card--main .lp-build__tag,
.lp-build__card--dark .lp-build__tag,
.lp-build__card--green .lp-build__tag {
  color: rgba(255,255,255,.55);
}


/* =========================================================
   TEXTOS
========================================================= */

.lp-build__card h3 {
  max-width: 520px;

  margin: auto 0 0;

  font-size: clamp(25px, 2.6vw, 38px);
  line-height: 1.08;
  letter-spacing: -.035em;

  color: #17201b;
}

.lp-build__card h3 span {
  display: block;
  color: #148b50;
}

.lp-build__card p {
  max-width: 520px;

  margin: 15px 0 0;

  font-size: 14px;
  line-height: 1.75;

  color: #707a74;
}

.lp-build__card--main h3,
.lp-build__card--dark h3,
.lp-build__card--green h3 {
  color: #fff;
}

.lp-build__card--main p,
.lp-build__card--dark p,
.lp-build__card--green p {
  color: rgba(255,255,255,.68);
}


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

.lp-build__icon {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  margin-bottom: 42px;

  border-radius: 50%;

  background: #f2f5f2;

  border:
    1px solid rgba(20,30,25,.06);

  font-size: 17px;
  font-weight: 700;

  color: #148b50;
}

.lp-build__card--dark .lp-build__icon,
.lp-build__card--green .lp-build__icon {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.10);
  color: #fff;
}


/* =========================================================
   FLUJO PRINCIPAL
========================================================= */

.lp-build__flow {
  margin-top: 35px;

  display: flex;
  align-items: center;
}

.lp-build__flow-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.lp-build__flow-item small {
  font-size: 9px;
  letter-spacing: .14em;

  color: rgba(255,255,255,.42);
}

.lp-build__flow-item strong {
  font-size: 17px;
  color: #fff;
}

.lp-build__flow-item--active strong {
  color: #36b66d;
}

.lp-build__flow-line {
  flex: 1;

  height: 1px;

  margin: 0 16px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.10),
      rgba(54,182,109,.55)
    );
}


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

.lp-build__devices {
  margin-top: 30px;

  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.lp-build__devices span {
  display: block;

  border:
    1px solid #cfd7d2;

  border-radius: 5px;

  background: #f8faf8;
}

.lp-build__devices span:nth-child(1) {
  width: 54px;
  height: 34px;
}

.lp-build__devices span:nth-child(2) {
  width: 27px;
  height: 38px;
}

.lp-build__devices span:nth-child(3) {
  width: 16px;
  height: 28px;

  border-radius: 4px;
}


/* =========================================================
   DARK / VELOCIDAD
========================================================= */

.lp-build__card--dark {
  background: #1a221e;
}

.lp-build__meter {
  position: relative;

  height: 6px;

  margin-top: 30px;

  overflow: hidden;

  border-radius: 999px;

  background: rgba(255,255,255,.08);
}

.lp-build__meter span {
  display: block;

  width: 88%;
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #f28c28,
      #36b66d
    );

  animation:
    lpBuildMeter 4s ease-in-out infinite;
}

@keyframes lpBuildMeter {

  0%,
  100% {
    width: 72%;
  }

  50% {
    width: 95%;
  }

}


/* =========================================================
   ANALÍTICA
========================================================= */

.lp-build__card--analytics {
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f0f5f1 100%
    );
}

.lp-build__chart {
  height: 100px;

  margin-top: 28px;

  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.lp-build__chart span {
  flex: 1;

  min-width: 10px;

  border-radius:
    5px 5px 2px 2px;

  background:
    linear-gradient(
      180deg,
      #36b66d,
      #148b50
    );

  transform-origin: bottom center;

  animation:
    lpBuildBar 3s ease-in-out infinite alternate;
}

.lp-build__chart span:nth-child(2) {
  animation-delay: .15s;
}

.lp-build__chart span:nth-child(3) {
  animation-delay: .3s;
}

.lp-build__chart span:nth-child(4) {
  animation-delay: .45s;
}

.lp-build__chart span:nth-child(5) {
  animation-delay: .6s;
}

@keyframes lpBuildBar {

  from {
    transform: scaleY(.84);
    opacity: .75;
  }

  to {
    transform: scaleY(1);
    opacity: 1;
  }

}


/* =========================================================
   INTEGRACIONES
========================================================= */

.lp-build__connections {
  position: relative;

  height: 70px;

  margin-top: 30px;
}

.lp-build__connections::before {
  content: "";

  position: absolute;

  left: 20px;
  right: 20px;
  top: 50%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      #dbe1dd,
      #148b50,
      #dbe1dd
    );
}

.lp-build__connections span {
  position: absolute;
  z-index: 2;

  top: 50%;

  width: 22px;
  height: 22px;

  border-radius: 50%;

  background: #fff;

  border:
    2px solid #148b50;

  transform: translateY(-50%);
}

.lp-build__connections span:nth-child(1) {
  left: 10%;
}

.lp-build__connections span:nth-child(2) {
  left: 50%;
  transform:
    translate(-50%, -50%);
}

.lp-build__connections span:nth-child(3) {
  right: 10%;
}


/* =========================================================
   VERDE
========================================================= */

.lp-build__card--green {
  background:
    linear-gradient(
      145deg,
      #12874d,
      #19a15d
    );
}


/* =========================================================
   BLOQUE ANCHO
========================================================= */

.lp-build__card--wide {
  grid-column: 1 / -1;

  min-height: 220px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(420px, .9fr);

  align-items: center;

  gap: 50px;
}

.lp-build__card--wide h3 {
  margin-top: 0;
}

.lp-build__wide-result {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.lp-build__wide-result span,
.lp-build__wide-result strong {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
}

.lp-build__wide-result span {
  color: #727c76;
}

.lp-build__wide-result i {
  font-style: normal;
  color: #f28c28;
}

.lp-build__wide-result strong {
  padding: 10px 13px;

  border-radius: 999px;

  background: #148b50;

  color: #fff;
}


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

@media (max-width: 950px) {

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

  .lp-build__card--main {
    grid-column: 1 / -1;
  }

  .lp-build__card--wide {
    grid-column: 1 / -1;

    grid-template-columns: 1fr;

    gap: 35px;
  }

  .lp-build__wide-result {
    justify-content: flex-start;
  }

}


@media (max-width: 650px) {

  .lp-build {
    padding: 85px 20px;
  }

  .lp-build__head {
    margin-bottom: 45px;
  }

  .lp-build__grid {
    grid-template-columns: 1fr;
  }

  .lp-build__card,
  .lp-build__card--main,
  .lp-build__card--wide {
    grid-column: auto;
  }

  .lp-build__card {
    min-height: 290px;
    padding: 27px;
  }

  .lp-build__card--main {
    min-height: 360px;
  }

  .lp-build__flow {
    gap: 5px;
  }

  .lp-build__flow-line {
    margin: 0 9px;
  }

}

/* =========================================================
   05 · LANDING PAGES
   BLOQUE 07 · OPTIMIZACIÓN
========================================================= */

.lp-optimize {
  position: relative;
  overflow: hidden;
  padding: 125px 24px;
  background: #ffffff;
}

.lp-optimize__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}


/* =========================================================
   CABECERA
========================================================= */

.lp-optimize__head {
  max-width: 930px;
  margin-bottom: 65px;
}

.lp-optimize__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 20px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;

  color: #727c76;
}

.lp-optimize__eyebrow::before {
  content: "";

  width: 28px;
  height: 2px;

  background: #f28c28;
}

.lp-optimize__title {
  margin: 0;

  font-size: clamp(42px, 5.3vw, 76px);
  line-height: 1.03;
  letter-spacing: -.05em;

  color: #151b18;
}

.lp-optimize__title span {
  display: block;
  color: #148b50;
}

.lp-optimize__intro {
  max-width: 740px;

  margin: 25px 0 0;

  font-size: 17px;
  line-height: 1.75;

  color: #707a74;
}


/* =========================================================
   PANEL PRINCIPAL
========================================================= */

.lp-optimize__panel {
  display: grid;
  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(280px, .5fr);

  overflow: hidden;

  border-radius: 30px;

  background: #151b18;

  box-shadow:
    0 30px 80px rgba(18,28,23,.12);
}


/* =========================================================
   MÉTRICA
========================================================= */

.lp-optimize__metric {
  padding: 38px;

  border-right:
    1px solid rgba(255,255,255,.07);
}

.lp-optimize__metric-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.lp-optimize__metric-top span,
.lp-optimize__metric-top strong {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
}

.lp-optimize__metric-top span {
  color: #7d8982;
}

.lp-optimize__metric-top strong {
  color: #36b66d;
}


/* gráfico */

.lp-optimize__chart {
  position: relative;

  height: 300px;

  margin-top: 35px;

  overflow: hidden;
}

.lp-optimize__chart-grid {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.045) 1px,
      transparent 1px
    );

  background-size:
    100% 60px,
    100px 100%;
}

.lp-optimize__line {
  position: absolute;
  inset: 20px 0 10px;

  width: 100%;
  height: calc(100% - 30px);

  overflow: visible;
}

.lp-optimize__line path {
  stroke-dasharray: 1100;
  stroke-dashoffset: 0;

  animation:
    lpOptimizeLine 5s ease-in-out infinite;
}

@keyframes lpOptimizeLine {

  0% {
    stroke-dashoffset: 1100;
  }

  35%,
  85% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 0;
  }

}


/* puntos */

.lp-optimize__point {
  position: absolute;

  width: 10px;
  height: 10px;

  border-radius: 50%;

  background: #36b66d;

  box-shadow:
    0 0 0 6px rgba(54,182,109,.10),
    0 0 20px rgba(54,182,109,.25);

  animation:
    lpOptimizePulse 2.2s ease-in-out infinite;
}

.lp-optimize__point--1 {
  left: 23%;
  bottom: 32%;
}

.lp-optimize__point--2 {
  left: 46%;
  bottom: 43%;
  animation-delay: .3s;
}

.lp-optimize__point--3 {
  left: 68%;
  bottom: 58%;
  animation-delay: .6s;
}

.lp-optimize__point--4 {
  right: 2%;
  top: 19%;
  animation-delay: .9s;
}

@keyframes lpOptimizePulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.22);
  }

}


.lp-optimize__labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 12px;

  margin-top: 15px;
}

.lp-optimize__labels span,
.lp-optimize__labels strong {
  font-size: 9px;
  letter-spacing: .12em;
}

.lp-optimize__labels span {
  color: #657069;
}

.lp-optimize__labels strong {
  color: #36b66d;
  text-align: right;
}


/* =========================================================
   PANEL LATERAL
========================================================= */

.lp-optimize__side {
  padding: 38px 30px;

  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(54,182,109,.12),
      transparent 30%
    );
}

.lp-optimize__side-title span {
  display: block;

  margin-bottom: 7px;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;

  color: #65726b;
}

.lp-optimize__side-title strong {
  font-size: 13px;
  line-height: 1.4;

  color: #fff;
}

.lp-optimize__mini-stat {
  display: grid;

  grid-template-columns:
    40px 1fr;

  gap: 13px;

  margin-top: 25px;
  padding: 17px;

  border-radius: 17px;

  background: rgba(255,255,255,.035);

  border:
    1px solid rgba(255,255,255,.06);
}

.lp-optimize__mini-stat > span {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: rgba(255,255,255,.05);

  font-size: 9px;
  font-weight: 800;

  color: #748079;
}

.lp-optimize__mini-stat strong {
  display: block;

  font-size: 13px;

  color: #fff;
}

.lp-optimize__mini-stat small {
  display: block;

  margin-top: 4px;

  font-size: 10px;
  line-height: 1.5;

  color: #737e78;
}

.lp-optimize__mini-stat--active {
  border-color:
    rgba(54,182,109,.25);

  background:
    rgba(54,182,109,.07);
}

.lp-optimize__mini-stat--active > span {
  background: #148b50;
  color: #fff;
}


/* =========================================================
   PASOS
========================================================= */

.lp-optimize__steps {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;

  margin-top: 18px;
}

.lp-optimize__step {
  position: relative;

  min-height: 300px;

  padding: 27px;

  display: flex;
  flex-direction: column;

  border-radius: 24px;

  background: #f4f6f4;

  border:
    1px solid rgba(20,30,25,.06);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.lp-optimize__step:hover {
  transform: translateY(-5px);

  box-shadow:
    0 20px 50px rgba(18,28,23,.07);
}

.lp-optimize__step-number {
  position: absolute;

  top: 25px;
  right: 25px;

  font-size: 10px;
  font-weight: 800;

  color: #a1aaa5;
}

.lp-optimize__step-icon {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #fff;

  font-size: 17px;

  color: #148b50;
}

.lp-optimize__step h3 {
  margin: auto 0 0;

  font-size: 28px;
  line-height: 1;

  color: #17201b;
}

.lp-optimize__step p {
  margin: 14px 0 0;

  font-size: 13px;
  line-height: 1.7;

  color: #737d77;
}


/* verde */

.lp-optimize__step--green {
  background:
    linear-gradient(
      145deg,
      #12874d,
      #19a15d
    );

  border-color: transparent;
}

.lp-optimize__step--green .lp-optimize__step-number {
  color: rgba(255,255,255,.55);
}

.lp-optimize__step--green .lp-optimize__step-icon {
  background: rgba(255,255,255,.14);
  color: #fff;
}

.lp-optimize__step--green h3 {
  color: #fff;
}

.lp-optimize__step--green p {
  color: rgba(255,255,255,.74);
}


/* =========================================================
   A/B
========================================================= */

.lp-optimize__ab {
  margin-top: 18px;

  padding: 45px;

  display: grid;

  grid-template-columns:
    minmax(0, .8fr)
    minmax(420px, 1.2fr);

  gap: 60px;

  align-items: center;

  border-radius: 30px;

  background: #eef2ef;
}

.lp-optimize__ab-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;

  color: #87918b;
}

.lp-optimize__ab-copy h3 {
  margin: 15px 0 0;

  font-size: clamp(32px, 3.7vw, 50px);
  line-height: 1.03;
  letter-spacing: -.04em;

  color: #151b18;
}

.lp-optimize__ab-copy h3 span {
  display: block;
  color: #148b50;
}

.lp-optimize__ab-copy p {
  max-width: 500px;

  margin: 18px 0 0;

  font-size: 14px;
  line-height: 1.75;

  color: #707a74;
}


/* variantes */

.lp-optimize__ab-test {
  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  gap: 14px;

  align-items: center;
}

.lp-optimize__variant {
  min-height: 260px;

  padding: 22px;

  border-radius: 22px;

  background: #fff;

  border:
    1px solid #dfe5e1;

  box-shadow:
    0 15px 35px rgba(18,28,23,.05);
}

.lp-optimize__variant > span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;

  color: #949d98;
}

.lp-optimize__variant-title {
  width: 75%;
  height: 16px;

  margin-top: 35px;

  border-radius: 999px;

  background: #222b26;
}

.lp-optimize__variant-text {
  width: 90%;
  height: 7px;

  margin-top: 17px;

  border-radius: 999px;

  background: #dde3df;
}

.lp-optimize__variant-button {
  width: fit-content;

  margin-top: 35px;
  padding: 11px 14px;

  border-radius: 999px;

  background: #222b26;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;

  color: #fff;
}

.lp-optimize__variant--active {
  border-color:
    rgba(20,139,80,.25);

  box-shadow:
    0 20px 45px rgba(20,139,80,.09);
}

.lp-optimize__variant--active .lp-optimize__variant-title {
  background: #148b50;
}

.lp-optimize__variant--active .lp-optimize__variant-button {
  background: #f28c28;
}

.lp-optimize__versus {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #151b18;

  font-size: 9px;
  font-weight: 800;

  color: #fff;
}


/* =========================================================
   CIERRE
========================================================= */

.lp-optimize__closing {
  margin-top: 60px;

  display: grid;
  grid-template-columns:
    auto 1fr auto;

  align-items: center;

  gap: 22px;
}

.lp-optimize__closing span,
.lp-optimize__closing strong {
  font-size: 10px;
  letter-spacing: .16em;
}

.lp-optimize__closing span {
  color: #929b96;
}

.lp-optimize__closing strong {
  color: #148b50;
}

.lp-optimize__closing div {
  height: 1px;

  background: #dde3df;
}


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

@media (max-width: 950px) {

  .lp-optimize__panel {
    grid-template-columns: 1fr;
  }

  .lp-optimize__metric {
    border-right: 0;

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

  .lp-optimize__steps {
    grid-template-columns: 1fr 1fr;
  }

  .lp-optimize__ab {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 650px) {

  .lp-optimize {
    padding: 85px 20px;
  }

  .lp-optimize__head {
    margin-bottom: 45px;
  }

  .lp-optimize__metric {
    padding: 28px 22px;
  }

  .lp-optimize__chart {
    height: 230px;
  }

  .lp-optimize__labels {
    grid-template-columns: 1fr 1fr;

    row-gap: 10px;
  }

  .lp-optimize__labels strong {
    text-align: left;
  }

  .lp-optimize__steps {
    grid-template-columns: 1fr;
  }

  .lp-optimize__ab {
    padding: 30px 22px;
  }

  .lp-optimize__ab-test {
    grid-template-columns: 1fr;
  }

  .lp-optimize__versus {
    margin: 0 auto;
  }

  .lp-optimize__closing {
    grid-template-columns: 1fr;

    gap: 10px;
  }

}
/* =========================================================
   05 · LANDING PAGES
   BLOQUE 08 · CIERRE
========================================================= */

.lp-final {
  position: relative;
  overflow: hidden;

  min-height: 850px;

  padding: 135px 24px 70px;

  display: flex;
  align-items: center;

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(20,139,80,.08),
      transparent 30%
    ),
    #f3f5f2;
}

.lp-final__inner {
  position: relative;
  z-index: 3;

  width: min(1180px, 100%);
  margin: 0 auto;
}


/* =========================================================
   PALABRA GIGANTE
========================================================= */

.lp-final__word {
  position: absolute;

  left: 50%;
  bottom: -3%;

  transform: translateX(-50%);

  white-space: nowrap;

  font-size: clamp(130px, 19vw, 330px);
  line-height: .75;
  font-weight: 750;
  letter-spacing: -.075em;

  color: rgba(20,30,25,.025);

  pointer-events: none;
  user-select: none;
}


/* =========================================================
   EYEBROW
========================================================= */

.lp-final__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 40px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;

  color: #78817c;
}

.lp-final__eyebrow::before {
  content: "";

  width: 28px;
  height: 2px;

  background: #f28c28;
}


/* =========================================================
   CABECERA
========================================================= */

.lp-final__top {
  display: grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(250px, .5fr);

  gap: 70px;

  align-items: end;
}

.lp-final__title {
  max-width: 920px;

  margin: 0;

  font-size: clamp(53px, 7vw, 105px);
  line-height: .93;
  letter-spacing: -.06em;
  font-weight: 650;

  color: #151b18;
}

.lp-final__title span {
  display: block;

  color: #148b50;
}


/* =========================================================
   ASIDE
========================================================= */

.lp-final__aside {
  padding-bottom: 8px;
}

.lp-final__aside-number {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  margin-bottom: 18px;

  border-radius: 50%;

  background: #151b18;

  font-size: 9px;
  font-weight: 800;

  color: #fff;
}

.lp-final__aside p {
  margin: 0;

  font-size: 14px;
  line-height: 1.75;

  color: #6d7771;
}


/* =========================================================
   MENSAJE
========================================================= */

.lp-final__statement {
  display: grid;

  grid-template-columns:
    minmax(80px, 220px)
    minmax(0, 650px);

  gap: 28px;

  align-items: start;

  margin-top: 65px;
}

.lp-final__statement-line {
  height: 1px;

  margin-top: 12px;

  background:
    linear-gradient(
      90deg,
      #f28c28,
      #148b50
    );
}

.lp-final__statement p {
  margin: 0;

  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.45;
  letter-spacing: -.02em;

  color: #69736d;
}

.lp-final__statement strong {
  color: #151b18;
  font-weight: 600;
}


/* =========================================================
   GRAN CTA
========================================================= */

.lp-final__action {
  margin-top: 65px;
}

.lp-final__button {
  position: relative;

  width: 100%;
  min-height: 150px;

  padding: 30px 38px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  overflow: hidden;

  border-radius: 30px;

  background: #151b18;

  text-decoration: none;

  box-shadow:
    0 30px 70px rgba(18,28,23,.12);

  transition:
    transform .4s ease,
    box-shadow .4s ease;
}

.lp-final__button::before {
  content: "";

  position: absolute;

  width: 350px;
  height: 350px;

  top: 50%;
  right: -150px;

  transform:
    translateY(-50%)
    scale(.2);

  border-radius: 50%;

  background: #148b50;

  opacity: 0;

  transition:
    transform .55s cubic-bezier(.2,.8,.2,1),
    opacity .4s ease;
}

.lp-final__button:hover {
  transform: translateY(-5px);

  box-shadow:
    0 35px 80px rgba(18,28,23,.18);
}

.lp-final__button:hover::before {
  transform:
    translateY(-50%)
    scale(1);

  opacity: 1;
}


/* texto */

.lp-final__button-text {
  position: relative;
  z-index: 2;

  font-size: clamp(25px, 3.3vw, 47px);
  line-height: 1.05;
  letter-spacing: -.035em;

  color: #fff;
}

.lp-final__button-text strong {
  display: block;

  font-weight: 600;

  color: #36b66d;

  transition: color .4s ease;
}

.lp-final__button:hover
.lp-final__button-text strong {
  color: #fff;
}


/* flecha */

.lp-final__button-arrow {
  position: relative;
  z-index: 2;

  flex: 0 0 72px;

  width: 72px;
  height: 72px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #f28c28;

  font-size: 28px;

  color: #fff;

  transition:
    transform .4s ease,
    background .4s ease;
}

.lp-final__button:hover
.lp-final__button-arrow {
  transform: rotate(45deg);

  background: #fff;

  color: #148b50;
}


/* =========================================================
   PIE DEL BLOQUE
========================================================= */

.lp-final__bottom {
  display: flex;

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

  gap: 30px;

  margin-top: 42px;
}

.lp-final__disciplines {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 10px;
}

.lp-final__disciplines span,
.lp-final__disciplines strong {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
}

.lp-final__disciplines span {
  color: #8b948f;
}

.lp-final__disciplines strong {
  color: #148b50;
}

.lp-final__disciplines i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: #f28c28;
}

.lp-final__brand {
  white-space: nowrap;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;

  color: #858f89;
}

.lp-final__brand span {
  margin: 0 5px;

  color: #f28c28;
}


/* =========================================================
   MOVIMIENTO SUTIL
========================================================= */

.lp-final__button-arrow {
  animation:
    lpFinalArrow 3.5s ease-in-out infinite;
}

@keyframes lpFinalArrow {

  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 4px -4px;
  }

}

.lp-final__button:hover
.lp-final__button-arrow {
  animation: none;
}


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

@media (max-width: 850px) {

  .lp-final {
    min-height: auto;

    padding:
      100px 20px 60px;
  }

  .lp-final__top {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  .lp-final__aside {
    max-width: 500px;
  }

  .lp-final__statement {
    grid-template-columns:
      70px 1fr;

    margin-top: 50px;
  }

}


@media (max-width: 600px) {

  .lp-final__title {
    font-size:
      clamp(48px, 14vw, 72px);
  }

  .lp-final__statement {
    grid-template-columns: 1fr;

    gap: 15px;
  }

  .lp-final__statement-line {
    width: 70px;
  }

  .lp-final__button {
    min-height: 180px;

    padding: 28px;

    align-items: flex-end;
  }

  .lp-final__button-arrow {
    flex-basis: 55px;

    width: 55px;
    height: 55px;

    font-size: 21px;
  }

  .lp-final__bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .lp-final__word {
    bottom: 5%;

    font-size: 35vw;
  }

}