﻿body {
   background: #F4F7FE;
}

.lets-talk-planes {
   --lt-grad-start: #6a49e4;
   --lt-grad-mid: #5b60e8;
   --lt-grad-end: #00eafe;
   --lt-deep-purple: #6937e0;
   --lt-ink: #152640;
   --lt-ink-muted: #5C6E8C;
   --lt-ink-dim: #97A6C2;
   --lt-surface: #FFFFFF;
   --lt-border: #E3E9F7;
   --lt-purple-glow: rgba(106,73,228,0.16);
   --lt-cyan-glow: rgba(0,234,254,0.22);
   padding: 40px 0 80px;
}

.lt-wrap {
   max-width: 1000px;
}

.lt-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   font-size: 11.5px;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--lt-grad-start);
   background: linear-gradient(90deg, rgba(106,73,228,0.1), rgba(0,234,254,0.1));
   border: 1px solid rgba(106,73,228,0.2);
   border-radius: 100px;
   padding: 6px 14px;
   margin: 20px 0 26px;
}

.lt-headline {
   font-weight: 800;
   font-size: clamp(28px, 4vw, 42px);
   letter-spacing: -1px;
   line-height: 1.14;
   margin-bottom: 16px;
   /*max-width: 640px;*/
   color: var(--lt-ink);
}

   .lt-headline .lt-grad {
      background: linear-gradient(90deg, var(--lt-grad-start) 0%, var(--lt-deep-purple) 40%, var(--lt-grad-end) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
   }

.lt-sub {
   font-size: 15.5px;
   color: var(--lt-ink-muted);
   line-height: 1.65;
   /*max-width: 520px;*/
   margin-bottom: 40px;
}

.lt-message {
   margin-top: 50px;
   margin-bottom: 20px;
}

.lt-card {
   position: relative;
   height: 100%;
   background: var(--lt-surface);
   border: 1.5px solid var(--lt-border);
   border-radius: 22px;
   padding: 32px 30px 30px;
   cursor: pointer;
   transition: all .3s cubic-bezier(0.34,1.56,0.64,1);
   box-shadow: 0 4px 18px rgba(21,38,64,0.05);
}

   .lt-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 34px rgba(21,38,64,0.09);
   }

   .lt-card.chosen.lt-essential {
      border-color: var(--lt-grad-start);
      box-shadow: 0 20px 44px var(--lt-purple-glow);
   }

.lt-full {
   border-color: rgba(0,234,254,0.35);
}

   .lt-full.chosen {
      box-shadow: 0 20px 44px var(--lt-cyan-glow);
   }

.lt-card.lt-dimmed {
   opacity: 0.5;
   transform: none;
   box-shadow: none;
}

.lt-badge {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   border-radius: 100px;
   padding: 5px 13px;
   margin-bottom: 20px;
}

.lt-badge-essential {
   background: rgba(106,73,228,0.09);
   color: var(--lt-grad-start);
   border: 1px solid rgba(106,73,228,0.22);
}

.lt-badge-full {
   background: linear-gradient(90deg, rgba(106,73,228,0.12), rgba(0,234,254,0.16));
   color: var(--lt-deep-purple);
   border: 1px solid rgba(0,234,254,0.35);
}

.lt-essential.chosen .lt-badge-essential {
   background: var(--lt-grad-start);
   color: #fff;
   border-color: var(--lt-grad-start);
}

.lt-full.chosen .lt-badge-full {
   background: linear-gradient(90deg, var(--lt-grad-start), var(--lt-grad-end));
   color: #fff;
   border-color: transparent;
}

.lt-card-name {
   font-weight: 800;
   font-size: 27px;
   letter-spacing: -0.8px;
   margin-bottom: 10px;
   color: var(--lt-ink);
}

.lt-card-diff {
   font-size: 14px;
   color: var(--lt-ink-muted);
   line-height: 1.55;
   margin-bottom: 26px;
   padding-bottom: 26px;
   border-bottom: 1px solid var(--lt-border);
   min-height: 46px;
}

   .lt-card-diff strong {
      color: var(--lt-ink);
      font-weight: 600;
   }

.lt-price-row {
   display: flex;
   align-items: baseline;
   gap: 8px;
   margin-bottom: 4px;
}

