/* ============================================================
   LOJA SKETCHUP TOTALCAD — store.css
   Linguagem visual ESPELHA a loja oficial SketchUp:
   CTA dourado #FBAD26, hero charcoal #252A2E, checks verdes #349C44,
   tipografia Open Sans. Laranja TotalCad #ED4D1C = acento ~5% (revendedor/WhatsApp).
   Tokens reais extraidos do DOM oficial via chrome-devtools (ver _referencia/design-tokens-observados.md).
   ============================================================ */
:root {
   --ink: #252A2E;
   /* texto / charcoal oficial */
   --ink-2: #5A6068;
   /* texto secundario */
   --ink-3: #8A9099;
   /* legendas */
   --gold: #FBAD26;
   /* CTA principal SketchUp */
   --gold-ink: #353A40;
   /* texto sobre dourado */
   --gold-hover: #E89A12;
   --blue: #0063A3;
   /* acento 2: aba MAIS USADO, links, destaque */
   --blue-soft: #EAF3FA;
   --green: #349C44;
   /* check sim */
   --grey-no: #90939F;
   /* nao disponivel */
   --dark: #252A2E;
   /* hero/footer/edu */
   --lav: #F4F5F7;
   /* fundo secao planos */
   --surface: #FFFFFF;
   --line: #E2E4E8;
   --line-2: #EDEFF2;
   --action: #ED4D1C;
   --err: #C0392B;
   /* laranja TotalCad — acento ~5% (revendedor) */
   --action-soft: #FDEDE7;
   --wa: #25D366;
   --radius: 12px;
   --radius-sm: 8px;
   --pill: 100px;
   --shadow: 0 4px 18px rgba(20, 25, 30, .07);
   --shadow-lg: 0 18px 48px rgba(20, 25, 30, .14);
   --container: 1200px;
   --font: 'Open Sans', Arial, Helvetica, system-ui, sans-serif;
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth
}

body {
   margin: 0;
   font-family: var(--font);
   color: var(--ink);
   background: var(--surface);
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility
}

img {
   max-width: 100%;
   display: block
}

h1,
h2,
h3,
h4 {
   margin: 0;
   color: var(--ink);
   font-weight: 700;
   line-height: 1.18;
   text-wrap: balance
}

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

:focus-visible {
   outline: 3px solid var(--blue);
   outline-offset: 2px;
   border-radius: 4px
}

.ls-btn:focus-visible,
.ls-toggle__opt:focus-visible {
   outline: 3px solid #fff;
   outline-offset: 2px
}

.ls-container {
   max-width: var(--container);
   margin: 0 auto;
   padding: 0 24px
}

.ls-container--narrow {
   max-width: 880px
}

[id] {
   scroll-margin-top: 24px
}

/* ---------- Botoes (pilulas, igual oficial) ---------- */
.ls-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   gap: 9px;
   font-family: var(--font);
   font-weight: 700;
   font-size: 15px;
   line-height: 1.15;
   text-transform: uppercase;
   letter-spacing: .08em;
   border: 0;
   border-radius: var(--pill);
   padding: 15px 30px;
   cursor: pointer;
   transition: background .15s ease, transform .15s ease, box-shadow .15s ease
}

.ls-btn--cta {
   background: var(--gold);
   color: var(--gold-ink)
}

.ls-btn--cta:hover {
   background: var(--gold-hover);
   transform: translateY(-1px)
}

.ls-btn--ghost-light {
   background: transparent;
   color: #fff;
   border: 2px solid #fff
}

.ls-btn--ghost-light:hover {
   background: rgba(255, 255, 255, .12)
}

.ls-btn--ghost-dark {
   background: transparent;
   color: var(--ink);
   border: 2px solid var(--ink)
}

.ls-btn--sm {
   padding: 11px 20px;
   font-size: 13px
}

.ls-btn--lg {
   padding: 17px 38px;
   font-size: 16px
}

.ls-btn--wide {
   width: 100%
}

/* ---------- Faixa revendedor (TotalCad ~5%) ---------- */
.ls-topbar {
   background: #315AE5;
   color: rgba(255, 255, 255, .9);
   font-size: 13px
}

.ls-topbar__in {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 9px 24px
}

/* 24px lateral = alinha com navbar/secoes (antes 0 -> texto colado na borda no mobile) */
.ls-topbar__txt b {
   color: #fff
}

/* ---------- Navbar (charcoal, sticky) ---------- */
.ls-nav {
   position: relative;
   z-index: 60;
   background: #17181A;
   border-bottom: 1px solid rgba(255, 255, 255, .08)
}

/* preto TotalCad (Charcoal #17181A) no lugar do cinza #252A2E — pedido Michael 2026-06-29 */
.ls-nav__in {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   height: 70px
}

.ls-nav__brand {
   display: flex;
   align-items: center;
   gap: 12px
}

.ls-nav__sk {
   height: 32px;
   width: auto;
   max-width: none;
   filter: none;
   opacity: 1;
   margin-left: -8px;
   margin-right: -7px
}

.ls-nav__by {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 13px;
   color: #9aa2ad;
   letter-spacing: .01em;
   margin-left: 12px;
   padding-left: 16px;
   border-left: 1px solid rgba(255, 255, 255, .16)
}

.ls-nav__tc {
   height: 34px;
   width: auto;
   max-width: none;
   filter: brightness(0) invert(1);
   opacity: .95;
   margin-left: -18px;
   margin-right: -18px
}

.ls-logo-invert {
   filter: brightness(0) invert(1)
}

.ls-nav__links {
   display: flex;
   gap: 30px
}

.ls-nav__links a {
   color: #d7dbe1;
   font-weight: 600;
   font-size: 14px;
   letter-spacing: .02em
}

.ls-nav__links a:hover {
   color: #fff
}

.ls-nav__actions {
   display: flex;
   align-items: center;
   gap: 14px
}

.ls-nav__cart {
   position: relative;
   background: none;
   border: 0;
   color: #fff;
   cursor: pointer;
   padding: 4px;
   display: inline-flex;
   align-items: center
}

.ls-nav__cart svg {
   width: 24px;
   height: 24px;
   fill: none;
   stroke: #fff;
   stroke-width: 1.7;
   stroke-linecap: round
}

.ls-nav__cart:hover svg {
   stroke: var(--gold)
}

.ls-nav__cartbadge {
   position: absolute;
   top: -4px;
   right: -6px;
   min-width: 18px;
   height: 18px;
   padding: 0 5px;
   border-radius: 9px;
   background: var(--gold);
   color: var(--gold-ink);
   font-size: 11px;
   font-weight: 800;
   display: flex;
   align-items: center;
   justify-content: center;
   line-height: 1
}

/* ---------- Hero (charcoal, igual oficial) ---------- */
.ls-hero {
   background: #0C1B33;
   color: #fff;
   padding: 92px 0 104px
}

.ls-hero__h1 {
   font-size: 64px;
   font-weight: 300;
   letter-spacing: .01em;
   line-height: 1.06;
   max-width: 20ch;
   color: #fff
}

.ls-hero__sub {
   font-size: 19px;
   color: #c3c9d1;
   margin: 22px 0 34px;
   max-width: 56ch;
   font-weight: 400
}

.ls-hero__cta {
   display: flex;
   flex-wrap: wrap;
   gap: 14px
}

.ls-hero__trust {
   display: flex;
   flex-wrap: wrap;
   gap: 8px 22px;
   margin-top: 34px;
   color: #aeb6c0;
   font-size: 14px
}

.ls-hero__trust span {
   display: inline-flex;
   align-items: center;
   gap: 8px
}

.ls-hero__trust span::before {
   content: "";
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--green)
}

.ls-hero__sub,
.ls-hero__trust {
   text-shadow: 0 1px 8px rgba(12, 27, 51, .92), 0 0 2px rgba(12, 27, 51, .85)
}

/* ---------- Secao base ---------- */
.ls-section {
   padding: 84px 0
}

.ls-section--lav {
   background: var(--lav)
}

.ls-section--white {
   background: var(--surface)
}

.ls-eyebrow {
   display: block;
   text-align: center;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--blue);
   margin-bottom: 10px
}

.ls-h2 {
   text-align: center;
   font-size: 40px;
   font-weight: 300;
   letter-spacing: .01em
}

.ls-sub {
   text-align: center;
   color: var(--ink-2);
   font-size: 18px;
   margin: 14px auto 0;
   max-width: 60ch
}

/* ---------- Abas + Toggle ---------- */
.ls-tabs {
   display: flex;
   justify-content: center;
   gap: 34px;
   margin: 34px 0 4px;
   border-bottom: 1px solid var(--line);
   flex-wrap: wrap
}

.ls-tabs__t {
   background: none;
   border: 0;
   font-family: var(--font);
   font-size: 14px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--ink-3);
   padding: 0 2px 14px;
   cursor: pointer;
   border-bottom: 3px solid transparent;
   margin-bottom: -1px
}

.ls-tabs__t.is-active {
   color: var(--ink);
   border-bottom-color: var(--blue)
}

.ls-toggle-row {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 16px;
   margin: 30px 0 8px
}

.ls-toggle {
   display: inline-flex;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--pill);
   padding: 5px
}

.ls-toggle__opt {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: none;
   border: 0;
   font-family: var(--font);
   font-size: 14px;
   font-weight: 700;
   letter-spacing: .04em;
   color: var(--ink-2);
   padding: 10px 22px;
   border-radius: var(--pill);
   cursor: pointer;
   transition: all .15s ease
}

.ls-toggle__opt.is-active {
   background: var(--ink);
   color: #fff
}

.ls-toggle__save {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .02em;
   background: var(--green);
   color: #fff;
   padding: 3px 8px;
   border-radius: var(--pill);
   text-transform: none
}

.ls-toggle__opt.is-active .ls-toggle__save {
   background: #fff;
   color: var(--green)
}

