/* =========================================================
   Landing (home pública) — réplica do "Landing Page triodrop atualizado"
   No desktop cada seção é uma "tela" proporcional ao layout original
   (1024,5 pt de largura): --u vale 1 pt, então posições e tamanhos são os
   números do PDF. Abaixo de 992px o conteúdo empilha (bloco final).
   Tudo escopado em .lp para não vazar no template legado.
   ========================================================= */

@font-face {
    font-family: 'Open Sauce One';
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/open-sauce-one/open-sauce-one-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sauce One';
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/open-sauce-one/open-sauce-one-latin-700-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sauce One';
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/open-sauce-one/open-sauce-one-latin-800-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sauce One';
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/open-sauce-one/open-sauce-one-latin-900-normal.woff2') format('woff2');
}

.lp {
    --lp-orange: #ff7800;
    --lp-orange-btn: #ff6a00;
    --lp-purple: #9340ff;
    --lp-blue: #5170ff;
    --lp-pink: #e8559f;
    --f-sauce: 'Open Sauce One', 'Poppins', system-ui, sans-serif;
    --f-spartan: 'League Spartan', 'Open Sauce One', system-ui, sans-serif;
    --f-franklin: 'Libre Franklin', system-ui, sans-serif;
    --f-poppins: 'Poppins', system-ui, sans-serif;

    overflow-x: clip;
    /* o ::before do rodapé (z-index 9) sobe 50% sobre a seção anterior */
    position: relative;
    z-index: 10;
}

.lp *,
.lp *::before,
.lp *::after {
    box-sizing: border-box;
}

.lp h1,
.lp h2,
.lp h3,
.lp p {
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
}

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

/* Tela proporcional: 1 --u = 1 pt do layout original */
.lp-canvas {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    container-type: inline-size;
    --u: calc(100cqw / 1024.5);
}

.lp-text-orange { color: var(--lp-orange); }

/* Botão laranja (celular e estados vazios) */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 14px;
    padding: 14px 26px;
    font-family: var(--f-sauce);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: transform .2s ease, filter .2s ease;
}

.lp-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }

.lp-btn--orange {
    background: linear-gradient(180deg, #ff8a1f 0%, var(--lp-orange-btn) 100%);
    color: #fff !important;
    box-shadow: 0 10px 30px -8px rgba(255, 107, 10, .65);
}

.lp-btn--lg { font-size: 1.2rem; padding: 16px 40px; }

/* Botão "Entrar" do header no roxo do layout */
.header-1 .header-right .pp-theme-btn {
    background: linear-gradient(90deg, #6a1fe0 0%, #a23cf0 100%);
    border-radius: 999px;
}

/* =========================================================
   HERO — arte do layout (texto incluso) + botão clicável
   ========================================================= */
.lp-hero {
    background: #12062e;
}

.lp-hero__art {
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
}

.lp-hero__art img {
    width: 100%;
    height: auto;
}

/* área exata do botão "Quero começar" na arte (px da arte de 1724x739) */
.lp-hero__hotspot {
    position: absolute;
    left: calc(105 / 1724 * 100%);
    top: calc(571 / 739 * 100%);
    width: calc(383 / 1724 * 100%);
    height: calc(107 / 739 * 100%);
    border-radius: 1.2vw;
    color: transparent !important;
    font-size: 0;
    transition: box-shadow .2s ease, transform .2s ease;
}

.lp-hero__hotspot:hover {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .25), 0 12px 40px -6px rgba(255, 120, 0, .8);
}

.lp-hero__hotspot:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* No desktop o texto existe só para leitores de tela e buscadores */
.lp-hero__mobile {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* =========================================================
   PASSOS — "Você não precisa começar do zero"  (317 pt)
   ========================================================= */
.lp-steps {
    background: #fff;
}

.lp-steps .lp-canvas {
    aspect-ratio: 1024.5 / 317;
}

.lp-steps__title {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(29 * var(--u));
    text-align: center;
    font-family: var(--f-spartan);
    font-weight: 700;
    /* o PDF usa a League Spartan antiga, mais larga: 31,5pt lá ≈ 38pt na atual */
    font-size: calc(38 * var(--u));
    line-height: 1;
    color: #000;
}

.lp-steps__title span { color: var(--lp-orange); }

/* meio-tom laranja dos cantos */
.lp-steps__dots {
    position: absolute;
    pointer-events: none;
    background-image: radial-gradient(circle, #ff8a1f calc(1.3 * var(--u)), transparent calc(1.5 * var(--u)));
    background-size: calc(6.5 * var(--u)) calc(6.5 * var(--u));
}

.lp-steps__dots--top {
    right: 0;
    top: 0;
    width: calc(150 * var(--u));
    height: calc(200 * var(--u));
    opacity: .45;
    mask-image: radial-gradient(circle at 100% 15%, #000 0%, transparent 62%);
    -webkit-mask-image: radial-gradient(circle at 100% 15%, #000 0%, transparent 62%);
}

.lp-steps__dots--bottom {
    left: 0;
    bottom: 0;
    width: calc(80 * var(--u));
    height: calc(150 * var(--u));
    mask-image: radial-gradient(circle at 0% 85%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at 0% 85%, #000 0%, transparent 70%);
}

.lp-step {
    position: absolute;
    top: calc(139 * var(--u));
    width: calc(303 * var(--u));
    height: calc(162 * var(--u));
    border-radius: calc(19 * var(--u));
    /* borda em degradê azul → rosa */
    border: calc(1.4 * var(--u)) solid transparent;
    background:
        linear-gradient(90deg, #1a022e 0%, #070429 100%) padding-box,
        linear-gradient(90deg, var(--lp-blue) 0%, #9a63e0 55%, var(--lp-pink) 100%) border-box;
    color: #fff;
}

.lp-step--1 { left: calc(32 * var(--u)); }
.lp-step--2 { left: calc(361 * var(--u)); }
.lp-step--3 { left: calc(691 * var(--u)); }

.lp-step__icon {
    position: absolute;
    left: calc(107 * var(--u));
    top: calc(-44 * var(--u));
    width: calc(86 * var(--u));
    height: calc(86 * var(--u));
    border-radius: 50%;
    border: calc(1.4 * var(--u)) solid transparent;
    background:
        linear-gradient(180deg, #1b052f 0%, #0a0430 100%) padding-box,
        linear-gradient(90deg, var(--lp-blue) 0%, #9a63e0 55%, var(--lp-pink) 100%) border-box;
}

.lp-step__icon img {
    position: absolute;
}

.lp-step--1 .lp-step__icon img { left: calc(13 * var(--u)); top: calc(14 * var(--u)); width: calc(56.6 * var(--u)); }
.lp-step--2 .lp-step__icon img { left: calc(17.3 * var(--u)); top: calc(16.9 * var(--u)); width: calc(49 * var(--u)); }
.lp-step--3 .lp-step__icon img { left: calc(13.6 * var(--u)); top: calc(15.4 * var(--u)); width: calc(52.5 * var(--u)); }

/* textos posicionados pela linha de base do layout */
.lp-step__number,
.lp-step__title,
.lp-step__sub {
    position: absolute;
    line-height: 1;
    white-space: nowrap;
}

.lp-step__number {
    font-family: var(--f-sauce);
    font-weight: 900;
    font-size: calc(57.4 * var(--u));
    color: var(--lp-orange);
    letter-spacing: -0.01em;
}

.lp-step__title {
    font-family: var(--f-sauce);
    font-weight: 900;
    font-size: calc(24.8 * var(--u));
    line-height: calc(27 * var(--u));
    color: #fff;
}

.lp-step__sub {
    font-family: var(--f-poppins);
    font-weight: 400;
    font-size: calc(17.6 * var(--u));
    color: #fff;
}

/* (left, top) = (x, linha de base − ascendente) em pt, relativos ao card */
.lp-step--1 .lp-step__number { left: calc(27.6 * var(--u)); top: calc(61.4 * var(--u)); }
.lp-step--1 .lp-step__title { left: calc(109.6 * var(--u)); top: calc(56.6 * var(--u)); }
.lp-step--1 .lp-step__sub { left: calc(109.6 * var(--u)); top: calc(115.6 * var(--u)); }

.lp-step--2 .lp-step__number { left: calc(18.6 * var(--u)); top: calc(56.4 * var(--u)); }
.lp-step--2 .lp-step__title { left: calc(99.6 * var(--u)); top: calc(52.6 * var(--u)); }
.lp-step--2 .lp-step__sub { left: calc(99.6 * var(--u)); top: calc(111.6 * var(--u)); }

.lp-step--3 .lp-step__number { left: calc(19.6 * var(--u)); top: calc(54.4 * var(--u)); }
.lp-step--3 .lp-step__title { left: calc(101.6 * var(--u)); top: calc(54.6 * var(--u)); }
.lp-step--3 .lp-step__sub { left: calc(19.6 * var(--u)); top: calc(113.6 * var(--u)); }

/* =========================================================
   OPERAÇÃO — "Você vende, a operação acontece!"  (626 pt)
   ========================================================= */
.lp-operation {
    background: #07020f;
}

.lp-operation__art {
    width: 100%;
    height: auto;
}

.lp-operation__text {
    position: absolute;
    left: calc(338 * var(--u));
    top: calc(139 * var(--u));
}

.lp-operation__title {
    font-family: var(--f-franklin);
    font-weight: 700;
    font-size: calc(45.7 * var(--u));
    line-height: calc(46 * var(--u));
    letter-spacing: -0.01em !important;
    color: #efefef;
}

.lp-operation__gradient {
    display: inline-block;
    background: linear-gradient(90deg, #ff3a34 0%, #ff8a48 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.lp-operation__lead {
    margin-top: calc(14.6 * var(--u)) !important;
    font-family: var(--f-franklin);
    font-weight: 400;
    font-size: calc(19.5 * var(--u));
    line-height: calc(19.5 * var(--u));
    color: #efefef;
}

.lp-operation__mobile { display: none; }

/* =========================================================
   MARKETPLACES  (288 pt)
   ========================================================= */
.lp-marketplaces {
    background: var(--lp-orange);
}

.lp-marketplaces .lp-canvas {
    aspect-ratio: 1024.5 / 288;
}

.lp-marketplaces__title {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(43 * var(--u));
    text-align: center;
    font-family: var(--f-spartan);
    font-weight: 700;
    /* League Spartan antiga do PDF (28,8pt) ≈ 34,3pt na atual */
    font-size: calc(34.3 * var(--u));
    line-height: 1;
    color: #efefef;
}

.lp-marketplaces__title span { color: var(--lp-purple); }

.lp-marketplaces__card {
    position: absolute;
    left: calc(125 * var(--u));
    top: calc(101 * var(--u));
    width: calc(778 * var(--u));
    height: calc(148 * var(--u));
    background: #fff;
    border-radius: calc(8 * var(--u));
}

/* (x, y, largura) dos logos em pt, relativos ao card (layout: card em 125, 101) */
.lp-mk {
    position: absolute;
}

.lp-mk img {
    width: 100%;
    height: auto;
}

.lp-mk.is-soon img {
    opacity: .38;
    filter: grayscale(1);
}

.lp-mk--ml { left: calc(80 * var(--u)); top: calc(28 * var(--u)); width: calc(164 * var(--u)); }
.lp-mk--shopee { left: calc(263 * var(--u)); top: calc(20 * var(--u)); width: calc(165 * var(--u)); }
.lp-mk--shein { left: calc(411 * var(--u)); top: calc(6 * var(--u)); width: calc(175 * var(--u)); }
.lp-mk--shopify { left: calc(570 * var(--u)); top: calc(10 * var(--u)); width: calc(130 * var(--u)); }
.lp-mk--amazon { left: calc(100 * var(--u)); top: calc(68 * var(--u)); width: calc(135 * var(--u)); }
.lp-mk--magalu { left: calc(231 * var(--u)); top: calc(39 * var(--u)); width: calc(157 * var(--u)); }
.lp-mk--tiktok { left: calc(363 * var(--u)); top: calc(45 * var(--u)); width: calc(219 * var(--u)); }
.lp-mk--bling { left: calc(549 * var(--u)); top: calc(75 * var(--u)); width: calc(129 * var(--u)); }

.lp-mk__soon {
    position: absolute;
    width: calc(75 * var(--u));
    height: calc(20 * var(--u));
    border-radius: calc(10 * var(--u));
    background: var(--lp-purple);
    color: #fff;
    font-family: var(--f-sauce);
    font-weight: 900;
    font-size: calc(9.9 * var(--u));
    line-height: calc(20 * var(--u));
    text-align: center;
    white-space: nowrap;
}

/* (x, y) do selo em pt, relativos ao logo */
.lp-mk--ml .lp-mk__soon { left: calc(56 * var(--u)); top: calc(11 * var(--u)); }
.lp-mk--amazon .lp-mk__soon { left: calc(30 * var(--u)); top: calc(28 * var(--u)); }
.lp-mk--magalu .lp-mk__soon { left: calc(41 * var(--u)); top: calc(57 * var(--u)); }
.lp-mk--shein .lp-mk__soon { left: calc(50 * var(--u)); top: calc(39 * var(--u)); }
.lp-mk--shopify .lp-mk__soon { left: calc(35 * var(--u)); top: calc(35 * var(--u)); }
.lp-mk--tiktok .lp-mk__soon { left: calc(72 * var(--u)); top: calc(51 * var(--u)); }

/* =========================================================
   PLANOS  (576 pt) — cards em HTML, valores vindos do banco
   ========================================================= */
.lp-plans {
    background: #12072e url('../img/landing/planos-fundo.webp') center / cover no-repeat;
    color: #fff;
}

.lp-plans .lp-canvas {
    min-height: calc(576 * var(--u));
    padding: calc(17 * var(--u)) 0 calc(24 * var(--u));
}

.lp-plans__head {
    text-align: center;
}

.lp-plans__title {
    display: inline-block;
    font-family: var(--f-sauce);
    font-weight: 900;
    font-size: calc(32.4 * var(--u));
    line-height: 1.1;
    letter-spacing: -0.035em !important;
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 50%, #e6dbff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.lp-plans__title span {
    -webkit-text-fill-color: var(--lp-orange);
    color: var(--lp-orange);
}

.lp-plans__subtitle {
    margin-top: calc(1 * var(--u)) !important;
    font-family: var(--f-sauce);
    font-weight: 400;
    font-size: calc(12.6 * var(--u));
    color: #ece7f7;
}

.lp-plans__grid {
    display: grid;
    grid-template-columns: calc(259.3 * var(--u)) calc(250.6 * var(--u)) calc(259.2 * var(--u));
    column-gap: calc(12.4 * var(--u));
    justify-content: center;
    align-items: stretch;
    margin-top: calc(18 * var(--u));
}

.lp-plan {
    --tone: rgba(255, 255, 255, .16);
    --tone-strong: #fff;
    --check-bg: rgba(255, 255, 255, .14);
    --check-border: rgba(255, 255, 255, .5);
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(461 * var(--u));
    padding: calc(18 * var(--u)) calc(18.5 * var(--u)) calc(14.4 * var(--u));
    border: 1px solid var(--tone);
    border-radius: calc(10 * var(--u));
    background: linear-gradient(180deg, rgba(24, 16, 44, .94) 0%, rgba(12, 8, 26, .97) 100%);
    font-family: var(--f-sauce);
}

.lp-plan--gold {
    --tone: #ff7a1a;
    --tone-strong: #ff8a2a;
    --check-bg: rgba(255, 122, 26, .22);
    --check-border: #ff7a1a;
}

.lp-plan--diamond {
    --tone: rgba(147, 64, 255, .75);
    --tone-strong: #b583ff;
    --check-bg: rgba(147, 64, 255, .3);
    --check-border: #9a5cff;
}

.lp-plan.is-featured {
    border-width: 1.5px;
    background: linear-gradient(180deg, rgba(48, 22, 18, .95) 0%, rgba(20, 9, 20, .97) 100%);
    box-shadow: 0 0 calc(22 * var(--u)) rgba(255, 106, 0, .55), inset 0 0 calc(14 * var(--u)) rgba(255, 106, 0, .12);
}

.lp-plan__ribbon {
    position: absolute;
    top: calc(-9 * var(--u));
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: calc(4 * var(--u));
    padding: calc(3 * var(--u)) calc(11 * var(--u));
    border-radius: 999px;
    background: #ff7a1a;
    color: #1d0b00;
    font-size: calc(9 * var(--u));
    font-weight: 700;
    white-space: nowrap;
}

.lp-plan__limited {
    position: absolute;
    top: calc(4.4 * var(--u));
    right: calc(10 * var(--u));
    display: inline-flex;
    align-items: center;
    gap: calc(4 * var(--u));
    padding: calc(3 * var(--u)) calc(7 * var(--u));
    border-radius: calc(6 * var(--u));
    background: rgba(106, 31, 224, .35);
    border: 1px solid rgba(147, 64, 255, .8);
    color: #fff;
    font-size: calc(7.3 * var(--u));
    white-space: nowrap;
}

.lp-plan__header {
    display: flex;
    align-items: center;
    gap: calc(14 * var(--u));
    padding-bottom: calc(9 * var(--u));
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.lp-plan__icon {
    flex: 0 0 calc(42 * var(--u));
    height: calc(42 * var(--u));
    border-radius: calc(8 * var(--u));
    display: grid;
    place-items: center;
    font-size: calc(18 * var(--u));
    color: var(--tone-strong);
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
    border: 1px solid rgba(255, 255, 255, .12);
}

.lp-plan__icon svg {
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
}

.lp-plan--silver .lp-plan__icon { color: #a9a9be; }

.lp .lp-plan__name {
    font-family: var(--f-sauce);
    font-weight: 900;
    font-size: calc(17.9 * var(--u));
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
}

.lp-plan__tagline {
    margin-top: calc(3 * var(--u)) !important;
    font-size: calc(11.6 * var(--u));
    color: #c9c4d8;
}

.lp-plan__features {
    list-style: none;
    margin: calc(10 * var(--u)) 0 0;
    padding: 0;
}

.lp-plan__features li {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--u));
    height: calc(18.6 * var(--u));
    font-size: calc(9.5 * var(--u));
    letter-spacing: -0.005em;
    color: rgba(255, 255, 255, .92);
}

/* cards curtos (até 6 itens) respiram mais, como o Prata do layout */
.lp-plan__features:not(:has(li:nth-child(7))) li {
    height: calc(21.2 * var(--u));
}

.lp-plan__features li > i {
    flex: 0 0 calc(15 * var(--u));
    height: calc(15 * var(--u));
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: calc(7.2 * var(--u));
    color: #fff;
    background: var(--check-bg);
    border: 1px solid var(--check-border);
}

/* uma linha por item, como no layout */
.lp-plan__feature-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lp-plan__feature-value {
    white-space: nowrap;
    color: rgba(255, 255, 255, .92);
}

.lp-plan__saving {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u));
    margin-top: calc(8 * var(--u));
    padding: calc(7 * var(--u)) calc(12 * var(--u));
    border-radius: calc(6 * var(--u));
    border: 1px solid var(--tone);
    background: rgba(255, 255, 255, .03);
}

.lp-plan__saving-icon {
    flex: 0 0 calc(22 * var(--u));
    height: calc(22 * var(--u));
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: calc(10 * var(--u));
    color: #2a1000;
    background: linear-gradient(180deg, #ff9a3c, #ff6a00);
}

.lp-plan--diamond .lp-plan__saving-icon {
    color: #fff;
    background: linear-gradient(180deg, #c18cff, #8a3cff);
}

.lp-plan__saving p {
    font-size: calc(9.8 * var(--u));
    line-height: 1.3;
    color: rgba(255, 255, 255, .88);
}

.lp-plan__saving strong { color: var(--tone-strong); font-weight: 700; }
.lp-plan__saving small { font-size: calc(8 * var(--u)); color: #b9b3c9; }

.lp-plan__spacer {
    flex: 1 1 0;
    min-height: calc(10 * var(--u));
}

.lp-plan__pricing {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: calc(7 * var(--u));
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.lp-plan__anchor-label {
    display: inline-flex;
    align-items: center;
    gap: calc(6 * var(--u));
    font-size: calc(9.4 * var(--u));
    line-height: 1.2;
    color: #b9b3c9;
}

.lp-plan__off {
    background: var(--lp-orange);
    color: #fff;
    font-size: calc(7 * var(--u));
    font-weight: 700;
    padding: 1px calc(5 * var(--u));
    border-radius: 999px;
}

.lp-plan__anchor {
    font-weight: 900;
    font-size: calc(17.5 * var(--u));
    line-height: 1.1;
    color: #8f89a3;
}

.lp-plan__price-label {
    margin-top: calc(1 * var(--u));
    font-family: var(--f-franklin);
    font-weight: 300;
    font-size: calc(11.8 * var(--u));
    line-height: 1.1;
    color: #fff;
}

.lp-plan__price {
    font-weight: 900;
    font-size: calc(29.8 * var(--u));
    line-height: 1;
    color: #fff;
}

.lp-plan__payment {
    margin-top: 0;
    font-family: var(--f-franklin);
    font-weight: 300;
    font-size: calc(8.9 * var(--u));
    line-height: 1.2;
    color: #fff;
}

.lp-plan__conditions {
    display: inline-flex;
    align-items: center;
    gap: calc(5 * var(--u));
    margin-top: 0;
    font-size: calc(8.6 * var(--u));
    line-height: 1.2;
    color: #d9d4e6 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lp-plan--gold .lp-plan__conditions,
.lp-plan--diamond .lp-plan__conditions { text-decoration: none; }

.lp-plan__conditions:hover { color: #fff !important; }

.lp-plan__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(8 * var(--u));
    height: calc(35.6 * var(--u));
    margin-top: calc(7 * var(--u));
    border-radius: calc(6 * var(--u));
    background: linear-gradient(180deg, #ff7a1a 0%, #ff5a00 100%);
    color: #fff !important;
    font-size: calc(10.6 * var(--u));
    font-weight: 600;
    text-decoration: none;
    transition: filter .2s ease, transform .2s ease;
}

.lp-plan__cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

.lp-plans__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 24px;
    border: 1px dashed rgba(255, 255, 255, .2);
    border-radius: 20px;
    color: rgba(255, 255, 255, .75);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    font-family: var(--f-sauce);
}

.lp-plans__empty > i { font-size: 2rem; color: var(--lp-orange); }

/* =========================================================
   FAQ  (576 pt)
   ========================================================= */
.lp-faq {
    background: #fff;
}

.lp-faq .lp-canvas {
    min-height: calc(576 * var(--u));
    padding: calc(70 * var(--u)) 0 calc(60 * var(--u));
}

.lp-faq__title {
    margin-left: calc(39.5 * var(--u)) !important;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: calc(40.7 * var(--u));
    line-height: 1;
    letter-spacing: -0.02em !important;
    color: #1d1d27;
}

.lp-faq__grid {
    display: grid;
    grid-template-columns: calc(436.3 * var(--u)) calc(436.3 * var(--u));
    column-gap: calc(35.9 * var(--u));
    align-items: start;
    margin: calc(83 * var(--u)) 0 0 calc(57.7 * var(--u));
}

.lp-faq__column {
    display: flex;
    flex-direction: column;
    gap: calc(9.7 * var(--u));
}

.lp-faq__item {
    border: calc(1.2 * var(--u)) solid #1d1d27;
    border-radius: calc(3.6 * var(--u));
    background: #fafafa;
    transition: box-shadow .2s ease;
}

.lp-faq__item:hover {
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .35);
}

.lp-faq__item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(12 * var(--u));
    min-height: calc(64.4 * var(--u));
    padding: 0 calc(16 * var(--u)) 0 calc(14.8 * var(--u));
    font-family: 'DM Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: calc(13.5 * var(--u));
    line-height: 1.25;
    color: #1d1d27;
}

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

.lp-faq__item summary:focus-visible {
    outline: 2px solid var(--lp-purple);
    outline-offset: 2px;
}

.lp-faq__item summary svg {
    flex: 0 0 calc(9.7 * var(--u));
    width: calc(9.7 * var(--u));
    fill: none;
    stroke: #1d1d27;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s ease;
}

.lp-faq__item[open] summary svg { transform: rotate(180deg); }

.lp-faq__item p {
    padding: calc(2 * var(--u)) calc(30 * var(--u)) calc(17 * var(--u)) calc(14.8 * var(--u));
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: calc(10.2 * var(--u));
    line-height: calc(16.4 * var(--u));
    color: #5b5b66;
}

/* =========================================================
   CELULAR / TABLET (< 992px): conteúdo empilhado
   ========================================================= */
/* =========================================================
   PLANOS E FAQ ABAIXO DE 1200px: a tela proporcional deixaria os textos
   pequenos demais, então passam a usar tamanhos fixos
   ========================================================= */
@media (max-width: 1199px) {
    .lp-plans .lp-canvas,
    .lp-faq .lp-canvas {
        --u: 1px;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Planos */
    .lp-plans .lp-canvas { padding-top: 48px; padding-bottom: 56px; }
    .lp-plans__title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
    .lp-plans__subtitle { font-size: 1rem; margin-top: 8px !important; }

    .lp-plans__grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 380px));
        gap: 36px 20px;
        margin-top: 40px;
    }

    .lp-plan { min-height: 0; padding: 26px 22px 20px; border-radius: 16px; }
    .lp-plan__ribbon { top: -13px; font-size: 13px; padding: 4px 14px; gap: 6px; }
    .lp-plan__limited { top: -12px; font-size: 11px; padding: 3px 9px; background: #2a1257; }
    .lp-plan__header { gap: 14px; padding-bottom: 14px; }
    .lp-plan__icon { flex-basis: 52px; height: 52px; font-size: 22px; border-radius: 12px; }
    .lp .lp-plan__name { font-size: 24px; }
    .lp-plan__tagline { font-size: 15px; }
    .lp-plan__features { margin-top: 14px; }
    .lp-plan__features li,
    .lp-plan__features:not(:has(li:nth-child(7))) li { height: auto; min-height: 30px; font-size: 14px; gap: 10px; }
    .lp-plan__feature-label { white-space: normal; }
    .lp-plan__icon svg { width: 26px; height: 26px; }
    .lp-plan__spacer { min-height: 8px; }
    .lp-plan__features li > i { flex-basis: 20px; height: 20px; font-size: 10px; }
    .lp-plan__saving { padding: 10px 14px; gap: 12px; margin-top: 14px; border-radius: 10px; }
    .lp-plan__saving-icon { flex-basis: 32px; height: 32px; font-size: 14px; }
    .lp-plan__saving p { font-size: 14px; }
    .lp-plan__saving small { font-size: 12px; }
    .lp-plan__pricing { padding-top: 14px; gap: 4px; }
    .lp-plan__anchor-label { font-size: 13px; }
    .lp-plan__anchor { font-size: 22px; }
    .lp-plan__price-label { font-size: 15px; }
    .lp-plan__price { font-size: 40px; }
    .lp-plan__payment { font-size: 13px; }
    .lp-plan__conditions { font-size: 13px; }
    .lp-plan__cta { height: 50px; font-size: 15px; border-radius: 10px; margin-top: 16px; }


    /* FAQ */
    .lp-faq .lp-canvas { min-height: 0; padding-top: 48px; padding-bottom: 56px; }
    .lp-faq__title { margin-left: 0 !important; font-size: clamp(1.9rem, 8vw, 2.6rem); }
    .lp-faq__grid { grid-template-columns: 1fr; row-gap: 12px; margin: 28px 0 0; }
    .lp-faq__column { gap: 12px; }
    .lp-faq__item { border-width: 1.5px; border-radius: 6px; }
    .lp-faq__item summary { min-height: 60px; padding: 14px 16px; font-size: 16px; gap: 12px; }
    .lp-faq__item summary svg { flex-basis: 14px; width: 14px; }
    .lp-faq__item p { padding: 0 16px 18px; font-size: 14px; line-height: 1.6; }
}

@media (max-width: 991px) {
    .lp-canvas {
        --u: 1px;
        aspect-ratio: auto !important;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Hero: texto em HTML + foto */
    .lp-hero__art { display: none; }

    .lp-hero {
        background:
            radial-gradient(60% 50% at 10% 0%, rgba(139, 61, 255, .4) 0%, transparent 70%),
            linear-gradient(160deg, #1d0a40 0%, #0f0428 100%);
    }

    .lp-hero__mobile {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
        padding: 40px 16px 0;
        text-align: center;
        color: #fff;
    }

    .lp-hero__title {
        font-family: var(--f-sauce);
        font-weight: 900;
        font-size: clamp(2rem, 8vw, 2.8rem);
        line-height: 1.02;
        color: #fff;
    }

    .lp-hero__lead {
        margin: 20px auto 28px !important;
        max-width: 560px;
        font-family: var(--f-sauce);
        font-weight: 700;
        font-size: 1.05rem;
        line-height: 1.35;
    }

    /* só a metade direita da arte (foto + painel), sem o texto embutido */
    .lp .lp-hero__photo {
        width: calc(100% + 32px);
        max-width: none;
        height: auto;
        margin: 28px -16px 0;
        aspect-ratio: 994 / 739;
        object-fit: cover;
        object-position: 100% 50%;
        mask-image: linear-gradient(90deg, transparent 0%, #000 8%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%);
    }

    /* Passos */
    .lp-steps .lp-canvas { padding-top: 48px; padding-bottom: 56px; }

    .lp-steps__title {
        position: static;
        text-wrap: balance;
        font-size: clamp(1.5rem, 6vw, 2rem);
        line-height: 1.15;
        padding: 0 8px;
    }

    .lp-steps__dots { display: none; }

    .lp-steps__grid {
        display: flex;
        flex-direction: column;
        gap: 64px;
        max-width: 420px;
        margin: 72px auto 0;
    }

    .lp-step {
        position: relative;
        left: auto !important;
        top: auto;
        width: 100%;
        height: auto;
        border-width: 1.5px;
        border-radius: 18px;
        padding: 60px 22px 26px;
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 14px;
        align-items: center;
    }

    .lp-step__icon {
        left: 50%;
        top: -44px;
        transform: translateX(-50%);
        width: 86px;
        height: 86px;
        border-width: 1.5px;
    }

    .lp-step__icon img { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: 52px !important; }

    .lp-step__number,
    .lp-step__title,
    .lp-step__sub {
        position: static;
        white-space: normal;
    }

    .lp-step__number { grid-row: 1 / span 2; font-size: 56px; }
    .lp-step__title { font-size: 24px; line-height: 26px; }
    .lp-step__sub { grid-column: 2; font-size: 16px; margin-top: 4px !important; }

    /* Operação */
    .lp-operation .lp-canvas { display: flex; flex-direction: column-reverse; padding: 0; }

    .lp-operation__text {
        position: static;
        padding: 44px 16px 24px;
        text-align: center;
    }

    .lp-operation .lp-canvas { flex-direction: column; }
    .lp .lp-operation__art { display: none; }

    .lp-operation__mobile {
        display: block;
        padding: 0 16px 48px;
    }

    .lp .lp-operation__photo {
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
        border-radius: 16px;
    }

    .lp-flow {
        list-style: none;
        max-width: 460px;
        margin: 24px auto 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .lp-flow li {
        position: relative;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
        border-radius: 14px;
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .12);
        color: rgba(255, 255, 255, .85);
        font-family: var(--f-franklin);
        font-size: 15px;
        line-height: 1.3;
    }

    .lp-flow li:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 35px;
        bottom: -11px;
        height: 10px;
        border-left: 2px dashed rgba(147, 64, 255, .7);
    }

    .lp-flow li > i {
        flex: 0 0 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        font-size: 18px;
        color: #fff;
        background: rgba(147, 64, 255, .18);
        border: 1px solid rgba(147, 64, 255, .45);
    }

    .lp-flow strong { display: block; color: #fff; font-size: 16px; }
    .lp-flow em { font-style: normal; font-weight: 700; color: #b583ff; }
    .lp-flow em.is-orange { color: var(--lp-orange); }

    .lp-perks {
        list-style: none;
        max-width: 460px;
        margin: 22px auto 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .lp-perks li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .1);
        color: #efefef;
        font-family: var(--f-franklin);
        font-size: 13px;
        line-height: 1.25;
    }

    .lp-perks li > i { font-size: 18px; flex: 0 0 auto; }
    .lp-perks li:nth-child(1) > i { color: #b06cff; }
    .lp-perks li:nth-child(2) > i { color: var(--lp-orange); }
    .lp-perks li:nth-child(3) > i { color: #ff4d4d; }
    .lp-perks li:nth-child(4) > i { color: #ff8a1f; }

    .lp-operation__title { font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.05; }
    .lp-operation__lead { font-size: 1.1rem; line-height: 1.35; margin-top: 14px !important; }

    /* Marketplaces */
    .lp-marketplaces .lp-canvas { padding-top: 44px; padding-bottom: 48px; }

    .lp-marketplaces__title {
        position: static;
        font-size: clamp(1.4rem, 5.5vw, 1.9rem);
        line-height: 1.15;
    }

    .lp-marketplaces__card {
        position: static;
        width: 100%;
        height: auto;
        max-width: 560px;
        margin: 28px auto 0;
        padding: 18px;
        border-radius: 12px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 12px;
    }

    .lp-mk {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        min-height: 78px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .lp-mk img { width: auto; max-width: 100%; height: 30px; object-fit: contain; }
    .lp-mk--shopee img, .lp-mk--bling img { height: 36px; }

    .lp-mk__soon {
        position: static;
        width: auto;
        height: 20px;
        padding: 0 10px;
        font-size: 10px;
        line-height: 20px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .lp-btn,
    .lp-plan__cta,
    .lp-hero__hotspot {
        transition: none;
    }
}