.lt-price {
   font-weight: 800;
   font-size: 34px;
   letter-spacing: -1.2px;
   color: var(--lt-ink);
}

.lt-full .lt-price {
   background: linear-gradient(90deg, var(--lt-grad-start), var(--lt-grad-end));
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.lt-price-period {
   font-size: 13px;
   color: var(--lt-ink-muted);
   font-weight: 500;
}

.lt-price-sub {
   font-size: 12px;
   color: var(--lt-ink-dim);
   margin-bottom: 24px;
}

.lt-features {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 11px;
   margin-bottom: 28px;
   padding-left: 0;
}

   .lt-features li {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      font-size: 13.5px;
      color: var(--lt-ink);
      line-height: 1.4;
   }

.lt-feat-icon {
   flex: none;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 10px;
   margin-top: 1px;
   color: #fff;
}

.lt-essential .lt-feat-icon {
   background: var(--lt-grad-start);
}

.lt-full .lt-feat-icon {
   background: linear-gradient(135deg, var(--lt-grad-start), var(--lt-grad-end));
}

.lt-cta {
   width: 100%;
   padding: 14px;
   border-radius: 12px;
   border: none;
   font-weight: 600;
   font-size: 14px;
   color: #fff;
   transition: all .25s;
}

.lt-cta-essential {
   background: var(--lt-grad-start);
   box-shadow: 0 8px 20px var(--lt-purple-glow);
}

   .lt-cta-essential:hover {
      background: var(--lt-deep-purple);
      transform: translateY(-2px);
      color: #fff;
   }

.lt-cta-full {
   background: linear-gradient(90deg, var(--lt-grad-start), var(--lt-grad-end));
   box-shadow: 0 8px 20px var(--lt-cyan-glow);
}

   .lt-cta-full:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 26px var(--lt-cyan-glow);
      color: #fff;
   }

.lt-billing-wrap {
   max-height: 0;
   overflow: hidden;
   transition: max-height .5s ease;
}

   .lt-billing-wrap.open {
      max-height: 1200px;
      margin-top: 40px;
   }

.lt-billing-head {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   margin-bottom: 18px;
   flex-wrap: wrap;
   gap: 8px;
}

.lt-billing-title {
   font-weight: 700;
   font-size: 19px;
   letter-spacing: -0.3px;
   color: var(--lt-ink);
}

.lt-billing-close {
   background: none;
   border: none;
   color: var(--lt-ink-dim);
   font-size: 12.5px;
   cursor: pointer;
   text-decoration: underline;
   font-weight: 500;
}

   .lt-billing-close:hover {
      color: var(--lt-ink-muted);
   }

.lt-bcard {
   position: relative;
   height: 100%;
   background: var(--lt-surface);
   border: 1.5px solid var(--lt-border);
   border-radius: 16px;
   padding: 24px 20px 22px;
   display: flex;
   flex-direction: column;
   cursor: pointer;
   transition: all .25s ease;
   box-shadow: 0 4px 14px rgba(21,38,64,0.04);
}

   .lt-bcard:hover {
      box-shadow: 0 10px 26px rgba(21,38,64,0.08);
   }

   .lt-bcard.chosen {
      border-color: var(--lt-grad-start);
      box-shadow: 0 14px 30px var(--lt-purple-glow);
   }

.lt-bcard.lt-yearly {
   border: 1.5px solid var(--lt-border);
}

   .lt-bcard.lt-yearly.chosen {
      border: 1.5px solid transparent;
      background: linear-gradient(var(--lt-surface), var(--lt-surface)) padding-box, linear-gradient(135deg, var(--lt-grad-start), var(--lt-grad-end)) border-box;
      box-shadow: 0 18px 40px var(--lt-cyan-glow);
   }

.lt-bbadge {
   position: absolute;
   top: -12px;
   left: 50%;
   transform: translateX(-50%);
   background: linear-gradient(90deg, var(--lt-grad-start), var(--lt-grad-end));
   color: #fff;
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   padding: 5px 13px;
   border-radius: 100px;
   white-space: nowrap;
}

.lt-bname {
   font-size: 12px;
   font-weight: 600;
   color: var(--lt-ink-dim);
   /*text-transform: uppercase;*/
   letter-spacing: 0.06em;
   margin-bottom: 12px;
}

   .lt-bname .forma-pago {
      background-color: #E9F3FB;
      color: var(--lt-ink-muted);
      padding: 4px;
      border-radius: 5px;
      vertical-align: middle;
   }