/* ---------- Cards de plano ---------- */
.ls-plans {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   align-items: start;
   margin-top: 38px
}

.ls-plans--single {
   grid-template-columns: minmax(0, 780px);
   justify-content: center
}

.ls-plans--duo {
   grid-template-columns: repeat(2, minmax(0, 400px));
   justify-content: center
}

.ls-plan--quote {
   border: 2px solid var(--blue);
   box-shadow: var(--shadow-lg);
   padding-top: 0;
   overflow: hidden
}

.ls-plan__ribbon {
   margin: 0 -28px 28px;
   background: var(--blue);
   color: #fff;
   text-align: center;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   font-size: 14px;
   padding: 13px 16px
}

.ls-plan__quotebig {
   font-size: 30px;
   font-weight: 700;
   letter-spacing: -.01em;
   line-height: 1.1;
   color: var(--ink)
}

.ls-quote {
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   gap: 32px;
   align-items: center;
   text-align: left;
   padding-bottom: 6px
}

.ls-quote__main .ls-plan__name {
   margin-bottom: 10px
}

.ls-quote__main .ls-plan__billed {
   margin-top: 6px
}

.ls-quote__tag {
   color: var(--ink);
   font-size: 15px;
   font-weight: 600;
   margin: 16px 0 20px;
   line-height: 1.5
}

.ls-quote .ls-plan__cta {
   width: 100%;
   margin: 0
}

.ls-quote__panel {
   background: var(--lav);
   border: 1px solid var(--line);
   border-radius: 12px;
   padding: 24px
}

.ls-quote__panel h4 {
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--ink-3);
   margin-bottom: 14px
}

.ls-quote__feats {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   gap: 13px
}

.ls-quote__feats li {
   position: relative;
   padding-left: 28px;
   font-size: 14px;
   color: var(--ink);
   line-height: 1.5
}

.ls-quote__feats li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 4px;
   width: 17px;
   height: 17px;
   border-radius: 50%;
   background: var(--green);
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat
}

@media (max-width:760px) {
   .ls-quote {
      grid-template-columns: 1fr;
      gap: 22px;
      text-align: left
   }
}

.ls-eq-field {
   margin: 0 0 18px
}

.ls-eq-label {
   display: block;
   font-size: 14px;
   font-weight: 700;
   color: var(--ink);
   margin: 0 0 8px;
   line-height: 1.35
}

.ls-eq-selectwrap {
   position: relative
}

.ls-eq-selectwrap::after {
   content: "";
   position: absolute;
   right: 15px;
   top: 50%;
   width: 9px;
   height: 9px;
   border-right: 2px solid var(--ink-2);
   border-bottom: 2px solid var(--ink-2);
   transform: translateY(-65%) rotate(45deg);
   pointer-events: none
}

.ls-eq-select {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   width: 100%;
   font-family: var(--font);
   font-size: 15px;
   font-weight: 600;
   padding: 13px 42px 13px 14px;
   border: 1.5px solid var(--line);
   border-radius: var(--radius-sm);
   background: #fff;
   color: var(--ink);
   cursor: pointer;
   line-height: 1.2
}

.ls-eq-select:invalid {
   color: var(--ink-2);
   font-weight: 600
}

.ls-eq-select:focus {
   outline: none;
   border-color: var(--blue);
   box-shadow: 0 0 0 3px var(--blue-soft)
}

.ls-eq-select.is-err {
   border-color: var(--action);
   box-shadow: 0 0 0 3px var(--action-soft)
}

.ls-eq-hint {
   margin: 8px 0 0;
   font-size: 13px;
   font-weight: 600;
   color: var(--action);
   display: none
}

.ls-eq-hint.is-on {
   display: block
}

.ls-plan {
   position: relative;
   display: flex;
   flex-direction: column;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 34px 28px 30px
}

.ls-plan--featured {
   border: 2px solid var(--blue);
   box-shadow: var(--shadow-lg);
   padding-top: 34px;
   align-self: stretch
}

.ls-plan__badge {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translate(-50%, -100%);
   background: var(--blue);
   color: #fff;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
   padding: 8px 22px;
   border-radius: 10px 10px 0 0;
   white-space: nowrap
}

.ls-plan__top {
   display: flex;
   flex-direction: column
}

.ls-plan__name {
   font-size: 22px;
   font-weight: 600;
   color: var(--ink-2);
   margin-bottom: 14px
}

.ls-plan__priceblock {
   margin-bottom: 18px
}

.ls-plan__promo {
   display: inline-block;
   background: var(--action);
   color: #fff;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .04em;
   text-transform: uppercase;
   padding: 4px 10px;
   border-radius: 6px;
   margin-bottom: 8px
}

.ls-plan__old {
   display: block;
   color: var(--ink-3);
   text-decoration: line-through;
   font-size: 14px;
   margin-bottom: 2px
}

.ls-plan__cash {
   font-size: 42px;
   font-weight: 700;
   letter-spacing: -.01em;
   line-height: 1;
   color: var(--ink)
}

.ls-plan__cash small {
   font-size: 16px;
   font-weight: 600;
   color: var(--ink-2);
   letter-spacing: 0
}

.ls-plan__billed {
   color: var(--ink-2);
   font-size: 14px;
   margin-top: 8px
}

.ls-plan__br {
   color: var(--ink);
   font-size: 14px;
   margin-top: 12px;
   line-height: 1.5
}

.ls-plan__br b {
   font-weight: 700
}

.ls-plan__save {
   display: block;
   color: var(--green);
   font-weight: 700;
   font-size: 13.5px;
   margin-top: 6px
}

.ls-plan__priceblock--na {
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 6px 0 2px
}

.ls-plan__naonly {
   font-size: 18px;
   font-weight: 600;
   color: var(--ink-2)
}

.ls-plan__switch {
   align-self: flex-start;
   background: none;
   border: 0;
   color: var(--blue);
   font-weight: 700;
   font-size: 14px;
   cursor: pointer;
   text-decoration: underline;
   font-family: var(--font)
}

.ls-plan__cta {
   margin: 2px 0 22px
}

.ls-plan__tag {
   color: var(--ink);
   font-size: 15px;
   font-weight: 600;
   margin: 0 0 18px;
   line-height: 1.45
}

.ls-plan__incl {
   font-size: 14px;
   font-weight: 700;
   color: var(--ink);
   margin-bottom: 12px
}

.ls-plan__feats {
   list-style: none;
   padding: 0;
   margin: 0;
   display: grid;
   gap: 11px
}

.ls-plan__feats li {
   position: relative;
   padding-left: 26px;
   font-size: 14px;
   color: var(--ink-2);
   line-height: 1.5
}

.ls-plan__feats li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 6px;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: var(--green);
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/11px no-repeat;
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/11px no-repeat
}

/* ---------- Pagamento + disclaimer + link comparar ---------- */
.ls-pay {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 16px 30px;
   margin: 40px 0 0;
   flex-wrap: wrap
}

.ls-pay__lbl {
   width: 100%;
   text-align: center;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--ink-3);
   margin-bottom: 10px
}

.ls-pay img {
   height: 38px;
   width: auto;
   display: block
}

.ls-pay img.ls-pay--pix {
   height: 30px
}

@media (max-width:680px) {
   .ls-pay img {
      height: 30px
   }

   .ls-pay img.ls-pay--pix {
      height: 24px
   }
}

.ls-seals-strip {
   background: #fff;
   padding: 42px 0;
   border-bottom: 1px solid var(--line)
}

.ls-seals-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 38px;
   align-items: stretch
}

.ls-seals-grp {
   display: flex;
   flex-direction: column
}

.ls-seals-grp--inst {
   border-left: 1px solid var(--line);
   padding-left: 38px
}

.ls-seals__cap {
   text-align: center;
   color: var(--ink-3);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   margin: 0 0 18px;
   text-wrap: balance
}

.ls-seals {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 14px 28px;
   flex-wrap: wrap;
   margin: 0
}

.ls-seals img {
   height: 96px;
   width: auto;
   display: block
}

.ls-seals--inst {
   list-style: none;
   padding: 0;
   gap: 18px 30px;
   align-items: flex-start
}

.ls-seals--inst li {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   max-width: 150px
}

.ls-seals--inst img {
   height: 96px
}

.ls-seals__id {
   font-size: 12px;
   line-height: 1.45;
   color: var(--ink-2);
   text-align: center;
   text-wrap: balance
}

.ls-seals__id b {
   display: block;
   font-size: 13px;
   color: var(--ink);
   font-weight: 700
}

.ls-seals__note {
   text-align: center;
   font-size: 13px;
   color: var(--ink-3);
   line-height: 1.6;
   margin: auto auto 0;
   padding-top: 18px;
   max-width: none;
   text-wrap: pretty
}

.ls-seals__note.ls-sentences span {
   display: inline
}

@media (max-width:900px) {
   .ls-seals-grid {
      grid-template-columns: 1fr;
      gap: 32px
   }

   .ls-seals-grp--inst {
      border-left: 0;
      padding-left: 0;
      border-top: 1px solid var(--line);
      padding-top: 30px
   }
}

@media (max-width:680px) {
   .ls-seals img {
      height: 76px
   }

   .ls-pay img {
      height: 26px
   }

   .ls-seals--inst img {
      height: 76px
   }
}

.ls-disc {
   text-align: center;
   color: var(--ink-3);
   font-size: 13px;
   margin: 18px auto 0;
   max-width: 64ch;
   line-height: 1.55
}

.ls-comparelink {
   display: block;
   text-align: center;
   margin: 26px 0 0;
   color: var(--blue);
   font-weight: 700;
   font-size: 15px;
   letter-spacing: .06em;
   text-transform: uppercase
}

.ls-comparelink::after {
   content: " ↓"
}

