/* World product landing — shared styles (Bobbie Goods pattern) */

html {
    scroll-behavior: smooth;
}

.bg-page {
    --bg-pink: #ef017f;
    --bg-blue: #0085de;
    --bg-green: #88c701;
    --bg-yellow: #f5b900;
    --bg-ink: #151a24;
    --bg-muted: #626c7a;
    --bg-line: #e5edf5;
    --bg-soft: #f7fbff;
    --bg-cta: #2563eb;
    --bg-cta-hover: #1d4ed8;
    --bg-cta-soft: rgba(37, 99, 235, .1);
    --bg-cta-shadow: rgba(37, 99, 235, .22);
    background: #fff;
    color: var(--bg-ink);
    overflow: hidden;
}

.bg-page a {
    text-decoration: none;
}

.bg-hero {
    --dindili-shapes-content-width: 1320px;
    --dindili-shapes-left-width: 118px;
    --dindili-shapes-right-width: 140px;
    position: relative;
    /* min-height: 790px; */
    padding: 68px 0 54px;
    border-top: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;
    background: #fbfdff;
    isolation: isolate;
}

.bg-hero::before,
.bg-hero::after {
    content: '';
    position: absolute;
    top: 30px;
    bottom: auto;
    height: 730px;
    z-index: 0;
    display: block;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    pointer-events: none;
}

.bg-hero::before {
    left: calc((100% - var(--dindili-shapes-content-width)) / 2 - var(--dindili-shapes-left-width) - 24px);
    width: var(--dindili-shapes-left-width);
    background-image: url('../img/shapes_left.png');
}

.bg-hero::after {
    right: calc((100% - var(--dindili-shapes-content-width)) / 2 - var(--dindili-shapes-right-width) - 24px);
    width: var(--dindili-shapes-right-width);
    background-image: url('../img/shapes_right.png');
}

.bg-hero > .container,
.bg-section > .container,
.bg-offer > .container,
.bg-packs > .container {
    position: relative;
    z-index: 1;
}

/* Eyebrow padrao de todas as secoes (nao usar so "p" nos pais — sobrescreve isso) */
.bg-eyebrow,
.bg-section-head .bg-eyebrow,
.bg-section-head--center .bg-eyebrow,
.bg-kit__head .bg-eyebrow,
.bg-gallery__head .bg-eyebrow,
.bg-social__head .bg-eyebrow {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
    margin: 0 0 14px;
    color: var(--bg-pink);
    font-family: "Google Sans Flex", "Inter", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
}

.bg-eyebrow i,
.bg-section-head .bg-eyebrow i,
.bg-kit__head .bg-eyebrow i,
.bg-gallery__head .bg-eyebrow i,
.bg-social__head .bg-eyebrow i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.1em;
    color: var(--bg-pink);
    font-size: 12px;
    line-height: 1;
}

.bg-section-head--center .bg-eyebrow,
.bg-kit__head .bg-eyebrow {
    justify-content: center;
}

/* Highlight 3 cores — mesmo padrao de /pricing .kk-plans-highlight */
.bg-hl {
    background:
        linear-gradient(100deg, transparent 0 11%, rgba(255, 255, 255, 0.34) 11% 15%, transparent 15% 100%),
        linear-gradient(75deg, transparent 0 32%, rgba(255, 255, 255, 0.3) 32% 36%, transparent 36% 100%),
        linear-gradient(105deg, transparent 0 56%, rgba(255, 255, 255, 0.28) 56% 60%, transparent 60% 100%),
        linear-gradient(80deg, transparent 0 80%, rgba(255, 255, 255, 0.32) 80% 84%, transparent 84% 100%),
        var(--bg-hl-color);
    -webkit-background-clip: text;
    background-clip: text;
    color: var(--bg-hl-color);
    -webkit-text-fill-color: transparent;
}

.bg-hl--pink { --bg-hl-color: #ef017f; }
.bg-hl--green { --bg-hl-color: #88c701; }
.bg-hl--blue { --bg-hl-color: #0085de; }

/* Mesmo padrao de /pricing .kk-plans-hero h1 */
.bg-hero h1 {
    max-width: 720px;
    margin: 0 0 18px;
    color: #0b1020;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(62px, 10vw, 92px);
    font-weight: 600;
    line-height: 0.92;
    letter-spacing: 0;
}

.bg-lead {
    max-width: 620px;
    margin: 0 0 22px;
    color: var(--bg-muted);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.7;
}

.bg-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 0 0 30px;
}

.bg-actions--below-art {
    display: none;
    margin: 18px 0 0;
    justify-content: center;
}

.bg-hero-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    color: #717e9a;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.bg-hero-note i {
    color: var(--bg-green);
    font-size: 15px;
}

.bg-hero-note strong {
    color: #465071;
    font-weight: 900;
}

.bg-actions--inline + .bg-hero-note {
    margin-top: 4px;
}

.bg-actions--below-art + .bg-hero-note {
    display: none;
    width: 100%;
    justify-content: center;
    margin-top: 14px;
    text-align: center;
}

/* Mesmo padrao visual de .faq__cta / .btn-faq-primary + .btn-faq-link */
.bg-actions .bg-btn,
.bg-actions .bg-btn:link,
.bg-actions .bg-btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    padding: 12px 26px;
    background: #ef017f;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(239, 1, 127, 0.22);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.bg-actions .bg-btn:hover {
    color: #fff;
    background: #00a2ff;
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(239, 1, 127, 0.22);
    transform: translateY(-3px);
}

.bg-actions .bg-btn:hover i {
    transform: translateX(4px);
}

.bg-actions .bg-btn i {
    transition: transform 0.2s ease;
}

.bg-actions .bg-btn--ghost,
.bg-actions .bg-btn--ghost:link,
.bg-actions .bg-btn--ghost:visited {
    min-height: 48px;
    padding: 12px 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #1a1a1a;
    font-size: 15px;
    font-weight: 800;
    box-shadow: none;
}