.lt-bsubtitle {
   font-size: 12px;
   font-weight: 600;
   color: var(--lt-ink-dim);
   letter-spacing: 0.06em;
   margin-bottom: 12px;
}

.lt-bprice {
   font-weight: 800;
   font-size: 27px;
   letter-spacing: -1px;
   margin-bottom: 2px;
   color: var(--lt-ink);
}

.lt-bcard.lt-yearly .lt-bprice {
   background: linear-gradient(90deg, var(--lt-grad-start), var(--lt-grad-end));
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.lt-bperiod {
   font-size: 12px;
   color: var(--lt-ink-muted);
   margin-bottom: 14px;
   font-weight: 500;
}

.lt-btotal {
   font-size: 12.5px;
   /*color: var(--lt-ink-muted);*/
   margin-bottom: 4px;
}

   .lt-btotal .equivalente-mensual {
      /*background-color: #FDE6B4;*/
      background: linear-gradient(90deg, var(--lt-grad-start), var(--lt-grad-end));
      color: #ffffff;
      padding: 5px;
      border-radius: 8px;
   }

      .lt-btotal .equivalente-mensual .precio {
         font-size: 15px;
         font-weight: bolder;
      }


.lt-bsave {
   font-size: 12px;
   color: #0A5B07;
   font-weight: 600;
   margin-bottom: 18px;
   flex: 1;
}

.lt-bcta {
   width: 100%;
   border-radius: 10px;
   padding: 11px 14px;
   font-weight: 600;
   font-size: 13px;
   cursor: pointer;
   background: #F4F7FE;
   color: var(--lt-ink);
   border: 1.5px solid var(--lt-border);
   transition: all .2s ease;
}

.lt-bcard.chosen .lt-bcta {
   background: var(--lt-grad-start);
   color: #fff;
   border-color: var(--lt-grad-start);
}

.lt-bcard.lt-yearly.chosen .lt-bcta {
   background: linear-gradient(90deg, var(--lt-grad-start), var(--lt-grad-end));
   color: #fff;
   border-color: transparent;
}

.lt-selector {
   margin-bottom: 28px;
}

/*.lt-selector-label {
   font-weight: 700;
   font-size: 16px;
   color: var(--lt-ink-muted);
   margin-bottom: 12px;
}

   .lt-selector-label .lt-grad {
      background: linear-gradient(90deg, var(--lt-grad-start), var(--lt-grad-end));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
   }

.lt-selector-buttons {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
}   */

.lt-sbtn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   /*min-width: 210px;*/
   /*padding: 12px 28px;*/
   padding: 4px 28px;
   border-radius: 16px;
   border: 1.5px solid var(--lt-border);
   background: var(--lt-surface);
   color: var(--lt-ink-muted);
   font-family: inherit;
   font-size: clamp(0.65rem, calc(0.35rem + .75vw), 1rem);
   line-height: 1.35;
   text-align: center;
   cursor: pointer;
   box-shadow: 0 4px 14px rgba(21,38,64,0.04);
   transition: all .25s ease;
}

   .lt-sbtn .lt-sbtn-text {
      line-height: 0.95;
      font-weight: 300;
   }

   .lt-sbtn:hover {
      color: var(--lt-ink);
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(21,38,64,0.08);
   }

   .lt-sbtn:focus-visible {
      outline: 2px solid var(--lt-grad-start);
      outline-offset: 3px;
   }

   .lt-sbtn.chosen {
      color: #fff;
   }

.lt-sbtn-essential.chosen {
   background: var(--lt-grad-start);
   border-color: var(--lt-grad-start);
   box-shadow: 0 8px 20px var(--lt-purple-glow);
}

.lt-sbtn-full.chosen {
   background: linear-gradient(90deg, var(--lt-grad-start), var(--lt-grad-end));
   /*border-color: transparent;*/
   box-shadow: 0 8px 20px var(--lt-cyan-glow);
}

@media (max-width: 575.98px) {
   .lt-sbtn {
      flex: 1 1 100%;
   }
}

@media (max-width: 767.98px) {
   .lt-bcard.lt-yearly {
      order: -1;
   }
}