/* ---------- Tabela comparativa (igual oficial) ---------- */
.ls-table-wrap {
   overflow-x: auto;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   background: #fff;
   margin-top: 40px
}

.ls-table {
   width: 100%;
   border-collapse: collapse;
   min-width: 720px
}

.ls-table thead th {
   position: sticky;
   top: 0;
   background: var(--dark);
   color: #fff;
   padding: 18px 18px;
   text-align: center;
   font-size: 17px;
   font-weight: 700;
   z-index: 2
}

.ls-table thead th .ls-table__lvl {
   display: block;
   font-size: 12px;
   font-weight: 600;
   color: #aeb6c0;
   text-transform: uppercase;
   letter-spacing: .06em;
   margin-top: 3px
}

.ls-table thead th.ls-table__feat {
   text-align: left;
   background: var(--dark)
}

.ls-table thead th.ls-table__hi {
   background: var(--blue)
}

.ls-table th,
.ls-table td {
   padding: 15px 18px;
   text-align: center;
   border-bottom: 1px solid var(--line-2)
}

.ls-table tbody th {
   text-align: left;
   font-weight: 600;
   font-size: 14.5px;
   color: var(--ink)
}

.ls-feat-toggle {
   display: flex;
   align-items: flex-start;
   gap: 9px;
   background: none;
   border: 0;
   font-family: var(--font);
   font-weight: 600;
   font-size: 14.5px;
   color: var(--ink);
   cursor: pointer;
   text-align: left;
   padding: 0;
   width: 100%;
   line-height: 1.4
}

.ls-feat-chev {
   flex: 0 0 auto;
   margin-top: 2px;
   color: var(--ink-3);
   transition: transform .18s ease
}

.ls-feat-toggle[aria-expanded="true"] {
   color: var(--blue)
}

.ls-feat-toggle[aria-expanded="true"] .ls-feat-chev {
   transform: rotate(180deg);
   color: var(--blue)
}

.ls-feat-desc {
   margin: 9px 0 2px 25px;
   font-size: 13px;
   font-weight: 400;
   color: var(--ink-2);
   line-height: 1.55;
   max-width: 42ch
}

.ls-table tbody tr:nth-child(even) {
   background: #FAFBFC
}

.ls-table__hi {
   background: rgba(0, 99, 163, .05)
}

.ls-table td small {
   display: block;
   font-size: 13px;
   color: var(--ink-2);
   line-height: 1.4
}

.ls-table__price th {
   color: var(--ink)
}

.ls-table__price td {
   font-size: 18px;
   font-weight: 700;
   color: var(--ink)
}

.ls-table__price .ls-table__pricelbl {
   display: block;
   font-size: 12px;
   font-weight: 600;
   color: var(--ink-3);
   margin-top: 2px
}

.ls-yes,
.ls-no {
   display: inline-block;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   vertical-align: middle
}

.ls-yes {
   background: var(--green);
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/16px no-repeat;
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/16px no-repeat
}

.ls-no {
   background: var(--grey-no);
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 11h14v2H5z'/%3E%3C/svg%3E") center/16px no-repeat;
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 11h14v2H5z'/%3E%3C/svg%3E") center/16px no-repeat
}

.ls-table__back {
   display: inline-block;
   margin: 20px 0 0;
   color: var(--blue);
   font-weight: 700;
   font-size: 14px;
   letter-spacing: .04em
}

.ls-table__back::before {
   content: "↑ "
}

/* ---------- O que esta incluido (grid de recursos, versao melhorada) ---------- */
.ls-incl__grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 32px 26px;
   margin-top: 44px
}

.ls-incl__item {
   display: grid;
   grid-template-columns: auto 1fr;
   column-gap: 12px;
   align-items: center
}

.ls-incl__ic {
   width: 44px;
   height: 44px;
   border-radius: 12px;
   background: var(--blue-soft);
   color: var(--blue);
   display: flex;
   align-items: center;
   justify-content: center;
   flex: none
}

.ls-incl__ic svg {
   width: 22px;
   height: 22px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.7;
   stroke-linecap: round;
   stroke-linejoin: round
}

.ls-incl__item h3 {
   font-size: 16px;
   font-weight: 700;
   color: var(--ink);
   margin: 0
}

.ls-incl__item p {
   grid-column: 1/-1;
   font-size: 14px;
   color: var(--ink-2);
   margin: 11px 0 0;
   line-height: 1.5
}

@media (max-width:1000px) {
   .ls-incl__grid {
      grid-template-columns: 1fr 1fr;
      gap: 28px 22px
   }
}

@media (max-width:560px) {
   .ls-incl__grid {
      grid-template-columns: 1fr
   }
}

/* ---------- Bloco TotalCad (~5%) ---------- */
.ls-tc {
   background: var(--lav);
   padding-bottom: 56px
}

#duvidas {
   padding-top: 56px;
   border-top: 1px solid var(--line)
}

.ls-tc__cards {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
   margin-top: 38px
}

.ls-tc__card {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 26px 24px;
   display: grid;
   grid-template-columns: auto 1fr;
   column-gap: 14px;
   align-items: center
}

.ls-tc__ic {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 46px;
   height: 46px;
   border-radius: 12px;
   background: var(--blue-soft);
   color: var(--blue);
   grid-row: 1;
   grid-column: 1;
   flex: 0 0 auto
}

.ls-tc__ic svg {
   width: 23px;
   height: 23px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.7
}

.ls-tc__card h3 {
   font-size: 17.5px;
   font-weight: 700;
   margin: 0;
   grid-row: 1;
   grid-column: 2
}

.ls-tc__card p {
   color: var(--ink-2);
   font-size: 14.5px;
   margin: 14px 0 0;
   grid-row: 2;
   grid-column: 1/-1
}

.ls-tc__logos {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 40px;
   margin-top: 46px;
   flex-wrap: wrap
}

.ls-tc__logos img {
   height: 30px;
   width: auto
}

.ls-tc__logos .ls-tc__tclogo {
   height: 44px;
   margin-left: -34px;
   margin-right: -25px
}

/* ---------- Indicador de moeda no toggle ---------- */
.ls-cur {
   font-size: 13px;
   font-weight: 700;
   color: var(--ink-3);
   letter-spacing: .04em;
   border: 1px solid var(--line);
   border-radius: var(--pill);
   padding: 9px 14px;
   background: #fff
}

/* ---------- Educacao (faixa escura, espelha a oficial) ---------- */
.ls-edu {
   background: var(--dark);
   color: #fff;
   padding: 84px 0
}

.ls-edu .ls-eyebrow {
   color: #8fb7d6
}

.ls-edu .ls-h2 {
   color: #fff
}

.ls-edu .ls-sub {
   color: #c3c9d1
}

.ls-edu__cards {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
   margin-top: 38px
}

.ls-edu__card {
   background: #333B45;
   border: 1px solid rgba(255, 255, 255, .14);
   border-radius: var(--radius);
   padding: 28px 26px;
   display: flex;
   flex-direction: column
}

.ls-edu__tag {
   display: inline-block;
   align-self: flex-start;
   background: rgba(255, 255, 255, .10);
   color: #cdd3da;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .04em;
   text-transform: uppercase;
   padding: 5px 12px;
   border-radius: 6px;
   margin-bottom: 16px
}

.ls-edu__card h3 {
   font-size: 20px;
   color: #fff;
   margin-bottom: 10px
}

.ls-edu__card p {
   color: #aeb6c0;
   font-size: 14.5px;
   margin: 0 0 20px;
   flex: 1 1 auto;
   line-height: 1.55
}

.ls-edu__card .ls-btn {
   align-self: flex-start
}

.ls-edu__note {
   text-align: center;
   color: #aeb6c0;
   font-size: 13.5px;
   margin: 30px auto 0;
   max-width: 64ch;
   line-height: 1.6;
   text-wrap: balance
}

.ls-sub,
.ls-hero__sub,
.ls-plan__tag,
.ls-incl__item p,
.ls-edu__card p,
.ls-tc__card p,
.ls-plan__feats li,
.ls-schools__feat p,
.ls-cart__note {
   text-wrap: balance
}

.ls-footer__note,
.ls-faq__a p {
   text-wrap: pretty
}

.ls-sentences>span {
   display: block
}

.ls-sentences {
   text-wrap: balance
}

#educacao .ls-sub {
   max-width: 78ch
}

.ls-disc {
   max-width: 80ch
}

.ls-plan__brunit {
   white-space: nowrap
}

.nb {
   white-space: nowrap
}

.ls-incl__item p {
   min-height: 42px
}

.ls-edu__cards--2 {
   grid-template-columns: repeat(2, 1fr);
   max-width: 760px;
   margin-left: auto;
   margin-right: auto
}

/* ---------- SketchUp para escolas (band azul, igual oficial) ---------- */
.ls-schools {
   background: #0C1B33;
   color: #fff;
   padding: 78px 0
}

.ls-schools__in {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 48px;
   align-items: center
}

.ls-schools__eyebrow {
   display: block;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: #FBAD26;
   margin-bottom: 12px
}

.ls-schools__h2 {
   font-size: 40px;
   font-weight: 300;
   letter-spacing: .01em;
   color: #fff;
   line-height: 1.08
}

.ls-schools__lead {
   font-size: 18px;
   color: #dcecf8;
   margin: 18px 0 24px;
   line-height: 1.5
}

.ls-schools__feats {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px 20px;
   margin: 0 0 28px
}

.ls-schools__feat {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   font-size: 14.5px;
   color: #eaf3fb;
   line-height: 1.4
}

.ls-schools__feat--full {
   grid-column: 1/-1
}

.ls-schools__fic {
   flex: 0 0 auto;
   width: 38px;
   height: 38px;
   border-radius: 10px;
   background: rgba(255, 255, 255, .14);
   display: flex;
   align-items: center;
   justify-content: center
}