.bg-actions .bg-btn--ghost:hover {
    color: #0085de;
    background: transparent;
    transform: translateY(-3px);
}

.bg-actions .bg-btn--ghost:hover i {
    transform: translateX(4px);
}

.bg-btn,
.bg-btn:link,
.bg-btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    border: 2px solid var(--bg-cta);
    border-radius: 25px;
    padding: 12px 24px;
    background: var(--bg-cta);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 12px 28px var(--bg-cta-shadow);
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.bg-btn:hover {
    color: #fff;
    background: var(--bg-cta-hover);
    border-color: var(--bg-cta-hover);
    box-shadow: 0 14px 30px rgba(29, 78, 216, .24);
    transform: translateY(-2px);
}

.bg-btn--ghost,
.bg-btn--ghost:link,
.bg-btn--ghost:visited {
    background: #fff;
    color: var(--bg-cta);
    box-shadow: none;
}

.bg-btn--ghost:hover {
    color: var(--bg-cta-hover);
    background: #eff6ff;
}

.bg-btn--pink,
.bg-btn--pink:link,
.bg-btn--pink:visited {
    border-color: var(--bg-pink);
    background: var(--bg-pink);
    box-shadow: 0 14px 30px rgba(239, 1, 127, .22);
}

.bg-btn--pink:hover {
    border-color: #d90073;
    background: #d90073;
    box-shadow: 0 16px 34px rgba(239, 1, 127, .28);
}

.bg-signal {
    min-height: 104px;
    border: 0;
    border-radius: 18px;
    padding: 14px;
    background: transparent;
    box-shadow: none;
}

.bg-signal i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
    border-radius: 14px;
    color: #fff;
    background: var(--bg-pink);
}

.bg-signal--blue i {
    background: var(--bg-blue);
}

.bg-signal--green i {
    background: var(--bg-green);
}

.bg-signal strong {
    display: block;
    margin-bottom: 4px;
    color: #0b1020;
    font-size: 14px;
    font-weight: 800;
}

.bg-signal span {
    display: block;
    color: var(--bg-muted);
    font-size: 13px;
    font-weight: 300;
    line-height: 1.45;
}

.bg-hero-art {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-hero-art__product {
    position: relative;
    z-index: 2;
    width: min(108%, 760px);
    max-width: none;
    height: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

.bg-hero-art__badge {
    position: absolute;
    z-index: 3;
    right: 6%;
    top: 10%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(136, 199, 1, .28);
    border-radius: 999px;
    padding: 10px 14px;
    color: #0b1020;
    background: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    box-shadow: 0 12px 28px rgba(17, 24, 39, .72);
    white-space: nowrap;
}

.bg-hero-art__badge i {
    flex: 0 0 auto;
    color: var(--bg-green);
    font-size: 15px;
}

.bg-hero-art__badge-text {
    display: inline;
    min-width: 0;
}

.bg-hero-art__badge strong {
    color: #5d9200;
    font-weight: 900;
}

.bg-line-sheet {
    position: absolute;
    z-index: 1;
    width: 210px;
    min-height: 288px;
    border: 2px solid #111827;
    border-radius: 18px;
    background:
        linear-gradient(#fff, #fff) padding-box,
        repeating-linear-gradient(0deg, rgba(17, 24, 39, .12) 0 1px, transparent 1px 28px);
    box-shadow: 0 18px 42px rgba(17, 24, 39, .1);
}

.bg-line-sheet--left {
    left: 2px;
    top: 48px;
    transform: rotate(-9deg);
}

.bg-line-sheet--right {
    right: -4px;
    bottom: 34px;
    transform: rotate(8deg);
}

.bg-line-sheet::before,
.bg-line-sheet::after {
    content: '';
    position: absolute;
    border: 2px solid #111827;
}

.bg-line-sheet::before {
    left: 36px;
    right: 36px;
    top: 38px;
    height: 86px;
    border-radius: 44px 44px 34px 34px;
    background: #fff;
}

.bg-line-sheet::after {
    left: 52px;
    right: 52px;
    bottom: 44px;
    height: 62px;
    border-radius: 42px 42px 14px 14px;
    background: #fff;
}

.bg-section {
    padding: 82px 0;
}

.bg-section--soft {
    background: #f7fbff;
    border-top: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;
}

.bg-section-head {
    margin-bottom: 32px;
}

.bg-section-head--center {
    max-width: 780px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.bg-section-head--center .bg-fit__title,
.bg-section-head--center > p:not(.bg-eyebrow),
.bg-section-head--center .bg-eyebrow {
    margin-right: auto;
    margin-left: auto;
}

/* Historia personalizada */
.bg-story {
    position: relative;
}

.bg-story__title {
    max-width: 610px;
    margin: 0 0 20px;
    color: #07112c;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(50px, 7.5vw, 66px);
    font-weight: 600;
    line-height: 0.92;
    letter-spacing: 0;
}

.bg-story__copy {
    max-width: 560px;
    margin: 0 0 26px;
    color: #344366;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.72;
}

.bg-story__copy strong {
    color: #16213f;
    font-weight: 800;
}

.bg-story-flow {
    overflow: hidden;
    border: 1px solid rgba(239, 1, 127, .24);
    border-radius: 25px;
    padding: 24px 24px 18px;
    background: #fff;
    box-shadow: 0 22px 48px rgba(17, 24, 39, .07);
}

.bg-story-flow__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

.bg-story-flow__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    color: #182342;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
    text-transform: uppercase;
}

.bg-story-flow__label i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(239, 1, 127, .22);
    border-radius: 50%;
    color: var(--bg-pink);
    background: #fff6fb;
    font-size: 16px;
}

.bg-story-benefits {
    margin-top: 28px;
}

.bg-story-feature,
.bg-story-card,
.bg-story-steps {
    border: 1px solid var(--bg-line);
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(17, 24, 39, .05);
}

.bg-story-feature {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 194px;
    border-color: var(--bg-pink);
    padding: 24px;
    background: #fff9fc;
}

.bg-story-feature__heart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 142px;
    height: 142px;
    border-radius: 50%;
    color: #fff;
    background: #ffe9f4;
    font-size: 70px;
}

.bg-story-feature__heart i {
    filter: drop-shadow(0 9px 12px rgba(239, 1, 127, .24));
}

.bg-story-feature h3,
.bg-story-card h3,
.bg-story-step h4 {
    margin: 0;
    color: #0b1532;
    font-weight: 800;
}

.bg-story-feature h3 {
    margin-bottom: 8px;
    font-size: 22px;
    line-height: 1.2;
}

.bg-story-feature p,
.bg-story-card p,
.bg-story-step p {
    margin: 0;
    color: #425172;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.55;
}

.bg-story-card {
    position: relative;
    min-height: 194px;
    overflow: hidden;
    padding: 24px;
}

.bg-story-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 50%;
    color: #fff;
    background: var(--bg-blue);
    font-size: 20px;
}

