:root {
     --paper: #fbf3df;
     --cream: #fff9ea;
     --green: #98b77b;
     --green-dark: #6f8a4a;
     --sage: #dce9ce;
     --orange: #d76418;
     --coral: #f38970;
     --purple: #7756b7;
     --ink: #20304a;
     --story: #6e552f;
     --soft-line: rgba(110, 85, 47, .15);
     --shadow: 0 24px 70px rgba(72, 55, 29, .14);
 }

 * {
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

 body {
     margin: 0;
     background: var(--paper);
     color: var(--ink);
     font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     overflow-x: hidden
 }

 a {
     text-decoration: none;
     color: inherit
 }

 .story-serif {
     font-family: 'Merriweather', serif;
     color: var(--story)
 }

 .navbar {
     background: rgba(251, 243, 223, .88);
     backdrop-filter: blur(16px);
     border-bottom: 1px solid var(--soft-line)
 }

 .logo {
     font-family: 'Merriweather', serif;
     font-weight: 900;
     color: var(--orange);
     letter-spacing: .2px
 }

 .nav-link {
     font-size: .9rem;
     font-weight: 700;
     color: #44506a !important
 }

 .btn-seed {
     background: var(--green-dark);
     border-color: var(--green-dark);
     color: #fff;
     border-radius: 999px;
     padding: .78rem 1.25rem;
     font-weight: 800;
     box-shadow: 0 12px 22px rgba(111, 138, 74, .2)
 }

 .btn-seed:hover {
     background: #5e773f;
     border-color: #5e773f;
     color: #fff;
     transform: translateY(-1px)
 }

 .btn-cloud {
     background: #fff;
     border: 1px solid var(--soft-line);
     color: var(--ink);
     border-radius: 999px;
     padding: .78rem 1.25rem;
     font-weight: 800;
     box-shadow: 0 12px 28px rgba(72, 55, 29, .08)
 }

 .btn-cloud:hover {
         background: #eee5d1;
    color: var(--ink);
    transform: translateY(-1px);
    border: 1px solid var(--soft-line);
 }

 .section {
     position: relative;
     padding: 5.5rem 0
 }

 .eyebrow {
     font-size: .78rem;
     letter-spacing: .12em;
     text-transform: uppercase;
     font-weight: 900;
     color: var(--orange)
 }

 .hero {
     position: relative;
     min-height: 86vh;
     padding: 4.5rem 0 5rem;
     background: radial-gradient(circle at 82% 18%, rgba(152, 183, 123, .35), transparent 22rem), radial-gradient(circle at 12% 10%, rgba(243, 137, 112, .16), transparent 20rem), linear-gradient(180deg, #fff8e9 0%, #fbf3df 100%);
     overflow: hidden
 }

 .hero:after {
     content: "";
     position: absolute;
     left: -8%;
     right: -8%;
     bottom: -2px;
     height: 90px;
     background: #fff;
     clip-path: polygon(0 35%, 8% 46%, 18% 34%, 28% 48%, 40% 30%, 55% 45%, 68% 31%, 82% 48%, 100% 35%, 100% 100%, 0 100%)
 }

 .hero-title {
     font-family: 'Merriweather', serif;
     font-weight: 900;
     line-height: 1.08;
     color: var(--green-dark);
     font-size: clamp(2.7rem, 7vw, 6rem);
     letter-spacing: -.05em
 }

 .hero-title .accent {
     color: var(--orange)
 }

 .hero-copy {
     font-size: 1.15rem;
     line-height: 1.75;
     max-width: 580px;
     color: #4f5a70
 }

 .hero-stage {
     position: relative;
     min-height: 530px
 }

 .book-card {
     position: absolute;
     background: #fff;
     border: 8px solid #fff;
     border-radius: 30px;
     box-shadow: var(--shadow);
     overflow: hidden;
     transform: rotate(-4deg)
 }

 .book-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block
 }

 .book-main {
     width: min(74vw, 390px);
     aspect-ratio: 1/1;
     right: 7%;
     top: 2%;
     z-index: 3
 }

 .book-small {
     width: 170px;
     aspect-ratio: 1/1;
     left: 6%;
     bottom: 12%;
     z-index: 4;
     transform: rotate(8deg)
 }

 .device {
     position: absolute;
     left: 17%;
     top: 34%;
     width: min(62vw, 330px);
     background: #fff;
     border: 1px solid #fff;
     border-radius: 25px;
     padding: .55rem;
     box-shadow: var(--shadow);
     transform: rotate(3deg);
     z-index: 2
 }

 .device:before {
     content: "";
     position: absolute;
     inset: .35rem;
     /* border: 1px solid rgba(0, 0, 0, .08); */
     border-radius: 24px;
     pointer-events: none
 }

 .device img {
     width: 100%;
     aspect-ratio: 1/1;
     object-fit: cover;
     border-radius: 18px;
     display: block
 }

 .float {
     position: absolute;
     z-index: 1;
     pointer-events: none
 }

 .leaf {
     width: 56px;
     height: 28px;
     background: var(--orange);
     border-radius: 100% 0 100% 0;
     opacity: .7;
     filter: blur(.1px)
 }

 .leaf.one {
     right: 4%;
     top: 5%;
     transform: rotate(28deg)
 }

 .leaf.two {
     left: 4%;
     top: 18%;
     background: #caa049;
     transform: rotate(-20deg)
 }

 .leaf.three {
     right: 18%;
     bottom: 8%;
     background: #e7b328;
     transform: rotate(-18deg)
 }

 .cloud {
     border-radius: 999px;
     background: rgba(255, 255, 255, .7);
     box-shadow: 35px 5px 0 4px rgba(255, 255, 255, .7), -28px 8px 0 2px rgba(255, 255, 255, .7);
     width: 90px;
     height: 28px
 }

 .cloud.one {
     left: 2%;
     bottom: 10%
 }

 .cloud.two {
     right: 0;
     bottom: 22%;
     transform: scale(1.2)
 }

 .wave-white {
     background: #fff
 }

 .wave-sage {
     background: linear-gradient(180deg, #fff 0%, #dff0db 100%)
 }

 .value-card {
     background: #fff;
     border-radius: 30px;
     border: 1px solid var(--soft-line);
     padding: 1.4rem;
     height: 100%;
     box-shadow: 0 18px 50px rgba(72, 55, 29, .07);
     transition: .2s ease
 }

 .value-card:hover {
     transform: translateY(-4px)
 }

 .icon-blob img {
     width: 70px;
     height: 70px;
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.7rem;
     margin-bottom: 1rem
 }

 .blob-yellow {
     background: #fff0b8
 }

 .blob-blue {
     background: #d7efff
 }

 .blob-pink {
     background: #ffe0da
 }

 .blob-purple {
     background: #e9ddff
 }

 .world-panel {
     background: #fff;
     border-radius: 38px;
     padding: 2rem;
     box-shadow: var(--shadow);
     border: 1px solid var(--soft-line)
 }

 .theme-orbit {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1rem
 }

 .theme-card {
     text-align: left;
     background: #fffaf0;
     border: 1px solid var(--soft-line);
     border-radius: 28px;
     padding: 1rem;
     transition: .2s ease
 }

 .theme-card:hover {
     transform: translateY(-4px)
 }

 .theme-cover {
     position: relative;
     aspect-ratio: 1/1;
     width: 100%;
     border-radius: 22px;
     margin-bottom: 0rem;
     overflow: hidden;
     box-shadow: 0 12px 28px rgba(72, 55, 29, .11);
     background: #fff
 }

 .theme-cover img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block
 }

 .theme-cover:after {
     content: "";
     position: absolute;
     inset: auto 0 0 0;
     height: 48%;
     background: linear-gradient(180deg, transparent, rgba(20, 16, 10, .72));
     pointer-events: none
 }

 .theme-cover-copy {
     position: absolute;
     left: .85rem;
     right: .85rem;
     bottom: .78rem;
     z-index: 2;
     color: #fff;
     text-shadow: 0 2px 12px rgba(0, 0, 0, .45)
 }

 .theme-cover-copy strong {
     display: block;
     font-family: 'Merriweather', serif;
     font-size: 1.02rem;
     line-height: 1.18
 }

 .theme-cover-copy small {
     display: block;
     color: rgba(255, 255, 255, .86);
     font-weight: 800;
     margin-top: .25rem
 }

 .theme-card>strong {
     display: block;
     color: var(--ink)
 }

 .theme-card>small {
     display: block;
     color: #687287;
     margin-top: .2rem;
     font-weight: 700
 }

 .style-section {
     background: #fff;
     border-radius: 42px;
     padding: 2rem;
     border: 1px solid var(--soft-line);
     box-shadow: var(--shadow)
 }

 .style-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1rem
 }

 .style-card {
     background: #fffaf0;
     border: 1px solid var(--soft-line);
     border-radius: 28px;
     padding: 1.5rem;
     height: 100%;
     position: relative;
     overflow: hidden
 }

 .style-preview {
     width: 100%;
     aspect-ratio: 1/1;
     border-radius: 20px;
     margin-bottom: 1rem;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, var(--swatch-a), var(--swatch-b));
     box-shadow: 0 12px 28px rgba(72, 55, 29, .12)
 }

 /* .style-preview:before {
     content: "";
     position: absolute;
     left: 12%;
     bottom: 14%;
     width: 42%;
     height: 52%;
     border-radius: 48% 48% 42% 42%;
     background: rgba(255, 255, 255, .62);
     box-shadow: 46px -20px 0 -12px rgba(255, 255, 255, .42), 78px 16px 0 -16px rgba(255, 255, 255, .38)
 }

 .style-preview:after {
     content: "";
     position: absolute;
     right: 12%;
     top: 15%;
     width: 54px;
     height: 54px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .5);
     box-shadow: -42px 62px 0 -18px rgba(255, 255, 255, .45)
 } */

 /* Style cards: real illustration previews */