.ls-schools__fic svg {
   width: 20px;
   height: 20px;
   fill: none;
   stroke: #FBAD26;
   stroke-width: 1.7;
   stroke-linecap: round;
   stroke-linejoin: round
}

@media (max-width:560px) {
   .ls-schools__feats {
      grid-template-columns: 1fr
   }
}

.ls-schools__media img {
   width: 100%;
   height: auto;
   border-radius: var(--radius);
   box-shadow: var(--shadow-lg);
   display: block
}

@media (max-width:980px) {
   .ls-schools__in {
      grid-template-columns: 1fr;
      gap: 30px
   }

   .ls-schools__media {
      order: -1
   }

   .ls-schools__h2 {
      font-size: 30px
   }
}

/* ---------- Projeto em Foco — case de credibilidade ---------- */
.ls-case {
   position: relative;
   overflow: hidden;
   background: #0C1B33;
   color: #fff;
   padding: 84px 0
}

.ls-case>.ls-case__wm {
   position: absolute;
   z-index: 0;
   right: 18px;
   top: 11%;
   width: min(430px, 34%);
   height: auto;
   opacity: .12;
   pointer-events: none
}

.ls-case__in {
   display: grid;
   grid-template-columns: 1fr 1.12fr;
   gap: 28px;
   align-items: center
}

.ls-case__eyebrow {
   display: block;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: #FBAD26;
   margin-bottom: 12px
}

.ls-case__h2 {
   font-size: 40px;
   font-weight: 300;
   letter-spacing: .01em;
   color: #fff;
   line-height: 1.08;
   margin: 0;
   text-wrap: balance
}

.ls-case__lead {
   font-size: 19px;
   color: #dcecf8;
   margin: 18px 0 24px;
   line-height: 1.6
}

.ls-case__facts {
   list-style: none;
   margin: 0 0 26px;
   padding: 0;
   display: grid;
   gap: 12px
}

.ls-case__facts li {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 15px;
   color: #eaf3fb;
   line-height: 1.4
}

.ls-case__facts b {
   color: #fff;
   font-weight: 700
}

.ls-case__fic {
   flex: 0 0 auto;
   width: 38px;
   height: 38px;
   border-radius: 10px;
   background: rgba(255, 255, 255, .12);
   display: flex;
   align-items: center;
   justify-content: center
}

.ls-case__fic svg {
   width: 20px;
   height: 20px;
   fill: none;
   stroke: #FBAD26;
   stroke-width: 1.7;
   stroke-linecap: round;
   stroke-linejoin: round
}

.ls-case__media {
   margin: 0
}

.ls-case__frame {
   position: relative;
   aspect-ratio: 16/9;
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow-lg);
   background: #060d18;
   border: 1px solid rgba(255, 255, 255, .12)
}

.ls-case__video {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0;
   border: 0;
   background: none;
   cursor: pointer;
   display: block
}

.ls-case__poster {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block
}

.ls-case__scrim {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(6, 13, 24, .10) 0%, rgba(6, 13, 24, 0) 45%, rgba(6, 13, 24, .55) 100%)
}

.ls-case__tag {
   position: absolute;
   top: 14px;
   left: 14px;
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: #fff;
   background: rgba(12, 27, 51, .78);
   border: 1px solid rgba(255, 255, 255, .20);
   padding: 5px 10px;
   border-radius: 6px
}

.ls-case__playbtn {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 74px;
   height: 74px;
   border-radius: 50%;
   background: rgba(12, 27, 51, .55);
   border: 2px solid rgba(255, 255, 255, .92);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
   transition: transform .15s ease, background .15s ease, border-color .15s ease
}

.ls-case__playbtn svg {
   width: 30px;
   height: 30px;
   fill: #fff;
   margin-left: 4px
}

.ls-case__video:hover .ls-case__playbtn,
.ls-case__video:focus-visible .ls-case__playbtn {
   transform: translate(-50%, -50%) scale(1.08);
   background: #FBAD26;
   border-color: #FBAD26
}

.ls-case__video:hover .ls-case__playbtn svg,
.ls-case__video:focus-visible .ls-case__playbtn svg {
   fill: #0C1B33
}

.ls-case__video:focus-visible {
   outline: 3px solid #FBAD26;
   outline-offset: 3px
}

.ls-case__iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0
}

@media (prefers-reduced-motion:reduce) {
   .ls-case__playbtn {
      transition: none
   }

   .ls-case__video:hover .ls-case__playbtn,
   .ls-case__video:focus-visible .ls-case__playbtn {
      transform: translate(-50%, -50%)
   }
}

.ls-case__note {
   margin: 12px 0 0;
   font-size: 13px;
   color: #9fb0c4;
   line-height: 1.5;
   text-align: center
}

.ls-case__note a {
   color: #dcecf8;
   text-decoration: underline
}

@media (max-width:980px) {
   .ls-case__in {
      grid-template-columns: 1fr;
      gap: 28px
   }

   .ls-case__media {
      order: -1
   }

   .ls-case__h2 {
      font-size: 30px
   }

   .ls-case {
      padding: 60px 0
   }

   .ls-case>.ls-case__wm {
      display: none
   }
}

/* ---------- FAQ ---------- */
.ls-faq {
   display: grid;
   gap: 12px;
   margin-top: 38px
}

.ls-faq__item {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius-sm)
}

.ls-faq__item summary {
   cursor: pointer;
   list-style: none;
   padding: 20px 24px;
   font-weight: 600;
   font-size: 17px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
   color: var(--ink)
}

.ls-faq__item summary::-webkit-details-marker {
   display: none
}

.ls-faq__item summary::after {
   content: "+";
   font-size: 26px;
   color: var(--blue);
   font-weight: 400;
   line-height: 1;
   flex: 0 0 auto
}

.ls-faq__item[open] summary::after {
   content: "\2013"
}

.ls-faq__a {
   padding: 0 24px 20px
}

.ls-faq__a p {
   margin: 0;
   color: var(--ink-2);
   font-size: 15.5px;
   line-height: 1.65
}

/* ---------- CTA final ---------- */
.ls-final {
   background: var(--dark);
   color: #fff;
   text-align: center;
   padding: 72px 0
}

.ls-final h2 {
   color: #fff;
   font-size: 34px;
   font-weight: 300
}

.ls-final p {
   color: #c3c9d1;
   font-size: 18px;
   margin: 14px 0 28px
}

/* ---------- Footer ---------- */
.ls-footer {
   background: #1B1F23;
   color: #aab1ba;
   padding: 56px 0 0;
   font-size: 14.5px
}

.ls-footer__grid {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 1fr;
   gap: 32px
}

.ls-footer__brand img {
   height: 28px;
   width: auto;
   max-width: 180px;
   align-self: flex-start
}

.ls-footer__brandlogos {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 9px
}

.ls-footer__note {
   font-size: 13px;
   color: #7e8690;
   max-width: 280px;
   margin: 16px 0 0
}

.ls-footer__tclogo {
   height: 36px !important;
   width: auto;
   max-width: none;
   align-self: flex-start;
   filter: brightness(0) invert(1);
   margin-left: -21px;
   margin-top: -2px
}

.ls-footer__brandlogos img:not(.ls-footer__tclogo) {
   height: 35px;
   margin-left: -9px
}

.ls-footer__col h4 {
   color: #fff;
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: .08em;
   margin-bottom: 14px
}

.ls-footer__col {
   display: flex;
   flex-direction: column;
   gap: 11px
}

.ls-footer__col a {
   color: #aab1ba
}

.ls-footer__col a:hover {
   color: #fff
}

.ls-footer__small {
   font-size: 12.5px;
   color: #7e8690
}

.ls-footer__bar {
   border-top: 1px solid rgba(255, 255, 255, .08);
   margin-top: 44px;
   padding: 20px 0;
   font-size: 13px;
   color: #7e8690
}

/* ---------- Barra de compra mobile + WhatsApp FAB ---------- */
.ls-buybar {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 70;
   display: none;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
   background: #fff;
   border-top: 1px solid var(--line);
   box-shadow: 0 -8px 24px rgba(20, 25, 30, .12);
   padding: 12px 18px
}

.ls-buybar__info {
   display: flex;
   flex-direction: column;
   line-height: 1.25
}

.ls-buybar__plan {
   font-weight: 700;
   font-size: 14px
}

.ls-buybar__price {
   color: var(--ink-2);
   font-size: 13px
}

.ls-wa-fab {
   position: fixed;
   right: 20px;
   bottom: 22px;
   z-index: 65;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: var(--wa);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
   transition: transform .15s ease
}

.ls-wa-fab:hover {
   transform: scale(1.07)
}

.ls-wa-fab.is-recuado {
   opacity: 0;
   visibility: hidden;
   transform: scale(.86);
   pointer-events: none;
   transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s
}

/* ---------- Checkout (checkout.html) ---------- */

.co-pagform-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 18px}
.co-pagform-opt{display:flex;flex-direction:column;gap:4px;background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;cursor:pointer;position:relative}
.co-pagform-opt:hover{border-color:var(--blue)}
.co-pagform-opt input{position:absolute;top:14px;right:14px;width:18px;height:18px;accent-color:var(--blue)}
.co-pagform-opt:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-soft)}
.co-pagform-opt__t{font-weight:700;font-size:14.5px;color:var(--ink);padding-right:26px}
.co-pagform-opt__d{font-size:12.5px;color:var(--ink-2)}
@media (max-width:560px){.co-pagform-opts{grid-template-columns:1fr}}

.co-pix-valor-row{display:flex;justify-content:space-between;align-items:baseline;background:var(--lav);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:18px}
.co-pix-valor-row span{font-size:14px;font-weight:600;color:var(--ink-2)}
.co-pix-valor-row b{font-size:22px;font-weight:800;color:var(--ink)}