.bg-story-card--green .bg-story-card__icon { background: var(--bg-green); }
.bg-story-card--pink .bg-story-card__icon { background: var(--bg-pink); }

.bg-story-card h3 {
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 1.18;
}

.bg-story-card__mark {
    position: absolute;
    top: 24px;
    right: 24px;
    color: #e8f4ff;
    font-size: 40px;
}

.bg-story-card--green .bg-story-card__mark { color: #eaf6d5; }
.bg-story-card--pink .bg-story-card__mark { color: #fde1f0; }

.bg-story-steps {
    margin-top: 20px;
    padding: 22px 26px;
}

.bg-story-steps__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 18px;
    border: 1px solid rgba(136, 199, 1, .22);
    border-radius: 16px;
    padding: 12px 16px;
    color: #2f3f5f;
    background: #f7fde9;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.bg-story-steps__note i {
    color: #6da600;
    font-size: 16px;
}

.bg-story-steps__note strong {
    color: #4f8600;
    font-weight: 900;
}

.bg-story-steps__title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #101b39;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
}

.bg-story-steps__title i {
    color: var(--bg-pink);
    font-size: 25px;
}

.bg-story-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.bg-story-step__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: var(--bg-pink);
    background: #fff0f8;
    font-size: 18px;
}

.bg-story-step__number {
    position: absolute;
    top: -7px;
    left: -7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    background: var(--bg-pink);
    font-size: 12px;
    font-weight: 900;
}

.bg-story-step h4 {
    margin-bottom: 4px;
    font-size: 13px;
}

.bg-story-step p {
    font-size: 12px;
    line-height: 1.4;
}

.bg-story-steps__star {
    color: var(--bg-yellow);
    font-size: 46px;
    filter: drop-shadow(0 8px 12px rgba(245, 185, 0, .2));
}

/* Conteudo do kit */
.bg-kit {
    position: relative;
    background: #fbfdff;
}

.bg-kit__head {
    max-width: 1040px;
    margin: 0 auto 38px;
    text-align: center;
}

.bg-kit__title {
    margin: 0;
    color: #07112c;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(50px, 7.5vw, 64px);
    font-weight: 600;
    line-height: 0.92;
    letter-spacing: 0;
}

.bg-kit__intro {
    max-width: 760px;
    margin: 18px auto 0;
    color: #344366;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.7;
}

.bg-kit-card {
    position: relative;
    min-height: 188px;
    overflow: hidden;
    border: 1px solid var(--bg-line);
    border-radius: 25px;
    padding: 26px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(17, 24, 39, .06);
}

.bg-kit-card--feature {
    min-height: 290px;
    border-color: rgba(239, 1, 127, .22);
    background: #fff8fc;
}

.bg-kit-card--blue {
    border-color: rgba(0, 133, 222, .18);
    background: #f5fbff;
}

.bg-kit-card--green {
    border-color: rgba(136, 199, 1, .22);
    background: #f9fdea;
}

.bg-kit-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    color: #fff;
    background: var(--bg-pink);
    font-size: 23px;
    box-shadow: 0 10px 20px rgba(239, 1, 127, .18);
}

.bg-kit-card--blue .bg-kit-card__icon {
    background: var(--bg-blue);
    box-shadow: 0 10px 20px rgba(0, 133, 222, .18);
}

.bg-kit-card--green .bg-kit-card__icon {
    background: var(--bg-green);
    box-shadow: 0 10px 20px rgba(136, 199, 1, .18);
}

.bg-kit-card__heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 15px 0 10px;
}

.bg-kit-card__heading--inline {
    margin: 0 0 12px;
}

.bg-kit-card__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 2px solid rgba(239, 1, 127, .48);
    border-radius: 9px;
    color: var(--bg-pink);
    background: #fff;
    font-size: 15px;
    font-weight: 900;
}

.bg-kit-card--blue .bg-kit-card__number {
    border-color: rgba(0, 133, 222, .45);
    color: var(--bg-blue);
}

.bg-kit-card--green .bg-kit-card__number {
    border-color: rgba(136, 199, 1, .55);
    color: #6da600;
}

.bg-kit-card h3 {
    margin: 0;
    color: #091431;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
}

.bg-kit-card p {
    margin: 0;
    color: #415071;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
}

.bg-kit-card__feature-copy {
    position: relative;
    z-index: 2;
}

.bg-kit-card__feature-head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
}

.bg-kit-card__feature-head .bg-kit-card__heading {
    margin: 0;
}

.bg-kit-card__pages {
    display: block;
    width: 100%;
    height: auto;
    mix-blend-mode: multiply;
}

.bg-kit-card__spark {
    position: absolute;
    right: 22px;
    bottom: 18px;
    color: #d9ecfb;
    font-size: 28px;
}