.style-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.style-card .style-preview {
  width: 50%;
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  overflow: hidden;
  background: #fffaf0;
  box-shadow: 0 12px 28px rgba(72,55,29,.12);
  margin-bottom: .85rem;
}

.style-card .style-preview::before,
.style-card .style-preview::after {
  display: none !important;
  content: none !important;
}

.style-card .style-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


 .style-card h3 {
     font-size: 1.02rem;
     font-weight: 900;
     margin-bottom: .45rem;
     color: var(--ink)
 }

 .style-card p {
     color: #657085;
     margin: 0;
     font-size: .95rem;
     line-height: 1.55
 }

 .how-step {
     position: relative;
     background: #fffdf6;
     border: 1px solid var(--soft-line);
     border-radius: 32px;
     padding: 1.5rem;
     height: 100%;
     box-shadow: 0 18px 48px rgba(72, 55, 29, .08)
 }

 .step-dot {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: var(--orange);
     color: #fff;
     font-weight: 900;
     margin-bottom: 1rem
 }

 .green-story {
     background: #9fbe83;
     color: #fff;
     overflow: hidden
 }

 .green-story .story-serif {
     color: #fff
 }

 .green-story:before,
 .green-story:after {
     content: "";
     position: absolute;
     left: -8%;
     right: -8%;
     height: 76px;
     background: var(--paper)
 }

 .green-story:before {
     top: -1px;
     clip-path: polygon(0 0, 100% 0, 100% 45%, 88% 35%, 75% 52%, 62% 38%, 50% 55%, 38% 36%, 25% 52%, 12% 38%, 0 50%)
 }

 .green-story:after {
     bottom: -1px;
     clip-path: polygon(0 45%, 12% 35%, 25% 52%, 38% 38%, 50% 55%, 62% 36%, 75% 52%, 88% 38%, 100% 50%, 100% 100%, 0 100%)
 }

 .demo-cover {
     width: 100%;
     aspect-ratio: 1/1;
     object-fit: cover;
     border-radius: 20px;
     box-shadow: var(--shadow)
 }

 .plan {
     height: 100%;
     background: #fff;
     border: 1px solid var(--soft-line);
     border-radius: 34px;
     padding: 2rem;
     box-shadow: 0 18px 48px rgba(72, 55, 29, .08)
 }

 .plan.featured {
     border: 3px solid var(--coral);
     transform: translateY(-8px)
 }

 .plan-title {
     font-weight: 900;
     color: var(--ink)
 }

 .plan-price {
     margin: .35rem 0 1rem;
     color: var(--orange);
     font-size: 1.45rem;
     line-height: 1.1;
     font-weight: 900
 }

 .price-before {
     display: block;
     margin-bottom: .25rem;
     color: #8a7b70;
     font-size: .95rem;
     font-weight: 800;
     text-decoration: line-through
 }

 .price-label {
     display: inline-flex;
     margin-bottom: .45rem;
     padding: .25rem .6rem;
     border-radius: 999px;
     background: #fff4df;
     color: #7b5a2b;
     font-size: .76rem;
     font-weight: 900
 }

 .price-current {
     display: block
 }

 .founder-note {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     margin-top: .75rem;
     padding: .5rem .85rem;
     border: 1px solid rgba(111, 132, 63, .22);
     border-radius: 999px;
     background: #eef7df;
     color: #4b5e2b;
     font-size: .9rem;
     font-weight: 900
 }

 .founder-note.sold-out {
     background: #fff3df;
     border-color: rgba(215, 100, 24, .24);
     color: #8a4d1d
 }

 .plan ul {
     padding-left: 1.1rem;
     color: #526075;
     line-height: 1.9
 }

 .plan .style-included {
     font-weight: 900;
     color: var(--green-dark)
 }

 .privacy-card {
     background: #fff;
     border-radius: 36px;
     box-shadow: var(--shadow);
     border: 1px solid var(--soft-line);
     padding: 2rem
 }

 .privacy-list {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 1rem
 }

 .privacy-pill {
     background: #eef6e8;
     border-radius: 22px;
     padding: 1rem;
     font-weight: 800;
     color: #476738
 }

 .privacy-pill:last-child {
     grid-column: 1 / -1
 }

 .cta-final {
     background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .35), transparent 18rem), #d76418;
     color: #fff;
     border-radius: 46px;
     padding: 3rem;
     position: relative;
     overflow: hidden
 }

 .cta-final .story-serif {
     color: #fff
 }

 footer {
     background: #fbf2df;
     border-top: 1px solid rgba(110, 85, 47, .12)
 }

 .fs-5 {
    font-size: 1.10rem !important;
}

 @media(max-width:991px) {
     .hero {
         padding-top: 4rem
     }

     .hero-stage {
         min-height: 420px;
         margin-top: 2rem
     }

     .book-main {
         right: 0
     }

     .device {
         left: 4%;
         top: 36%
     }

     .book-small {
         left: 0
     }

     .theme-orbit,
     .style-grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .plan.featured {
         transform: none
     }
 }

 @media(max-width:575px) {
     .section {
         padding: 4rem 0
     }

     .hero-title {
         font-size: 3rem
     }

     .hero-stage {
         min-height: 360px
     }

     .book-main {
         width: 245px
     }

     .device {
         width: 235px;
         top: 40%
     }

     .book-small {
         width: 120px;
         bottom: 4%
     }

     .theme-orbit,
     .style-grid,
     .privacy-list {
         grid-template-columns: 1fr
     }

     .style-section {
         padding: 1.25rem;
         border-radius: 30px
     }

     .cta-final {
         padding: 2rem;
         border-radius: 32px
     }

     .navbar .btn-cloud {
         display: none
     }
 }

 /* Hero animated story covers */
