/* Capa editorial 2026 para landings comerciales y páginas de confirmación. */
body.commercial-landing,
body.typ-page {
  --cr-ink: #102a33;
  --cr-teal: #00afa5;
  --cr-mint: #63d7ca;
  --cr-cream: #f4f1eb;
  --cr-paper: #fffefa;
  background: var(--cr-cream);
  color: var(--cr-ink);
}

body.commercial-landing .lp-nav,
body.typ-page .lp-nav {
  background: var(--cr-paper);
  border: 0;
  position: relative;
}

body.commercial-landing .nav-in,
body.typ-page .nav-in {
  min-height: 92px;
}

body.commercial-landing .lp-nav.sobre-oscuro,
body.typ-page .lp-nav.sobre-oscuro {
  background: var(--cr-ink);
}

body.commercial-landing .lp-hero,
body.typ-page .lp-hero {
  margin: 0 auto 1.25rem;
  width: min(calc(100% - 32px), 1480px);
  border-radius: 0 0 42px 42px;
  overflow: hidden;
  background:
    radial-gradient(circle at 91% 12%, rgba(99, 215, 202, .22), transparent 30%),
    var(--cr-paper);
}

body.commercial-landing .lp-hero.dark,
body.typ-page .lp-hero.dark {
  background:
    radial-gradient(circle at 88% 18%, rgba(0, 175, 165, .24), transparent 34%),
    linear-gradient(132deg, #0b2027, #12343b);
}

body.commercial-landing .lp-hero-grid {
  min-height: 680px;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding-block: clamp(4rem, 8vw, 7.5rem);
}

body.commercial-landing .lp-h1 {
  font-size: clamp(2.7rem, 5.5vw, 5.8rem);
  line-height: .98;
  letter-spacing: -.065em;
  max-width: 950px;
}

body.commercial-landing .lp-sub {
  max-width: 680px;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
}

body.commercial-landing .lp-media {
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.commercial-landing .lp-media img {
  width: 100%;
  max-height: 650px;
  object-fit: contain;
  filter: drop-shadow(0 32px 40px rgba(16, 42, 51, .16));
}

body.page-linkedin-sales-automation .lp-media > picture:not(.landing-delia-photo) img {
  content: url("Fotos del Sitio Web Delia 2026/Landing Page/Diseño LinkedIn Sales Automation.png");
  border-radius: 24px;
  object-fit: cover;
}

body.commercial-landing .lp-media.has-brand-portrait {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, .52fr);
  gap: 0;
  align-items: end;
  isolation: isolate;
}

body.commercial-landing .lp-media.has-brand-portrait > picture:not(.landing-delia-photo) {
  min-width: 0;
  align-self: center;
}

body.commercial-landing .landing-delia-photo {
  position: relative;
  z-index: 2;
  display: block;
  margin-left: -24%;
  line-height: 0;
  filter: drop-shadow(0 28px 34px rgba(5, 24, 29, .24));
}

body.commercial-landing .landing-delia-photo img {
  width: 100%;
  max-height: 530px;
  object-fit: contain;
  object-position: center bottom;
  filter: none;
}

body.commercial-landing .lp-sec {
  width: min(calc(100% - 32px), 1480px);
  margin: 1.25rem auto;
  padding-block: clamp(5rem, 8vw, 8.5rem);
  border-radius: 36px;
  background: var(--cr-paper);
}

body.commercial-landing .lp-sec.sand {
  background: #eae4da;
}

body.commercial-landing .lp-sec h2 {
  font-size: clamp(2.25rem, 4.2vw, 4.7rem);
  line-height: 1.04;
  letter-spacing: -.055em;
  max-width: 980px;
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

body.commercial-landing .lp-sec.center h2 {
  margin-inline: auto;
}

.cr-section-number {
  display: block;
  margin-bottom: 1rem;
  color: var(--cr-teal);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.commercial-landing .lp-checks,
body.commercial-landing .lp-steps,
body.commercial-landing .lp-benefits {
  gap: 1rem;
}

body.commercial-landing .lp-checks li,
body.commercial-landing .lp-step,
body.commercial-landing .lp-benefit {
  border: 1px solid rgba(16, 42, 51, .08);
  border-radius: 20px;
  background: rgba(255, 255, 255, .74);
  padding: 1.35rem 1.45rem;
  box-shadow: none;
}

body.commercial-landing .lp-checks.cols,
body.commercial-landing .lp-steps.cols {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.commercial-landing .lp-extra {
  display: none;
}

body.commercial-landing .is-expanded .lp-extra {
  display: flex;
}

.cr-expand {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 1.5rem;
  padding: .85rem 1.35rem;
  border: 1px solid rgba(16, 42, 51, .22);
  border-radius: 999px;
  background: transparent;
  color: var(--cr-ink);
  font: 700 .9rem/1 var(--font);
  cursor: pointer;
}

body.commercial-landing .lp-price {
  max-width: 700px;
  border-radius: 30px;
  border: 1px solid rgba(16, 42, 51, .09);
  box-shadow: 0 34px 80px -50px rgba(16, 42, 51, .55);
}

body.commercial-landing .lp-close {
  width: min(calc(100% - 32px), 1480px);
  margin: 1.25rem auto;
  border-radius: 36px;
  background: linear-gradient(125deg, #0b2027, #12434a);
}

body.commercial-landing .btn,
body.typ-page .btn {
  border-radius: 999px;
  box-shadow: 0 16px 34px -20px rgba(0, 175, 165, .8);
}

body.typ-page .lp-hero {
  min-height: 570px;
  display: grid;
  align-items: center;
}

body.typ-page .lp-hero-grid {
  max-width: 940px;
  text-align: center;
  padding-block: clamp(5rem, 10vw, 8rem);
}

body.typ-page .lp-hero-grid > div {
  margin-inline: auto;
}

body.typ-page .lp-h1 {
  font-size: clamp(2.5rem, 5.7vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.055em;
}

body.typ-page .lp-actions {
  justify-content: center;
}

.typ-status {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  max-width: 640px;
  margin: 2rem auto 0;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(16, 42, 51, .1);
  border-radius: 18px;
  background: rgba(255, 255, 255, .76);
  color: var(--cr-ink);
  text-align: left;
}

.lp-hero.dark .typ-status {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.typ-status-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--cr-teal);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
}

.typ-status strong,
.typ-status span {
  display: block;
}

.typ-status span {
  margin-top: .2rem;
  font-size: .88rem;
  opacity: .76;
}

body.typ-page .lp-sec {
  width: min(calc(100% - 32px), 1120px);
  margin: 1.25rem auto;
  padding-block: clamp(4rem, 7vw, 6.5rem);
  border-radius: 32px;
  background: var(--cr-paper);
}

body.typ-page .lp-sec.sand {
  background: #eae4da;
}

body.typ-page .lp-sec h2 {
  font-size: clamp(2rem, 4vw, 3.6rem);
  letter-spacing: -.045em;
}

body.typ-page .typ-upsell {
  display: none;
}

.cr-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin: 1.5rem 0;
}

.cr-social a {
  padding: .55rem .85rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  opacity: .8;
}

@media (max-width: 920px) {
  body.commercial-landing .lp-hero-grid {
    min-height: auto;
  }

  body.commercial-landing .lp-checks.cols,
  body.commercial-landing .lp-steps.cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.commercial-landing .lp-media.has-brand-portrait {
    max-width: 620px;
    grid-template-columns: minmax(0, 1fr) minmax(150px, .48fr);
  }
}

@media (max-width: 640px) {
  body.commercial-landing .lp-hero,
  body.typ-page .lp-hero,
  body.commercial-landing .lp-sec,
  body.typ-page .lp-sec,
  body.commercial-landing .lp-close {
    width: calc(100% - 16px);
    border-radius: 24px;
  }

  body.commercial-landing .nav-in,
  body.typ-page .nav-in {
    min-height: 76px;
  }

  body.commercial-landing .lp-h1,
  body.typ-page .lp-h1 {
    font-size: clamp(2.2rem, 12vw, 3.5rem);
  }

  body.commercial-landing .lp-checks.cols,
  body.commercial-landing .lp-steps.cols {
    grid-template-columns: 1fr;
  }

  .typ-status {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .typ-status-mark {
    margin-inline: auto;
  }

  body.commercial-landing .lp-media.has-brand-portrait {
    grid-template-columns: minmax(0, 1fr) minmax(125px, .44fr);
  }

  body.commercial-landing .landing-delia-photo {
    margin-left: -32%;
  }
}