.bg-kit-card--feature .bg-kit-card__spark { color: #f6a8cf; }
.bg-kit-card--green .bg-kit-card__spark { color: #a9d849; }

.bg-kit-card--compact {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.bg-kit-card--compact .bg-kit-card__heading {
    margin-top: 4px;
}

/* Titulo da secao "Para quem e" */
.bg-fit__title {
    max-width: 760px;
    margin: 0;
    color: #0b1020;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(44px, 7vw, 50px);
    font-weight: 600;
    line-height: 0.92;
    letter-spacing: 0;
}

.bg-section-head > p:not(.bg-eyebrow),
.bg-copy {
    max-width: 620px;
    margin: 12px 0 0;
    color: var(--bg-muted);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.65;
}

.bg-context-card,
.bg-inclusion,
.bg-fit-card,
.bg-benefit {
    border: 1px solid var(--bg-line);
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(17, 24, 39, .05);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.bg-context-card:hover,
.bg-inclusion:hover,
.bg-fit-card:hover {
    border-color: #c9d9e8;
    box-shadow: 0 20px 42px rgba(17, 24, 39, .08);
    transform: translateY(-3px);
}

.bg-context-card,
.bg-inclusion,
.bg-fit-card {
    min-height: 188px;
    padding: 22px;
}

.bg-context-card--wide {
    min-height: 160px;
    border-color: rgba(239, 1, 127, .16);
    background: #fff6fb;
}

.bg-inclusion--feature {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    min-height: 214px;
    border-color: rgba(239, 1, 127, .14);
    background: #fff6fb;
}

.bg-inclusion--feature .bg-card-icon {
    flex: 0 0 auto;
}

.bg-inclusion--blue {
    border-color: rgba(0, 133, 222, .15);
    background: #f2f9ff;
}

.bg-inclusion--green {
    border-color: rgba(136, 199, 1, .18);
    background: #f8fdea;
}

.bg-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 16px;
    border-radius: 14px;
    color: #fff;
    background: var(--bg-pink);
}

.bg-card--blue .bg-card-icon {
    background: var(--bg-blue);
}

.bg-card--green .bg-card-icon {
    background: var(--bg-green);
}

.bg-card--yellow .bg-card-icon {
    background: var(--bg-yellow);
}

.bg-context-card h3,
.bg-inclusion h3,
.bg-fit-card h3,
.bg-benefit h3 {
    margin: 0 0 8px;
    color: #0b1020;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.18;
}

.bg-context-card p,
.bg-inclusion p,
.bg-fit-card p,
.bg-benefit p {
    margin: 0;
    color: var(--bg-muted);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.55;
}

.bg-proof-line {
    margin-top: 18px;
}

.bg-proof-pill {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 84px;
    border: 1px solid var(--bg-line);
    border-radius: 25px;
    padding: 18px;
    background: #fff;
}

.bg-proof-pill i {
    color: var(--bg-pink);
    margin-top: 3px;
}

.bg-proof-pill strong {
    display: block;
    color: #0b1020;
    font-size: 15px;
    font-weight: 800;
}

.bg-proof-pill span {
    display: block;
    margin-top: 3px;
    color: var(--bg-muted);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.45;
}

.bg-benefit {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border: 0;
    border-bottom: 1px solid var(--bg-line);
    border-radius: 0;
    padding: 6px 0 18px;
    background: transparent;
    box-shadow: none;
}

.bg-benefit:last-child {
    border-bottom: 0;
}

.bg-benefit i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    color: #fff;
    background: var(--bg-pink);
}

.bg-benefit--blue i {
    background: var(--bg-blue);
}

.bg-benefit--green i {
    background: var(--bg-green);
}

.bg-benefit--yellow i {
    background: var(--bg-yellow);
}

.bg-themes-panel {
    overflow: hidden;
    border: 0;
    border-radius: 25px;
    padding: 30px;
    background: #151a24;
    box-shadow: 0 22px 50px rgba(17, 24, 39, .16);
}

.bg-themes-panel h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
}

.bg-themes-panel p {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, .7);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.55;
}

.bg-theme {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    padding: 10px 12px;
    background: #fff;
    color: #202735;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

.bg-theme-more {
    border-color: rgba(255, 255, 255, .2);
    background: var(--bg-pink);
    color: #fff;
}

/* Beneficios e temas */
.bg-why {
    position: relative;
    padding: 64px 0;
    background: #fbfdff;
}

.bg-why__title {
    max-width: 650px;
    margin: 0;
    color: #07112c;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(48px, 7vw, 56px);
    font-weight: 600;
    line-height: 0.92;
    letter-spacing: 0;
}

.bg-why__copy {
    max-width: 590px;
    margin: 16px 0 18px;
    color: #455473;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
}

.bg-why__copy strong {
    color: var(--bg-pink);
    font-weight: 800;
}

.bg-why .bg-benefit {
    min-height: 84px;
    gap: 16px;
    padding: 10px 0;
}

.bg-why .bg-benefit i {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 20px;
    box-shadow: 0 10px 22px rgba(17, 24, 39, .1);
}

.bg-why .bg-benefit h3 {
    margin-bottom: 3px;
    font-size: 17px;
}

.bg-why .bg-benefit p {
    font-size: 13px;
    line-height: 1.45;
}

.bg-why .bg-benefit p {
    max-width: 470px;
}

.bg-why .bg-themes-panel {
    position: relative;
    /* min-height: 650px; */
    padding: 30px 30px 104px;
    background: #061532;
}

.bg-themes-panel__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
}

.bg-themes-panel__star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    color: var(--bg-yellow);
    font-size: 38px;
    filter: drop-shadow(0 8px 14px rgba(245, 185, 0, .22));
}

.bg-why .bg-themes-panel h3 {
    margin: 0;
    font-size: 25px;
}

.bg-why .bg-themes-panel > p {
    max-width: 620px;
    margin: 0 0 18px 68px;
    font-size: 13px;
}

.bg-why .bg-theme {
    justify-content: flex-start;
    gap: 9px;
    min-height: 46px;
    border: 0;
    border-radius: 16px;
    padding: 7px 11px;
    color: #101936;
    font-size: 12px;
    text-align: left;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .1);
}