.hero-stage .hero-rotator-card img {
  transition: opacity .28s ease, transform .42s ease, filter .42s ease;
  will-change: opacity, transform;
}

.hero-stage .hero-rotator-card.is-changing img {
  opacity: 0;
  transform: scale(.965) rotate(-1deg);
  filter: blur(6px);
}

.hero-stage .hero-rotator-card.has-changed img {
  animation: heroCoverIn .42s ease both;
}

/* .hero-stage:hover .book-main,
.hero-stage:focus-within .book-main {
  transform: rotate(1deg) translateY(-8px) scale(1.015);
}

.hero-stage:hover .device,
.hero-stage:focus-within .device {
  transform: rotate(-2deg) translateY(6px) scale(1.01);
}

.hero-stage:hover .book-small,
.hero-stage:focus-within .book-small {
  transform: rotate(-5deg) translateY(-6px) scale(1.04);
} */

@keyframes heroCoverIn {
  from {
    opacity: 0;
    transform: scale(1.025) translateY(10px);
    filter: blur(6px);
  }

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

@media (prefers-reduced-motion: reduce) {
  .hero-stage .hero-rotator-card img,
  .hero-stage .hero-rotator-card.has-changed img {
    transition: none;
    animation: none;
  }
}

/* MyStorySeeds custom seed cursor */
/* @media (pointer: fine) {
  body,
  a,
  button,
  .btn,
  [role="button"] {
    cursor: url("data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M6.5%203.5C16.7%204.3%2027.1%2017.1%2028.4%2028.2C18.7%2026.9%208.3%2014.8%206.5%203.5Z%22%20fill%3D%22%23DDBB71%22/%3E%0A%3Cpath%20d%3D%22M9.2%206.2C16.6%208.8%2023.8%2017.2%2026.2%2025.1C19.5%2021.8%2012.4%2013.4%209.2%206.2Z%22%20fill%3D%22%23E8CB8D%22%20opacity%3D%22.45%22/%3E%0A%3C/svg%3E") 27 27, auto;
  }
} */

.img-cta {
    width: 15%;
    margin-bottom: 20px;
    border-radius: 100%;
}

/* Illustrated how-it-works section */
.how-illustrated {
  background: #fbf3df;
  position: relative;
  overflow: hidden;
}

.how-illustrated::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,248,232,.65));
  pointer-events: none;
}