.co-pix-qr-wrap{display:flex;justify-content:center;padding:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:14px}
.co-pix-qr-wrap img{width:220px;height:220px;display:block}

.co-pix-ttl{text-align:center;font-size:13.5px;font-weight:700;color:var(--blue);margin:0 0 18px}
.co-pix-ttl.is-expirado{color:var(--err)}

.co-pix-copia-label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.co-pix-copia-row{display:flex;gap:8px;margin-bottom:16px}
.co-pix-copia-row input{flex:1;font-family:var(--font);font-size:13px;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;color:var(--ink-2);background:var(--lav)}
.co-pix-copiar-btn{background:var(--ink);color:#fff;border:0;border-radius:8px;padding:0 18px;font-weight:700;cursor:pointer;font-size:13px}

.co-top {
   background: var(--dark);
   color: #fff
}

.co-top__in {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 66px
}

.co-top__brand {
   display: flex;
   align-items: center;
   gap: 10px
}

.co-top__brand img {
   height: 30px;
   width: auto;
   margin-left: -7px;
   margin-right: -6px
}

.co-top__brand .co-top__tclogo {
   height: 32px;
   width: auto;
   margin: 0 -17px 0 -17px
}

.co-top__back {
   color: #cdd6df;
   font-weight: 600;
   font-size: 14px;
   display: inline-flex;
   align-items: center;
   gap: 6px
}

.co-top__back:hover {
   color: #fff
}

.co-top__secure {
   color: #aeb6c0;
   font-size: 13px;
   display: inline-flex;
   align-items: center;
   gap: 7px
}

.co-top__secure svg {
   width: 15px;
   height: 15px;
   fill: none;
   stroke: var(--green);
   stroke-width: 2
}

@media (max-width:600px) {
   .co-top__secure {
      display: none
   }
}

.co-wrap {
   max-width: 1120px;
   margin: 0 auto;
   padding: 36px 24px 72px
}

.co-h1 {
   font-size: 32px;
   font-weight: 300;
   letter-spacing: .01em;
   color: var(--ink)
}

.co-h1__sub {
   color: var(--ink-2);
   font-size: 15px;
   margin: 6px 0 26px
}

.co-grid2 {
   display: grid;
   grid-template-columns: 1.45fr .9fr;
   gap: 36px;
   align-items: start
}

.co-card {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 28px;
   margin-bottom: 22px
}

.co-step {
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--blue)
}

.co-card h2 {
   font-size: 21px;
   font-weight: 700;
   margin: 4px 0 18px;
   color: var(--ink)
}

.co-form {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px
}

.co-field {
   display: flex;
   flex-direction: column;
   gap: 6px
}

.co-field[hidden] {
   display: none !important
}

.co-field--full {
   grid-column: 1/-1
}

.co-field label {
   font-size: 13px;
   font-weight: 600;
   color: var(--ink)
}

.co-field label .req {
   color: var(--err)
}

.co-field input,
.co-field select {
   font-family: var(--font);
   font-size: 15px;
   padding: 12px 14px;
   border: 1.5px solid var(--line);
   border-radius: 8px;
   color: var(--ink);
   background: #fff;
   width: 100%
}

.co-field input:focus,
.co-field select:focus {
   outline: none;
   border-color: var(--blue);
   box-shadow: 0 0 0 3px var(--blue-soft)
}

.co-field input.is-err,
.co-field select.is-err {
   border-color: var(--err)
}

.co-parcel-total{display:flex;justify-content:space-between;align-items:baseline;background:var(--lav);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:16px}
.co-parcel-total span{font-size:14px;font-weight:600;color:var(--ink-2)}
.co-parcel-total b{font-size:20px;font-weight:800;color:var(--ink)}
.co-parcel-resumo{font-size:13.5px;color:var(--ink-2);margin:10px 0 18px;line-height:1.5}

.co-biz {
   grid-column: 1/-1;
   display: flex;
   align-items: center;
   gap: 18px;
   margin-top: 4px;
   font-size: 14px;
   font-weight: 600
}

.co-biz label {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   cursor: pointer;
   font-weight: 600
}

.co-paynote {
   font-size: 13.5px;
   color: var(--ink-2);
   margin-top: 12px;
   background: var(--lav);
   border-radius: 8px;
   padding: 12px 14px;
   line-height: 1.5
}

.co-summary {
   position: sticky;
   top: 24px;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 26px
}

.co-summary h2 {
   font-size: 20px;
   font-weight: 700;
   margin-bottom: 18px;
   color: var(--ink)
}

.co-item {
   display: block;
   border-bottom: 1px solid var(--line);
   padding-bottom: 18px;
   margin-bottom: 18px
}