.bg-theme__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #fff5fa;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
    font-size: 19px;
}

.bg-themes-panel .row > div:nth-child(3n + 2) .bg-theme__icon {
    background: #edf8ff;
}

.bg-themes-panel .row > div:nth-child(3n) .bg-theme__icon {
    background: #f3fbdc;
}

.bg-theme__label {
    min-width: 0;
    overflow: hidden;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bg-why .bg-theme-more {
    position: relative;
    z-index: 2;
    justify-content: center;
    max-width: 220px;
    margin-top: 6px;
    border: 0;
    background: var(--bg-pink);
    color: #fff;
    font-size: 14px;
}

.bg-themes-panel__pages {
    position: absolute;
    right: -4px;
    bottom: -84px;
    z-index: 1;
    display: block;
    width: 390px;
    height: auto;
    transform: none;
}

/* Mini galeria */
.bg-gallery {
    padding: 64px 0;
    border-top: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;
    background: #fff;
}

.bg-gallery__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

.bg-gallery__title {
    max-width: 660px;
    margin: 0;
    color: #0b1020;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(44px, 7vw, 50px);
    font-weight: 600;
    line-height: 0.92;
    letter-spacing: 0;
}

.bg-gallery__cta,
.bg-gallery__cta:link,
.bg-gallery__cta:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    padding: 12px 26px;
    background: #ef017f;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(239, 1, 127, 0.22);
    transition: transform 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
}

.bg-gallery__cta:hover {
    color: #fff;
    background: #00a2ff;
    transform: translateY(-3px);
}

.bg-gallery__cta:hover i {
    transform: translateX(4px);
}

.bg-gallery__cta i {
    transition: transform 0.2s ease;
}

.bg-gallery-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--bg-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(17, 24, 39, .07);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.bg-gallery-card:hover {
    border-color: rgba(239, 1, 127, .28);
    box-shadow: 0 20px 38px rgba(17, 24, 39, .11);
    transform: translateY(-3px);
}

.bg-gallery-card__media {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f8fafc;
}

.bg-gallery-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.bg-gallery-card:hover img {
    transform: scale(1.025);
}

.bg-gallery-card__caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 10px 13px;
}

.bg-gallery-card__caption strong {
    min-width: 0;
    overflow: hidden;
    color: #111a36;
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bg-gallery-card__caption i {
    flex: 0 0 auto;
    color: var(--bg-pink);
}

/* Prova social */
/* Prova social — layout da arte de referencia */
.bg-social {
    position: relative;
    overflow: hidden;
    padding: 84px 0 72px;
    background: #fffaf6;
}

.bg-social__doodle {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    opacity: .9;
}

.bg-social__doodle--star-tl {
    top: 54px;
    left: 42px;
    color: #f5b900;
    font-size: 18px;
}

.bg-social__doodle--curve-tl {
    top: 28px;
    left: 18px;
    width: 70px;
    height: 70px;
    border: 2px dashed #7ec8f5;
    border-right: 0;
    border-bottom: 0;
    border-radius: 70px 0 0 0;
    transform: rotate(-18deg);
}

.bg-social__doodle--star-tr {
    top: 38px;
    right: 120px;
    color: #ef017f;
    font-size: 18px;
}

.bg-social__doodle--curve-tr {
    top: 18px;
    right: 48px;
    width: 90px;
    height: 54px;
    border: 2px dashed #ef017f;
    border-left: 0;
    border-bottom: 0;
    border-radius: 0 70px 0 0;
}

.bg-social__doodle--spark-tr {
    top: 72px;
    right: 36px;
    color: #88c701;
    font-size: 20px;
    font-weight: 700;
}

.bg-social__doodle--heart-r {
    top: 48%;
    right: 18px;
    color: #0085de;
    font-size: 18px;
}

.bg-social__doodle--star-bl {
    bottom: 118px;
    left: 28px;
    color: #ef017f;
    font-size: 18px;
}

.bg-social__doodle--curve-br {
    right: 40px;
    bottom: 48px;
    width: 110px;
    height: 48px;
    border: 2px dashed #7ec8f5;
    border-top: 0;
    border-left: 0;
    border-radius: 0 0 80px 0;
}

.bg-social > .container {
    position: relative;
    z-index: 1;
}

.bg-social__head {
    max-width: 720px;
    margin: 0 0 28px;
}

.bg-social__title {
    margin: 0;
    color: #0b1b3f;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(52px, 8.5vw, 72px);
    font-weight: 600;
    line-height: 0.92;
    letter-spacing: 0;
    text-transform: uppercase;
}

.bg-social__title .bg-hl--pink {
    --bg-hl-color: #ef017f;
}

.bg-social__intro {
    max-width: 520px;
    margin: 16px 0 0;
    color: #5b6780;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;
}

.bg-social__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.bg-social-card {
    position: relative;
    height: 100%;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 22px;
    padding: 18px 18px 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}

.bg-social-card__quote {
    position: absolute;
    top: 14px;
    right: 16px;
    color: #d7e8fb;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
}

.bg-social-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.bg-social-card__avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border: 3px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #ef017f, #0085de);
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 8px 16px rgba(17, 24, 39, .12);
}

.bg-social-card__avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bg-social-card__meta {
    min-width: 0;
}

.bg-social-card__meta strong {
    display: block;
    color: #132048;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
}

.bg-social-card__stars {
    display: flex;
    gap: 2px;
    margin-top: 5px;
    color: #f5b900;
    font-size: 11px;
    line-height: 1;
}

.bg-social-card__text {
    margin: 0;
    color: #4b5874;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
}

.bg-social__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 34px;
    border: 1px solid #eef2f7;
    border-radius: 28px;
    padding: 18px 14px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
}

.bg-social__stat {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 6px 12px;
}

.bg-social__stat:not(:last-child) {
    border-right: 1px solid #edf1f6;
}