.how-illustrated .container {
  position: relative;
  z-index: 1;
}

.how-illustrated-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

.how-illustrated-card {
  background: rgba(255, 250, 240, .92);
  border: 1px solid rgba(122, 92, 58, .12);
  border-radius: 28px;
  padding: .8rem .8rem 1.25rem;
  box-shadow: 0 18px 48px rgba(72, 55, 29, .09);
  transition: transform .22s ease, box-shadow .22s ease;
}

.how-illustrated-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 56px rgba(72, 55, 29, .13);
}

.how-illustrated-media {
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  overflow: hidden;
  background: #fff4df;
  margin-bottom: 1.1rem;
}

.how-illustrated-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.how-step-label {
  margin: 0 0 .45rem;
  color: var(--orange);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.how-illustrated-card h3 {
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: 0 0 .6rem;
}

.how-illustrated-card p:last-child {
  color: #667085;
  font-size: .98rem;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 991.98px) {
  .how-illustrated-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .how-illustrated-grid {
    grid-template-columns: 1fr;
  }

  .how-illustrated-card {
    border-radius: 24px;
  }
}

.payment-trust-section {
  background: #fbf2df;
}

.payment-trust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  /* background: rgba(255, 250, 240, .92); */
  /* border: 1px solid rgba(122, 92, 58, .12); */
  /* border-radius: 28px; */
  padding: 1.5rem;
  text-align: center;
  /* box-shadow: 0 18px 48px rgba(72, 55, 29, .08); */
}