.co-qty-row{display:flex;align-items:center;justify-content:space-between;margin:14px 0 18px}
.co-qty-row span{font-size:14px;font-weight:600;color:var(--ink)}
.co-qty-stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.co-qty-stepper button{background:#fff;border:0;width:34px;height:34px;cursor:pointer;font-size:18px;color:var(--ink);line-height:1}
.co-qty-stepper button:hover{background:var(--lav)}
.co-qty-stepper button:disabled{cursor:not-allowed;opacity:.5}
.co-qty-stepper input{width:44px;height:34px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-weight:700;color:var(--ink);font-family:var(--font)}
.co-qty-stepper input:disabled{background:var(--line-2);color:var(--ink-3)}

.co-item__n {
   font-weight: 700;
   font-size: 15.5px;
   color: var(--ink);
   line-height: 1.25
}

.co-item__m {
   font-size: 12.5px;
   color: var(--ink-3);
   margin-top: 3px
}

.co-srow {
   display: flex;
   justify-content: space-between;
   font-size: 14.5px;
   margin: 10px 0;
   color: var(--ink-2)
}

.co-srow b {
   color: var(--ink)
}

.co-srow[hidden]{display:none!important}

.co-save {
   color: var(--green);
   font-weight: 700
}

.co-tot {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   border-top: 1px solid var(--line);
   margin-top: 14px;
   padding-top: 14px;
   color: var(--ink)
}

.co-tot span {
   font-weight: 700;
   font-size: 15px
}

/* rotulo ("Total no Pix") numa linha so' */
.co-tot > span:first-child {
   white-space: nowrap;
   margin-right: 16px
}

.co-tot b {
   font-size: 24px;
   font-weight: 800
}

/* .co-tot no seletor: sem ele, ".co-tot span" (mais especifico) vencia e a
   linha da parcela saia no tamanho e no peso do rotulo */
.co-tot .co-tot__inst {
   display: block;
   text-align: right;
   font-size: 13px;
   font-weight: 500;
   color: var(--ink-2);
   margin-top: 2px
}

.co-coupon {
   display: flex;
   gap: 8px;
   margin: 16px 0 4px
}

.co-coupon input {
   flex: 1;
   font-family: var(--font);
   padding: 10px 12px;
   border: 1.5px solid var(--line);
   border-radius: 8px;
   font-size: 14px
}

.co-coupon button {
   background: var(--ink);
   color: #fff;
   border: 0;
   border-radius: 8px;
   padding: 0 16px;
   font-weight: 700;
   cursor: pointer;
   font-size: 13px
}

.co-coupon input {
   text-transform: uppercase
}

.co-cupom-msg {
   font-size: 13px;
   line-height: 1.4;
   margin: 8px 0 0;
   display: none
}

.co-cupom-msg.is-on {
   display: block
}

.co-cupom-msg.is-ok {
   color: var(--green)
}

.co-cupom-msg.is-err {
   color: var(--err, #C0392B)
}

.co-srow--cupom span:first-child {
   color: var(--ink);
   font-weight: 600
}

.co-seals {
   display: flex;
   gap: 14px;
   align-items: center;
   margin-top: 18px;
   flex-wrap: wrap;
   justify-content: center
}

.co-seals img {
   height: 26px;
   width: auto
}

.co-seals .co-seals__pix {
   height: 21px
}

.co-secure {
   font-size: 12.5px;
   color: var(--ink-3);
   text-align: center;
   margin-top: 14px;
   line-height: 1.5
}

.co-trust {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 9px 12px;
   margin-top: 14px;
   padding-top: 14px;
   border-top: 1px solid var(--line-2)
}

.co-trust__item {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 12px;
   font-weight: 600;
   color: var(--ink-2);
   line-height: 1.25
}

.co-trust__item svg {
   width: 18px;
   height: 18px;
   flex: 0 0 18px;
   fill: none;
   stroke: var(--green);
   stroke-width: 1.8
}

.co-trust__item b {
   color: var(--ink);
   font-weight: 700
}

.co-err-msg {
   color: var(--err);
   font-size: 13.5px;
   margin: 10px 0 0;
   display: none
}

.co-err-msg.is-on {
   display: block
}

@media (max-width:920px) {
   .co-grid2 {
      grid-template-columns: 1fr;
      gap: 24px
   }

   .co-summary {
      position: static;
      order: -1
   }

   .co-form {
      grid-template-columns: 1fr
   }

   .co-h1 {
      font-size: 26px
   }
}

/* ---------- Gate de pagamento (malga-checkout so aparece com dados confirmados) ---------- */
/* host do web component: evita FOUC (inline ate o custom element montar) */
malga-checkout {
   display: block
}

malga-checkout[hidden] {
   display: none
}

/* tela de espera apos o pagamento aprovado (checkout.js -> concluirPedido):
   cobre a pagina ate o /api/orders confirmar o pedido */
.co-finalizando {
   position: fixed;
   inset: 0;
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 16px;
   background: rgba(37, 42, 46, .6)
}

.co-finalizando__box {
   width: 100%;
   max-width: 400px;
   background: var(--surface);
   border-radius: var(--radius);
   padding: 28px 24px;
   text-align: center;
   box-shadow: 0 12px 40px rgba(0, 0, 0, .2)
}

.co-finalizando__spin {
   width: 36px;
   height: 36px;
   margin: 0 auto 16px;
   border: 3px solid var(--line);
   border-top-color: var(--blue);
   border-radius: 50%;
   animation: co-girar .8s linear infinite
}

.co-finalizando__titulo {
   color: var(--ink);
   font-size: 17px;
   font-weight: 700;
   margin: 0 0 6px
}

.co-finalizando__texto {
   color: var(--ink-2);
   font-size: 14px;
   margin: 0
}

@keyframes co-girar {
   to {
      transform: rotate(360deg)
   }
}

@media (prefers-reduced-motion: reduce) {
   .co-finalizando__spin {
      animation-duration: 2.4s
   }
}

/* aviso enquanto a Etapa 3 esta bloqueada -- fica visivel no lugar do widget */
.co-pay-locked {
   display: flex;
   align-items: center;
   gap: 10px;
   background: var(--lav);
   border: 1px solid var(--line);
   border-radius: var(--radius-sm);
   padding: 16px 18px;
   color: var(--ink-2);
   font-size: 14px;
   font-weight: 600
}

.co-pay-locked svg {
   flex: 0 0 auto;
   width: 20px;
   height: 20px;
   stroke: var(--ink-3);
   stroke-width: 1.7;
   fill: none
}

/* botao que confirma etapas 1+2 e libera o pagamento / volta a editar --
   fica ENTRE os cards da Etapa 2 e da Etapa 3, por isso ganha margem propria
   nos dois lados em vez de herdar o espacamento do .co-card */
.co-btn-continue {
   display: block;
   width: 100%;
   font-family: var(--font);
   font-weight: 700;
   font-size: 15px;
   border: 0;
   border-radius: var(--radius-sm);
   padding: 16px 18px;
   cursor: pointer;
   background: var(--blue);
   color: #fff;
   margin: -4px 0 22px;
   transition: background .15s ease, transform .15s ease
}

.co-btn-continue:hover {
   background: #00518a
}

.co-btn-continue:active {
   transform: scale(.99)
}

.co-btn-continue.is-editing {
   background: #fff;
   color: var(--blue);
   border: 1.5px solid var(--blue)
}

.co-btn-continue.is-editing:hover {
   background: var(--blue-soft)
}

/* cards de Etapa 1/2 travados enquanto o pagamento esta visivel */
.co-card.is-locked {
   background: var(--lav);
   position: relative
}

.co-card.is-locked h2::after {
   content: "✓ Confirmado";
   margin-left: 10px;
   font-size: 12px;
   font-weight: 800;
   color: var(--green);
   letter-spacing: .02em;
   text-transform: none
}

.lsa.is-locked{opacity:.72;pointer-events:none}
.lsa.is-locked .lsa-item{cursor:not-allowed}

.co-parcel-itens{list-style:none;margin:0 0 16px;padding:0;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.co-parcel-itens li{display:flex;justify-content:space-between;padding:10px 14px;font-size:13.5px;color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.co-parcel-itens li:last-child{border-bottom:0}
.co-parcel-itens li b{color:var(--ink);font-weight:700}
.co-parcel-itens__desc{color:var(--green)}
.co-parcel-itens__desc b{color:var(--green)}

.co-field input:disabled,
.co-field select:disabled {
   background: var(--line-2);
   color: var(--ink-3);
   cursor: not-allowed
}

/* ---------- Carrinho (drawer lateral, igual oficial) ---------- */
.ls-cart-ov {
   position: fixed;
   inset: 0;
   background: rgba(20, 25, 30, .5);
   z-index: 200;
   opacity: 0;
   visibility: hidden;
   transition: opacity .2s ease
}

.ls-cart-ov.is-open {
   opacity: 1;
   visibility: visible
}

.ls-cart {
   position: fixed;
   top: 0;
   right: 0;
   height: 100%;
   width: min(420px, 100%);
   background: #fff;
   z-index: 201;
   transform: translateX(100%);
   transition: transform .26s ease;
   display: flex;
   flex-direction: column;
   box-shadow: -12px 0 40px rgba(20, 25, 30, .22)
}

.ls-cart.is-open {
   transform: none
}

.ls-cart__head {
   background: var(--blue);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 18px 22px
}

.ls-cart__head span {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-weight: 700;
   font-size: 18px
}

.ls-cart__head svg {
   width: 20px;
   height: 20px;
   fill: none;
   stroke: #fff;
   stroke-width: 1.8
}

.ls-cart__close {
   background: none;
   border: 0;
   color: #fff;
   cursor: pointer;
   font-size: 26px;
   line-height: 1;
   padding: 0 4px
}

.ls-cart__body {
   flex: 1 1 auto;
   overflow-y: auto;
   padding: 22px
}

.ls-cart__added {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   color: var(--ink);
   font-weight: 600;
   font-size: 14.5px;
   margin-bottom: 22px;
   line-height: 1.4
}

.ls-cart__check {
   flex: 0 0 auto;
   width: 22px;
   height: 22px;
   border-radius: 50%;
   background: var(--green);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 1px
}

.ls-cart__check svg {
   width: 13px;
   height: 13px;
   fill: none;
   stroke: #fff;
   stroke-width: 2.4
}

.ls-cart__count {
   font-size: 20px;
   font-weight: 800;
   margin-bottom: 8px;
   color: var(--ink)
}

.ls-cart__item {
   display: block;
   border-top: 1px solid var(--line);
   padding-top: 18px
}

.ls-cart__iname {
   font-size: 17px;
   font-weight: 700;
   color: var(--ink);
   line-height: 1.25
}

.ls-cart__sku {
   font-size: 12px;
   color: var(--ink-3);
   margin: 3px 0 8px
}

.ls-cart__sku b {
   color: var(--blue);
   font-weight: 700
}

.ls-cart__iprice {
   font-size: 16px;
   font-weight: 700;
   color: var(--ink)
}

.ls-cart__iprice small {
   font-size: 12.5px;
   font-weight: 600;
   color: var(--ink-2)
}

.ls-cart__qtyrow {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-top: 12px;
   flex-wrap: wrap
}

.ls-cart__stepper {
   display: inline-flex;
   align-items: center;
   border: 1px solid var(--line);
   border-radius: 8px;
   overflow: hidden
}

.ls-cart__stepper button {
   background: #fff;
   border: 0;
   width: 34px;
   height: 34px;
   cursor: pointer;
   font-size: 18px;
   color: var(--ink);
   line-height: 1
}

.ls-cart__stepper button:hover {
   background: var(--lav)
}

.ls-cart__stepper input {
   width: 40px;
   height: 34px;
   border: 0;
   border-left: 1px solid var(--line);
   border-right: 1px solid var(--line);
   text-align: center;
   font-weight: 700;
   color: var(--action);
   font-family: var(--font)
}

.ls-cart__remove {
   background: none;
   border: 0;
   color: var(--ink-2);
   font-size: 13.5px;
   font-weight: 600;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 6px
}

.ls-cart__remove svg {
   width: 15px;
   height: 15px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.8
}

.ls-cart__remove:hover {
   color: var(--err)
}

.ls-cart__empty {
   color: var(--ink-2);
   font-size: 15px;
   text-align: center;
   padding: 30px 0
}

.ls-cart__foot {
   border-top: 1px solid var(--line);
   background: var(--lav);
   padding: 20px 22px
}

.ls-cart__sub {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   margin-bottom: 6px
}

.ls-cart__sub span:first-child {
   font-weight: 700;
   font-size: 15px;
   color: var(--ink)
}

.ls-cart__sub b {
   font-weight: 800;
   font-size: 22px;
   color: var(--ink)
}

.ls-cart__subnote {
   font-size: 12.5px;
   color: var(--ink-2);
   margin: 0 0 14px
}

.ls-cart__note {
   font-size: 12px;
   color: var(--ink-3);
   text-align: center;
   margin: 12px 0 0;
   line-height: 1.5
}

/* ---------- Responsivo ---------- */
@media (max-width:1000px) {
   .ls-hero__h1 {
      font-size: 48px
   }

   .ls-plans {
      grid-template-columns: 1fr;
      max-width: 480px;
      margin: 38px auto 0
   }

   .ls-plan--featured {
      order: 0;
      margin-top: 22px
   }

   .ls-tc__cards {
      grid-template-columns: 1fr
   }

   .ls-edu__cards {
      grid-template-columns: 1fr;
      max-width: 480px;
      margin-left: auto;
      margin-right: auto
   }

   .ls-plans-adv {
      grid-template-columns: 1fr;
      max-width: 480px
   }

   .ls-footer__grid {
      grid-template-columns: 1fr 1fr
   }
}

@media (max-width:680px) {
   .ls-nav__links {
      display: none
   }

   .ls-topbar__in {
      gap: 8px;
      justify-content: center
   }

   .ls-topbar__txt {
      font-size: 11.5px;
      text-align: center
   }

   .ls-nav__actions .ls-btn--sm {
      display: none
   }

   .ls-nav__in {
      height: 60px;
      gap: 12px
   }

   .ls-nav__brand {
      flex-shrink: 0;
      min-width: 0;
      gap: 0
   }

   .ls-nav__brand img {
      flex-shrink: 0
   }

   .ls-nav__sk {
      height: 30px;
      margin-left: -7px;
      margin-right: -6px
   }

   .ls-nav__by {
      margin-left: 8px;
      padding-left: 10px
   }

   .ls-nav__tc {
      height: 32px;
      margin-left: -17px;
      margin-right: -17px
   }

   .ls-hero {
      padding: 54px 0 60px
   }

   .ls-hero__h1 {
      font-size: 34px
   }

   .ls-hero__sub {
      font-size: 16px
   }

   .ls-section {
      padding: 54px 0
   }

   .ls-h2 {
      font-size: 28px
   }

   .ls-tabs {
      gap: 18px
   }

   #incluido .ls-incl__item {
      text-align: left
   }

   #incluido .ls-incl__item p {
      text-align: left
   }

   #incluido .ls-incl__item p {
      text-align: center
   }

   .ls-tc__card {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px
   }

   .ls-tc__card p {
      margin-top: 6px
   }

   .ls-footer__grid {
      grid-template-columns: 1fr
   }

   .ls-buybar {
      display: flex
   }

   body:has(.ls-buybar) .ls-wa-fab {
      bottom: 86px
   }

   body:has(.ls-buybar) {
      padding-bottom: 78px
   }
}

@media (prefers-reduced-motion:reduce) {
   * {
      transition: none !important;
      scroll-behavior: auto !important
   }
}

/* ============================================================
   ASSINATURA TOTALCAD — textura BLUEPRINT (grade tecnica CAD)
   ============================================================ */
.ls-bp {
   position: relative
}

.ls-bp::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   background-image:
      linear-gradient(var(--bp-fine, rgba(37, 42, 46, .05)) 1px, transparent 1px),
      linear-gradient(90deg, var(--bp-fine, rgba(37, 42, 46, .05)) 1px, transparent 1px),
      linear-gradient(var(--bp-major, rgba(49, 90, 229, .07)) 1px, transparent 1px),
      linear-gradient(90deg, var(--bp-major, rgba(49, 90, 229, .07)) 1px, transparent 1px);
   background-size: 23px 23px, 23px 23px, 115px 115px, 115px 115px;
   background-position: center;
   -webkit-mask-image: radial-gradient(125% 100% at 50% 0, #000 34%, transparent 80%);
   mask-image: radial-gradient(125% 100% at 50% 0, #000 34%, transparent 80%);
}

.ls-bp>* {
   position: relative;
   z-index: 1
}

.ls-bp--dark {
   --bp-fine: rgba(255, 255, 255, .04);
   --bp-major: rgba(130, 160, 240, .07)
}

.ls-bp--light {
   --bp-fine: rgba(37, 42, 46, .045);
   --bp-major: rgba(49, 90, 229, .07)
}

.ls-hero.ls-bp--dark {
   --bp-fine: rgba(255, 255, 255, .028);
   --bp-major: rgba(130, 160, 240, .05)
}

.ls-hero.ls-bp::before {
   -webkit-mask-image: radial-gradient(135% 110% at 50% 0, #000 20%, transparent 72%);
   mask-image: radial-gradient(135% 110% at 50% 0, #000 20%, transparent 72%)
}

.ls-bp--mark {
   overflow: hidden
}

.ls-bp--mark::after {
   content: "";
   position: absolute;
   z-index: 0;
   pointer-events: none;
   width: min(340px, 46vw);
   aspect-ratio: 1;
   right: -34px;
   bottom: -46px;
   background: var(--bp-diamond) center/contain no-repeat;
   opacity: .05;
}

.ls-bp--mark.ls-bp--dark {
   --bp-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192.92 192.92' fill='%23FFFFFF'%3E%3Cpolygon points='0 96.46 96.46 0 192.92 96.46 167.73 121.66 142.62 96.56 96.46 50.4 50.3 96.56 25.2 121.66 0 96.46'/%3E%3Ccircle cx='96.52' cy='96.63' r='15.66'/%3E%3Cpath d='M45.11 141.57 70.22 116.47 75.74 121.99c11.45 11.45 30.01 11.45 41.46 0l5.46-5.46 25.11 25.11-51.29 51.28z'/%3E%3C/svg%3E")
}

.ls-bp--mark.ls-bp--light {
   --bp-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192.92 192.92' fill='%23315AE5'%3E%3Cpolygon points='0 96.46 96.46 0 192.92 96.46 167.73 121.66 142.62 96.56 96.46 50.4 50.3 96.56 25.2 121.66 0 96.46'/%3E%3Ccircle cx='96.52' cy='96.63' r='15.66'/%3E%3Cpath d='M45.11 141.57 70.22 116.47 75.74 121.99c11.45 11.45 30.01 11.45 41.46 0l5.46-5.46 25.11 25.11-51.29 51.28z'/%3E%3C/svg%3E")
}

.ls-bp--mark.ls-bp--light::after {
   opacity: .06
}

.ls-headmark {
   position: relative;
   overflow: hidden;
   --hm-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192.92 192.92' fill='%23315AE5'%3E%3Cpolygon points='0 96.46 96.46 0 192.92 96.46 167.73 121.66 142.62 96.56 96.46 50.4 50.3 96.56 25.2 121.66 0 96.46'/%3E%3Ccircle cx='96.52' cy='96.63' r='15.66'/%3E%3Cpath d='M45.11 141.57 70.22 116.47 75.74 121.99c11.45 11.45 30.01 11.45 41.46 0l5.46-5.46 25.11 25.11-51.29 51.28z'/%3E%3C/svg%3E")
}

.ls-headmark>* {
   position: relative;
   z-index: 1
}

.ls-headmark::after {
   content: "";
   position: absolute;
   z-index: 0;
   pointer-events: none;
   top: -26px;
   right: -26px;
   width: min(300px, 36vw);
   aspect-ratio: 1;
   opacity: .06;
   background: var(--hm-diamond) top right/contain no-repeat
}

.ls-headmark--on-dark {
   --hm-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192.92 192.92' fill='%23FFFFFF'%3E%3Cpolygon points='0 96.46 96.46 0 192.92 96.46 167.73 121.66 142.62 96.56 96.46 50.4 50.3 96.56 25.2 121.66 0 96.46'/%3E%3Ccircle cx='96.52' cy='96.63' r='15.66'/%3E%3Cpath d='M45.11 141.57 70.22 116.47 75.74 121.99c11.45 11.45 30.01 11.45 41.46 0l5.46-5.46 25.11 25.11-51.29 51.28z'/%3E%3C/svg%3E")
}

.ls-headmark--on-dark::after {
   opacity: .05
}

@media (max-width:680px) {
   .ls-headmark::after {
      width: 160px;
      top: -14px;
      right: -16px;
      opacity: .06
   }
}

.ls-hero>.ls-hero__art,
.lsp-hero>.ls-hero__art {
   position: absolute;
   z-index: 0;
   pointer-events: none;
   top: 0;
   right: 0;
   bottom: 0;
   width: min(660px, 52vw);
   color: #fff;
   opacity: .30;
   -webkit-mask-image: linear-gradient(95deg, transparent 0, #000 46%);
   mask-image: linear-gradient(95deg, transparent 0, #000 46%)
}

.ls-hero__art img {
   position: absolute;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: right bottom
}

.ls-hero.ls-headmark::after {
   width: min(200px, 26vw);
   top: -20px;
   right: -18px;
   opacity: .06
}

.lsp-hero--com-croqui.ls-headmark::after {
   width: min(170px, 20vw);
   top: -16px;
   right: -14px;
   opacity: .045
}

@media (max-width:680px) {

   .ls-hero>.ls-hero__art,
   .lsp-hero>.ls-hero__art {
      width: min(340px, 76vw);
      opacity: .14
   }

   .ls-hero.ls-headmark::after {
      width: 130px;
      top: -12px;
      right: -12px;
      opacity: .05
   }
}

/* ============================================================
   Topbar: acoes (WhatsApp + Area do cliente)
   ============================================================ */
.ls-topbar__acts {
   display: flex;
   align-items: center;
   gap: 14px;
   flex-shrink: 0
}

.ls-topbar__acc {
   order: 2;
   display: inline-flex;
   align-items: center;
   gap: 7px;
   color: #fff;
   font-weight: 600;
   white-space: nowrap;
   border-radius: 4px
}

.ls-topbar__acc svg {
   width: 15px;
   height: 15px;
   fill: none;
   stroke: #fff;
   stroke-width: 1.9;
   stroke-linecap: round;
   stroke-linejoin: round
}

.ls-topbar__acc:hover {
   text-decoration: underline;
   text-underline-offset: 3px
}

@media (max-width:680px) {
   .ls-topbar__more {
      display: none
   }

   .ls-topbar__acc {
      font-size: 11.5px
   }

   .ls-topbar__in {
      justify-content: space-between
   }

   .ls-topbar__txt {
      text-align: left
   }
}

@media (max-width:360px) {
   .ls-topbar__txt {
      font-size: 10.5px
   }
}

/* ============================================================
   Sobre nos (#sobre) — video institucional + fatos da TotalCad
   ============================================================ */
.ls-sobre {
   position: relative;
   overflow: hidden;
   background: var(--surface);
   padding: 78px 0
}

.ls-sobre__in {
   display: grid;
   grid-template-columns: 1.02fr .98fr;
   gap: 52px;
   align-items: center
}

.ls-sobre__frame {
   position: relative;
   aspect-ratio: 16/9;
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow-lg);
   background: #0C1B33;
   border: 1px solid var(--line)
}

.ls-sobre__video {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   padding: 0;
   border: 0;
   background: none;
   cursor: pointer;
   display: block
}

.ls-sobre__poster {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block
}

.ls-sobre__scrim {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(6, 13, 24, .12) 0%, rgba(6, 13, 24, 0) 45%, rgba(6, 13, 24, .48) 100%)
}

.ls-sobre__playbtn {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 72px;
   height: 72px;
   border-radius: 50%;
   background: rgba(12, 27, 51, .55);
   border: 2px solid rgba(255, 255, 255, .92);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
   transition: transform .15s ease, background .15s ease, border-color .15s ease
}

.ls-sobre__playbtn svg {
   width: 29px;
   height: 29px;
   fill: #fff;
   margin-left: 4px
}

.ls-sobre__video:hover .ls-sobre__playbtn,
.ls-sobre__video:focus-visible .ls-sobre__playbtn {
   transform: translate(-50%, -50%) scale(1.08);
   background: #FBAD26;
   border-color: #FBAD26
}

.ls-sobre__video:hover .ls-sobre__playbtn svg,
.ls-sobre__video:focus-visible .ls-sobre__playbtn svg {
   fill: #0C1B33
}

.ls-sobre__iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0
}

.ls-sobre__media {
   margin: 0
}

.ls-sobre__note {
   margin-top: 12px;
   font-size: 13.5px;
   color: var(--ink-3);
   line-height: 1.6
}

.ls-sobre__note a {
   color: var(--blue);
   text-decoration: underline;
   text-underline-offset: 3px
}

.ls-sobre__eyebrow {
   display: inline-block;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .09em;
   text-transform: uppercase;
   color: var(--action);
   margin-bottom: 12px
}

.ls-sobre__copy h2 {
   font-size: 33px;
   letter-spacing: -.01em;
   max-width: 18ch
}

.ls-sobre__lead {
   font-size: 17px;
   color: var(--ink-2);
   line-height: 1.7;
   margin: 16px 0 0;
   max-width: 52ch
}

.ls-sobre__stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 0;
   list-style: none;
   margin: 26px 0;
   padding: 16px 0 0;
   border-top: 1px solid var(--line)
}

.ls-sobre__stats li {
   display: flex;
   flex-direction: column;
   gap: 4px;
   padding-right: 16px
}

.ls-sobre__stats li+li {
   padding-left: 18px;
   border-left: 1px solid var(--line)
}

.ls-sobre__stats b {
   font-size: 19px;
   font-weight: 800;
   color: var(--ink);
   line-height: 1.15;
   letter-spacing: -.01em
}

.ls-sobre__stats span {
   font-size: 13px;
   color: var(--ink-2);
   line-height: 1.45
}

@media (prefers-reduced-motion:reduce) {
   .ls-sobre__playbtn {
      transition: none
   }

   .ls-sobre__video:hover .ls-sobre__playbtn,
   .ls-sobre__video:focus-visible .ls-sobre__playbtn {
      transform: translate(-50%, -50%)
   }
}

@media (max-width:980px) {
   .ls-sobre {
      padding: 56px 0
   }

   .ls-sobre__in {
      grid-template-columns: 1fr;
      gap: 32px
   }

   .ls-sobre__copy h2 {
      font-size: 27px;
      max-width: none
   }

   .ls-sobre__lead {
      max-width: none
   }
}

@media (max-width:680px) {
   .ls-sobre__copy h2 {
      font-size: 24px
   }

   .ls-sobre__stats {
      grid-template-columns: 1fr 1fr;
      gap: 18px 22px
   }

   .ls-sobre__stats b {
      font-size: 22px
   }

   .ls-sobre__playbtn {
      width: 58px;
      height: 58px
   }

   .ls-sobre__playbtn svg {
      width: 23px;
      height: 23px
   }
}

/* ============================================================
   Add-ons: order bump / cross-sell (.lsa-) e upsell de plano
   ============================================================ */
.lsa {
   margin: 18px 0 0;
   padding: 16px 16px 14px;
   background: var(--blue-soft);
   border: 1px solid #CFE2F0;
   border-radius: var(--radius)
}

.lsa-titulo {
   margin: 0 0 12px;
   font-size: 13px;
   font-weight: 800;
   letter-spacing: .07em;
   text-transform: uppercase;
   color: var(--blue)
}

.lsa-item {
   display: grid;
   grid-template-columns: auto auto 1fr auto;
   align-items: center;
   column-gap: 11px;
   row-gap: 0;
   padding: 13px 14px;
   margin-bottom: 9px;
   background: #fff;
   border: 1.5px solid var(--line);
   border-radius: var(--radius-sm);
   cursor: pointer;
   transition: border-color .15s ease, box-shadow .15s ease
}

.lsa-item:last-of-type {
   margin-bottom: 0
}

.lsa-item:hover {
   border-color: var(--blue)
}

.lsa-item.is-on {
   border-color: var(--blue);
   box-shadow: 0 0 0 2px rgba(0, 99, 163, .14)
}

.lsa-item input {
   width: 19px;
   height: 19px;
   margin: 2px 0 0;
   accent-color: var(--blue);
   flex: none
}

.lsa-ic {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   border-radius: 7px;
   background: var(--blue-soft);
   flex: none
}

.lsa-ic svg {
   width: 18px;
   height: 18px;
   fill: none;
   stroke: var(--blue);
   stroke-width: 1.9;
   stroke-linecap: round;
   stroke-linejoin: round
}

.lsa-txt {
   display: block;
   min-width: 0
}

.lsa-nome {
   display: block;
   min-width: 0;
   font-size: 14.5px;
   font-weight: 700;
   color: var(--ink);
   line-height: 1.35
}

.lsa-selo {
   display: inline-block;
   margin-left: 8px;
   padding: 2px 8px;
   border-radius: var(--pill);
   background: var(--gold);
   color: var(--gold-ink);
   font-size: 10.5px;
   font-weight: 800;
   letter-spacing: .05em;
   text-transform: uppercase;
   vertical-align: 1px
}

.lsa-desc {
   grid-column: 1/-1;
   display: block;
   margin-top: 9px;
   font-size: 13.5px;
   color: var(--ink-2);
   line-height: 1.6
}

.lsa-escopo {
   grid-column: 1/-1;
   display: block;
   margin-top: 7px;
   font-size: 12.5px;
   color: var(--ink-3);
   line-height: 1.55
}

.lsa-cat {
   grid-column: 1/-1;
   justify-self: start;
   margin-top: 9px;
   padding: 3px 9px;
   border-radius: var(--pill);
   background: #0C1B33;
   color: #fff;
   font-size: 10.5px;
   font-weight: 800;
   letter-spacing: .06em;
   text-transform: uppercase
}

.lsa-item.is-incluso {
   opacity: .72;
   cursor: default;
   background: #F6F8FA
}

.lsa-item.is-incluso .lsa-preco {
   color: var(--ink-3);
   font-weight: 600
}

.lsa-preco {
   grid-column: 1/-1;
   margin-top: 8px;
   font-size: 14px;
   font-weight: 700;
   color: var(--ink);
   white-space: nowrap;
   text-align: left
}

.lsa-nota {
   margin: 11px 0 0;
   font-size: 12.5px;
   color: var(--ink-2);
   line-height: 1.55
}

.lsa-up {
   margin: 16px 0 0;
   padding: 15px 16px;
   border: 1.5px dashed var(--gold);
   border-radius: var(--radius);
   background: #FFF9EE
}

.lsa-up__t {
   margin: 0;
   font-size: 14.5px;
   font-weight: 800;
   color: var(--ink);
   line-height: 1.4
}

.lsa-up__d {
   margin: 5px 0 12px;
   font-size: 13.5px;
   color: var(--ink-2);
   line-height: 1.6
}

.lsa-up__b {
   font-family: var(--font);
   font-weight: 700;
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: .07em;
   border: 0;
   border-radius: var(--pill);
   padding: 11px 20px;
   background: var(--gold);
   color: var(--gold-ink);
   cursor: pointer
}

.lsa-up__b:hover {
   background: var(--gold-hover)
}

.co-srow--addons b {
   font-weight: 700
}

@media (max-width:680px) {
   .lsa-item {
      grid-template-columns: auto 1fr;
      gap: 9px
   }

   .lsa-ic {
      display: none
   }

   .lsa-preco {
      grid-column: 2;
      text-align: left;
      padding-top: 6px
   }
}

.ls-sobre__note a {
   white-space: nowrap
}

.ls-sobre__stats span {
   text-wrap: pretty
}

.ls-case__note a {
   white-space: nowrap
}

.ls-cart__body {
   min-height: 0
}

.ls-cart__foot {
   flex: none
}

.ls-cart__head {
   flex: none
}

.lsa-item--curto {
   padding: 10px 11px;
   gap: 9px
}

.lsa-item--curto .lsa-nome {
   font-size: 14px
}

.lsa-item--curto .lsa-desc {
   margin-top: 4px;
   font-size: 13px;
   line-height: 1.5
}

.lsa-item--curto .lsa-ic {
   width: 26px;
   height: 26px
}

.lsa-item--curto .lsa-ic svg {
   width: 16px;
   height: 16px
}

#ls-cart-addons {
   margin-top: 14px;
   padding: 13px 13px 11px
}

#ls-cart-addons .lsa-titulo {
   margin-bottom: 9px;
   font-size: 12px
}