.bg-social__stat:last-child {
    justify-content: center;
}

.bg-social__stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 18px;
}

.bg-social__stat-icon--blue {
    color: #0085de;
    background: #e8f5ff;
}

.bg-social__stat-icon--pink {
    color: #ef017f;
    background: #ffe9f4;
}

.bg-social__stat-icon--green {
    color: #6da600;
    background: #eef8d8;
}

.bg-social__stat-copy strong {
    display: block;
    color: #0d1b3d;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.05;
}

.bg-social__stat-copy--pink strong {
    color: #ef017f;
}

.bg-social__stat-copy--green strong {
    color: #6da600;
}

.bg-social__stat-copy span {
    display: block;
    margin-top: 3px;
    color: #6b7690;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}

.bg-social__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 78px;
    border: 3px solid #0085de;
    border-radius: 50%;
    aspect-ratio: 1;
    max-width: 96px;
    margin: 0 auto;
    color: #0085de;
    background:
        radial-gradient(circle at 50% 28%, #e9f6ff 0 38%, transparent 39%),
        #fff;
    text-align: center;
    box-shadow: 0 0 0 4px rgba(0, 133, 222, .08);
}

.bg-social__badge i {
    color: #ef017f;
    font-size: 16px;
    margin-bottom: 2px;
}

.bg-social__badge strong {
    display: block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    line-height: 1.1;
    text-transform: uppercase;
}

.bg-social__badge span {
    display: block;
    margin-top: 2px;
    color: #5b6a86;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
}

.bg-social__tagline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 22px 0 0;
    color: #1a2748;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
}

.bg-social__tagline i {
    color: #ef017f;
}

.bg-offer {
    position: relative;
    overflow: hidden;
    padding: 74px 0;
    border-top: 8px solid var(--bg-pink);
    background: #061532;
    color: #fff;
}

.bg-offer__content {
    position: relative;
    z-index: 2;
}

/* Variante do eyebrow no bloco de oferta (fundo escuro) */
.bg-offer__eyebrow {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
    margin: 0 0 16px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
}

.bg-offer__eyebrow strong {
    color: var(--bg-pink);
    font-weight: 800;
}

.bg-offer__eyebrow i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    color: var(--bg-pink);
    background: rgba(239, 1, 127, .16);
    font-size: 12px;
    line-height: 1;
}

.bg-offer__title {
    max-width: 700px;
    margin: 0 0 22px;
    color: #fff;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(52px, 9vw, 72px);
    font-weight: 600;
    line-height: 0.92;
    letter-spacing: 0;
}

.bg-offer__copy {
    max-width: 650px;
    margin: 0 0 28px;
    color: rgba(255, 255, 255, .76);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.7;
}

.bg-offer__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bg-offer__chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 15px;
    padding: 10px 16px;
    color: rgba(255, 255, 255, .88);
    background: rgba(255, 255, 255, .055);
    font-size: 13px;
    font-weight: 700;
}

.bg-offer__chip i {
    color: var(--bg-pink);
    font-size: 17px;
}

.bg-offer__chip--blue i { color: #3b82f6; }
.bg-offer__chip--green i { color: var(--bg-green); }

.bg-offer__spark {
    position: absolute;
    z-index: 1;
    color: #3b82f6;
    font-size: 40px;
    opacity: .9;
}

.bg-offer__spark--one {
    top: 42px;
    right: 47%;
}

.bg-offer__spark--two {
    left: -42px;
    top: 160px;
    color: var(--bg-pink);
    transform: rotate(-18deg);
}

.bg-offer__spark--three {
    right: 42%;
    bottom: 50px;
    color: var(--bg-green);
    font-size: 30px;
}

.bg-offer-box {
    position: relative;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 32px;
    padding: 32px 34px 26px;
    background: #fff;
    color: var(--bg-ink);
    box-shadow:
        0 28px 64px rgba(0, 0, 0, .14),
        0 0 58px rgba(37, 99, 235, .81);
    animation: bg-offer-box-pulse 2.2s ease-in-out infinite;
    will-change: transform, box-shadow;
}

@keyframes bg-offer-box-pulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 28px 64px rgba(0, 0, 0, .14),
            0 0 42px rgba(37, 99, 235, .45);
    }

    50% {
        transform: scale(1.025);
        box-shadow:
            0 32px 72px rgba(0, 0, 0, .18),
            0 0 78px rgba(37, 99, 235, .95),
            0 0 110px rgba(239, 1, 127, .22);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bg-offer-box {
        animation: none;
    }
}

.bg-offer-box__label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: #64748b;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
}

.bg-offer-box__label i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--bg-cta);
    background: #edf4ff;
    font-size: 18px;
}

.bg-offer-box__price-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.bg-offer-box__price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.bg-offer-box__price-original {
    color: #8b95a8;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: line-through;
}

.bg-offer-box__price-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 999px;
    padding: 4px 10px;
    color: #fff;
    background: #ef017f;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1;
    text-transform: uppercase;
}

.bg-offer-box__price {
    display: block;
    color: #07112c;
    font-size: 62px;
    font-weight: 900;
    line-height: .95;
}

.bg-offer-box__price-note {
    color: #5b6780;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.bg-offer-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.bg-offer-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: #17213d;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.bg-offer-list i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--bg-green);
    font-size: 10px;
}

.bg-offer-box .bg-btn {
    width: 100%;
    min-height: 62px;
    border-radius: 31px;
    font-size: 18px;
}

.bg-offer-box__divider {
    height: 1px;
    margin: 0 0 16px;
    background: #e5eaf0;
}

.bg-offer-box__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    color: #6b7890;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.bg-offer-box__note i {
    color: var(--bg-cta);
}