.payment-trust-copy {
  max-width: 680px;
}

.payment-logos-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem 1.55rem;
  width: 100%;
  max-width: 680px;
  background: #fff;
  border: 1px solid rgba(122, 92, 58, .12);
  border-radius: 22px;
  padding: 1.05rem 1.2rem;
  box-shadow: 0 14px 34px rgba(72, 55, 29, .08);
}

.payment-logo {
  display: block;
  width: auto;
  height: 34px;
  max-width: 96px;
  object-fit: contain;
}

.payment-logo.visa {
  height: 16px;
  max-width: none;
}

.payment-logo.master {
  height: 24px!important;
  max-width: none;
}

.payment-logo.diners {
  height: 36px!important;
  max-width: none;
}

.payment-logo.discover {
  height: 10px!important;
  max-width: none;
}

.payment-logo.pse {
  height: 26px!important;
  max-width: none;
}
.payment-logo.bancolombia {
  height: 22px!important;
  max-width: none;
}
.payment-logo.recaptcha {
  height: 28px!important;
  max-width: none;
}


.payment-logo-bold {
  height: 30px;
  max-width: 118px;
}

@media (max-width: 767.98px) {
  .payment-trust {
    padding: 1.25rem;
  }

  .payment-logos-card {
    gap: .65rem .9rem;
    padding: .9rem;
  }

  .payment-logo {
    height: 28px;
    max-width: 82px;
  }
}