#ls-cart-addons .lsa-nota {
   margin-top: 9px;
   font-size: 12px
}

#co-addons {
   margin-top: 20px
}

@media (max-width:1024px) {
   .ls-plan__badge {
      position: static;
      display: inline-block;
      margin: 0 0 10px;
      transform: none;
      border-radius: var(--radius-sm)
   }
}

@media (max-width:560px) {
   .ls-sobre__stats b {
      font-size: 19px
   }

   .ls-sobre__stats {
      grid-template-columns: 1fr;
      padding-top: 0;
      border-top: 0
   }

   .ls-sobre__stats li {
      padding: 14px 0 0;
      border-top: 1px solid var(--line)
   }

   .ls-sobre__stats li+li {
      padding-left: 0;
      border-left: 0
   }
}

@media (max-width:420px) {
   .ls-nav__sk {
      height: 26px;
      margin-left: -6px;
      margin-right: -5px
   }

   .ls-nav__tc {
      height: 28px;
      margin-left: -15px;
      margin-right: -15px
   }

   .ls-nav__by {
      margin-left: 6px;
      padding-left: 8px
   }

   .ls-nav__in {
      gap: 8px
   }

   .ls-nav__cartbadge {
      top: -3px;
      right: -3px
   }
}

.ls-foco-sem-anel:focus,
.ls-foco-sem-anel:focus-visible {
   outline: none !important
}