/* Meus packs */
.bg-packs {
    padding: 42px 0 42px  0;
    border-top: 1px solid #eef2f7;
    background: linear-gradient(180deg, #f8fbff 0%, #fff 72%);
}

.bg-packs__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.bg-packs__head h2 {
    margin: 0 0 4px;
    color: #0b1020;
    font-size: 32px;
    font-weight: 800;
}

.bg-packs__head p {
    margin: 0;
    color: #667085;
    font-size: 14px;
}

.bg-packs__count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #e8edf3;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.bg-pack-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid #e8edf3;
    border-radius: 22px;
    padding: 14px;
    background: #fff;
    color: inherit;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.bg-pack-card:hover {
    color: inherit;
    border-color: #bfdbfe;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .08);
    transform: translateY(-2px);
}

.bg-pack-card__top {
    display: flex;
    gap: 12px;
    align-items: center;
}

.bg-pack-card__thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border: 2px solid #fff;
    border-radius: 16px;
    object-fit: cover;
    background: #f1f5f9;
    box-shadow: 0 8px 16px rgba(15, 23, 42, .1);
}

.bg-pack-card__thumb--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 20px;
}

.bg-pack-card__meta {
    min-width: 0;
    flex: 1;
}

.bg-pack-card__meta strong {
    display: block;
    overflow: hidden;
    color: #0b1020;
    font-size: 15px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bg-pack-card__meta span {
    display: block;
    margin-top: 2px;
    color: #667085;
    font-size: 12px;
    line-height: 1.35;
}

.bg-pack-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    margin-top: 6px;
    padding: 0 10px;
    border: 1px solid #e8edf3;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 11px;
    font-weight: 800;
}

.bg-pack-card__chip--ok {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

.bg-pack-card__chip--run {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.bg-pack-card__chip--err {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #be123c;
}

.bg-pack-card__chip--wait {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c;
}

.bg-pack-card__bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2f7;
}

.bg-pack-card__bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--bg-cta);
}

.bg-pack-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

.bg-pack-card__foot em {
    color: var(--bg-cta);
    font-style: normal;
    font-weight: 800;
}

.bg-packs-empty {
    border: 1px dashed #cbd5e1;
    border-radius: 22px;
    padding: 28px 20px;
    background: #fff;
    text-align: center;
}

.bg-packs-empty strong {
    display: block;
    margin-bottom: 6px;
    color: #0b1020;
    font-size: 16px;
}

.bg-packs-empty p {
    margin: 0 0 16px;
    color: #667085;
    font-size: 14px;
}

@media (max-width: 1388px) {
    .bg-hero {
        --dindili-shapes-content-width: 1140px;
        --dindili-shapes-left-width: 104px;
        --dindili-shapes-right-width: 124px;
    }
}

@media (max-width: 1196px) {
    .bg-hero {
        --dindili-shapes-content-width: 960px;
        --dindili-shapes-left-width: 96px;
        --dindili-shapes-right-width: 112px;
    }
}

@media (max-width: 991.98px) {
    .bg-hero {
        --dindili-shapes-content-width: 720px;
    }

    .bg-actions--inline {
        display: none !important;
    }

    .bg-actions--inline + .bg-hero-note {
        display: none;
    }

    .bg-actions--below-art {
        display: flex;
        width: 100%;
        margin-top: 20px;
        margin-bottom: 0;
    }

    .bg-actions--below-art + .bg-hero-note {
        display: inline-flex;
    }

    .bg-hero-art {
        min-height: 0;
        overflow: visible;
    }

    .bg-hero-art__badge {
        top: auto;
        right: auto;
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
        max-width: calc(100% - 24px);
        justify-content: center;
        gap: 6px;
        padding: 8px 12px;
        font-size: 12px;
        line-height: 1.2;
        white-space: nowrap;
        text-align: center;
        box-shadow: 0 8px 20px rgba(17, 24, 39, .18);
    }

    .bg-hero-art__badge i {
        font-size: 13px;
    }

    .bg-actions--below-art .bg-btn:not(.bg-btn--ghost) {
        width: 100%;
    }

    .bg-hero h1 {
        font-size: clamp(58px, 8vw, 86px);
    }

    .bg-story__title,
    .bg-kit__title {
        font-size: clamp(48px, 6.5vw, 62px);
    }

    .bg-fit__title,
    .bg-gallery__title {
        font-size: clamp(42px, 6vw, 50px);
    }

    .bg-why__title {
        font-size: clamp(46px, 6.2vw, 56px);
    }

    .bg-social__title,
    .bg-offer__title {
        font-size: clamp(50px, 7.5vw, 68px);
    }

    .bg-hero-art {
        min-height: 430px;
        /* margin-top: 14px; */
    }

    .bg-line-sheet {
        width: 174px;
        min-height: 238px;
    }

    .bg-story__title {
        max-width: 720px;
    }

    .bg-story__copy {
        max-width: 700px;
    }

    .bg-story-steps__title br {
        display: none;
    }

    .bg-kit-card--compact {
        min-height: 190px;
    }

    .bg-why .bg-themes-panel {
        min-height: 0;
    }

    .bg-offer__spark {
        display: none;
    }

    .bg-gallery__head {
        display: block;
    }

    .bg-gallery__cta {
        display: flex;
        width: 100%;
        margin-top: 16px;
    }

    .bg-social__doodle--curve-tl,
    .bg-social__doodle--curve-tr,
    .bg-social__doodle--curve-br {
        display: none;
    }

    .bg-social__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bg-social__stats {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    .bg-social__stat {
        border-right: 0;
        border-bottom: 1px solid #edf1f6;
    }

    .bg-social__stat:nth-child(odd) {
        border-right: 1px solid #edf1f6;
    }

    .bg-social__stat:nth-last-child(-n+2) {
        border-bottom: 0;
    }

}

@media (max-width: 988px) {
    .bg-hero {
        --dindili-shapes-content-width: 720px;
        min-height: 0;
        padding: 56px 0 66px;
    }

    .bg-hero::before,
    .bg-hero::after {
        height: 320px;
    }
}

@media (max-width: 766px) {
    .bg-hero {
        --dindili-shapes-content-width: calc(100% - 24px);
    }

    .bg-hero::before,
    .bg-hero::after {
        height: 280px;
        top: 20px;
    }
}

@media (max-width: 575.98px) {
    .bg-hero {
        padding: 38px 0 44px;
    }

    .bg-hero::before,
    .bg-hero::after {
        display: none;
    }

    /* Titulos maiores no mobile */
    .bg-hero h1 {
        font-size: 64px;
    }

    .bg-story__title,
    .bg-kit__title {
        font-size: 52px;
    }

    .bg-fit__title,
    .bg-gallery__title {
        font-size: 46px;
    }

    .bg-why__title {
        font-size: 50px;
    }

    .bg-social__title,
    .bg-offer__title {
        font-size: 54px;
    }

    .bg-page .faq__header h2 {
        font-size: 46px;
    }

    .bg-packs__head h2 {
        font-size: 36px;
    }

    .bg-lead {
        font-size: 16px;
    }

    .bg-actions--below-art {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .bg-actions--below-art .bg-btn:not(.bg-btn--ghost),
    .bg-btn {
        width: 100%;
    }

    .bg-eyebrow,
    .bg-section-head .bg-eyebrow,
    .bg-kit__head .bg-eyebrow,
    .bg-gallery__head .bg-eyebrow,
    .bg-social__head .bg-eyebrow,
    .bg-offer__eyebrow {
        gap: 7px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.06em;
        line-height: 1.4;
    }

    .bg-eyebrow i,
    .bg-section-head .bg-eyebrow i,
    .bg-kit__head .bg-eyebrow i,
    .bg-gallery__head .bg-eyebrow i,
    .bg-social__head .bg-eyebrow i {
        font-size: 11px;
    }

    .bg-offer__eyebrow i {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }

    .bg-hero-art {
        min-height: 0;
        margin-bottom: 4px;
    }

    .bg-hero-art__product {
        width: min(100%, 420px);
    }

    .bg-hero-art__badge {
        bottom: 8px;
        max-width: calc(100% - 16px);
        padding: 7px 10px;
        font-size: 11px;
        gap: 5px;
    }

    .bg-line-sheet {
        width: 136px;
        min-height: 186px;
        border-radius: 14px;
    }

    .bg-line-sheet--left {
        left: 0;
        top: 54px;
    }

    .bg-line-sheet--right {
        right: 0;
        bottom: 58px;
    }

    .bg-section,
    .bg-offer {
        padding: 54px 0;
    }

    .bg-context-card,
    .bg-inclusion,
    .bg-fit-card,
    .bg-themes-panel {
        padding: 18px;
    }

    .bg-inclusion--feature {
        display: block;
    }

    .bg-story-flow {
        padding: 12px 12px 14px;
    }

    .bg-story-flow__label {
        display: block;
        min-height: 0;
        font-size: 9px;
        text-align: center;
    }

    .bg-story-flow__label i {
        width: 32px;
        height: 32px;
        margin: 0 auto 7px;
        font-size: 13px;
    }

    .bg-story-feature {
        display: block;
        padding: 20px;
    }

    .bg-story-feature__heart {
        width: 92px;
        height: 92px;
        margin-bottom: 18px;
        font-size: 46px;
    }

    .bg-story-card {
        min-height: 0;
        padding: 20px;
    }

    .bg-story-steps {
        padding: 20px;
    }

    .bg-story-step__icon {
        width: 62px;
        height: 62px;
    }

    .bg-kit__head {
        margin-bottom: 28px;
    }

    .bg-kit__intro {
        font-size: 15px;
    }

    .bg-kit-card {
        min-height: 0;
        padding: 20px;
    }

    .bg-kit-card__feature-head,
    .bg-kit-card--compact {
        display: block;
    }

    .bg-kit-card__feature-head .bg-kit-card__icon,
    .bg-kit-card--compact .bg-kit-card__icon {
        margin-bottom: 16px;
    }

    .bg-kit-card__pages {
        max-width: 360px;
        margin: 0 auto;
    }

    .bg-why__copy {
        font-size: 15px;
    }

    .bg-why .bg-benefit {
        gap: 14px;
    }

    .bg-why .bg-benefit i {
        width: 54px;
        height: 54px;
        font-size: 20px;
    }

    .bg-why .bg-themes-panel {
        padding: 24px 18px 110px;
    }

    .bg-themes-panel__star {
        width: 50px;
        height: 50px;
        font-size: 36px;
    }

    .bg-why .bg-themes-panel h3 {
        font-size: 23px;
    }

    .bg-why .bg-themes-panel > p {
        margin-left: 0;
    }

    .bg-why .bg-theme {
        min-height: 54px;
        gap: 8px;
        padding: 8px;
        font-size: 12px;
    }

    .bg-theme__icon {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .bg-themes-panel__pages {
        right: 0;
        bottom: -62px;
        width: 240px;
    }

    .bg-offer {
        padding: 54px 0;
    }

    .bg-offer__copy {
        font-size: 15px;
    }

    .bg-offer__chip {
        width: 100%;
    }

    .bg-offer-box {
        border-radius: 25px;
        padding: 24px 20px 20px;
    }

    .bg-offer-box__price {
        font-size: 48px;
    }

    .bg-offer-box .bg-btn {
        min-height: 56px;
        font-size: 15px;
    }

    .bg-gallery {
        padding: 50px 0;
    }

    .bg-social {
        padding: 52px 0 44px;
    }

    .bg-social__doodle {
        display: none;
    }

    .bg-social__grid {
        grid-template-columns: 1fr;
    }

    .bg-social__stats {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 8px 10px;
    }

    .bg-social__stat {
        padding: 14px 10px;
        border-right: 0 !important;
        border-bottom: 1px solid #edf1f6;
    }

    .bg-social__stat:last-child {
        border-bottom: 0;
    }

    .bg-social__badge {
        max-width: 88px;
        min-height: 72px;
    }

    .bg-social__tagline {
        font-size: 11px;
        letter-spacing: .05em;
    }
}