@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap);

:root {
    --bg: #F0F4FA;
    --surface: #FFFFFF;
    --surface-2: #E8EEF8;
    --border: #D0DCF0;
    --hero-bg: #311171;
    --text: #0F172A;
    --text-2: #475569;
    --text-3: #94A3B8;
    --success: #059669;
    --danger: #DC2626;
    --warning: #D97706;
    --ig-gradient: linear-gradient(135deg, #833AB4 0%, #C13584 35%, #E1306C 65%, #F77737 100%);
    --primary: #C13584;
    --primary-dk: #833AB4;
    --r-sm: 8px;
    --r: 12px;
    --r-lg: 20px;
    --r-xl: 28px;
    --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --header-h: 64px;
    --nav-h: 68px;
    --shadow: 0 1px 4px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .08);
    --shadow-lg: 0 4px 20px rgba(15, 23, 42, .10), 0 12px 40px rgba(15, 23, 42, .10);
    --shadow-xl: 0 8px 32px rgba(15, 23, 42, .14), 0 24px 64px rgba(15, 23, 42, .12);
    --footer-bg: var(--surface);
    --footer-hi: var(--surface-2);
    --footer-btm: var(--surface-2);
    --footer-icon: var(--primary);
    --footer-txt: var(--text-2);
    --footer-txt-dim: var(--text-3);
    --footer-hdg: var(--text-3);
    --footer-link: var(--text-2);
    --footer-link-hv: var(--text);
    --footer-logo-c: var(--text);
    --footer-divider: var(--border);
    --footer-trust-c: var(--text-2);
    --footer-wa: #16a34a;
    --footer-wa-hv: #15803d
}

[data-theme=dark] {
    --bg: #313338;
    --surface: #2b2d31;
    --surface-2: #232428;
    --border: #3b3c42;
    --hero-bg: #232428;
    --text: #dbdee1;
    --text-2: #b5bac1;
    --text-3: #80848e;
    --shadow: 0 2px 8px rgba(0, 0, 0, .3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, .4);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, .5);
    --footer-bg: #1e1f22;
    --footer-hi: #232428;
    --footer-btm: #18191c;
    --footer-icon: #a78bfa;
    --footer-txt: rgba(255, 255, 255, .55);
    --footer-txt-dim: rgba(255, 255, 255, .45);
    --footer-hdg: rgba(255, 255, 255, .35);
    --footer-link: rgba(255, 255, 255, .55);
    --footer-link-hv: #fff;
    --footer-logo-c: #fff;
    --footer-divider: rgba(255, 255, 255, .06);
    --footer-trust-c: rgba(255, 255, 255, .65);
    --footer-wa: #4ade80;
    --footer-wa-hv: #86efac
}

@media (prefers-color-scheme:dark) {
    :root:not([data-theme=light]):not([data-theme=dark]) {
        --bg: #313338;
        --surface: #2b2d31;
        --surface-2: #232428;
        --border: #3b3c42;
        --hero-bg: #232428;
        --text: #dbdee1;
        --text-2: #b5bac1;
        --text-3: #80848e;
        --shadow: 0 2px 8px rgba(0, 0, 0, .3);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, .4);
        --shadow-xl: 0 16px 48px rgba(0, 0, 0, .5);
        --footer-bg: #1e1f22;
        --footer-hi: #232428;
        --footer-btm: #18191c;
        --footer-icon: #a78bfa;
        --footer-txt: rgba(255, 255, 255, .55);
        --footer-txt-dim: rgba(255, 255, 255, .45);
        --footer-hdg: rgba(255, 255, 255, .35);
        --footer-link: rgba(255, 255, 255, .55);
        --footer-link-hv: #fff;
        --footer-logo-c: #fff;
        --footer-divider: rgba(255, 255, 255, .06);
        --footer-trust-c: rgba(255, 255, 255, .65);
        --footer-wa: #4ade80;
        --footer-wa-hv: #86efac
    }
}

*,
::after,
::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth;
    color-scheme: light dark
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background .2s, color .2s
}

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

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

button {
    font-family: var(--font);
    cursor: pointer;
    border: none
}

.app-wrap {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
    width: 100%
}

.hero-section {
    position: relative;
    overflow: hidden;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border)
}

.hero-section h1 {
    position: relative;
    z-index: 1;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 6px
}

.hero-section p {
    position: relative;
    z-index: 1;
    font-size: 14px;
    color: var(--text-2)
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: .3;
    pointer-events: none;
    z-index: 0
}

.orb-1 {
    width: 180px;
    height: 180px;
    background: #c13584;
    top: -70px;
    left: -40px
}

.orb-2 {
    width: 140px;
    height: 140px;
    background: #f77737;
    top: -40px;
    right: -30px
}

.orb-3 {
    width: 160px;
    height: 160px;
    background: #833ab4;
    bottom: -80px;
    right: 80px
}

.orb-4 {
    width: 120px;
    height: 120px;
    background: #fcaf45;
    bottom: -50px;
    left: 100px
}

.htmx-indicator {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    pointer-events: none
}

.htmx-indicator::after {
    content: '';
    display: block;
    height: 3px;
    background: var(--ig-gradient);
    animation: htmxProgress 1s ease-in-out infinite alternate;
    transform-origin: left center
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: block
}

@keyframes htmxProgress {
    0% {
        transform: scaleX(.3);
        opacity: .6
    }

    100% {
        transform: scaleX(1);
        opacity: 1
    }
}

.sticky-top-group {
    position: sticky;
    top: 0;
    z-index: 200
}

.announce-bar {
    position: relative;
    background: #59ff15;
    color: #073b0d;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    padding: 6px 36px 6px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px 8px;
    text-align: center
}

@media (max-width:480px) {
    .announce-bar {
        font-size: 10.5px;
        padding: 5px 32px 5px 10px;
        gap: 3px 6px
    }
}

.announce-bar-text {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.announce-bar-text i {
    color: #073b0d
}

.announce-bar-close {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 19px;
    height: 19px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, .15);
    color: #073b0d;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    flex-shrink: 0
}

.announce-bar-close:hover {
    background: rgba(0, 0, 0, .28)
}

.announce-bar-promo {
    border-bottom: 1px solid rgba(0, 0, 0, .15);
    animation: announcePulse 2.4s ease-in-out infinite
}

@keyframes announcePulse {

    0%,
    100% {
        box-shadow: inset 0 0 0 rgba(255, 255, 255, 0)
    }

    50% {
        box-shadow: inset 0 0 26px rgba(255, 255, 255, .1)
    }
}

#announce-bar-timer {
    font-family: monospace;
    font-variant-numeric: tabular-nums;
    background: rgba(0, 0, 0, .15);
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0
}

.announce-bar-cta {
    display: inline-flex;
    align-items: center;
    background: #073b0d;
    color: #59ff15;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 99px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .02em;
    transition: transform .12s;
    flex-shrink: 0
}

.announce-bar-cta:hover {
    transform: scale(1.05)
}

.app-header {
    height: var(--header-h);
    background: linear-gradient(100deg, #3d0899 0, #7b1fa2 28%, #c13584 54%, #e1306c 74%, #f56830 100%);
    box-shadow: 0 4px 24px rgba(100, 30, 180, .5), 0 1px 6px rgba(0, 0, 0, .3);
    display: flex;
    align-items: center;
    padding: 0 clamp(16px, 4vw, 40px);
    gap: 12px;
    overflow: hidden
}

.app-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity .2s
}

.app-logo:hover {
    opacity: .92
}

.app-logo-mark {
    width: 38px;
    height: 38px;
    background: var(--ig-gradient);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #fff;
    flex-shrink: 0
}

.app-logo-img {
    height: 38px;
    max-width: 220px;
    width: auto;
    object-fit: contain;
    border-radius: 8px;
    display: block
}

.app-logo-name {
    font-size: 17.5px;
    font-weight: 800;
    letter-spacing: -.45px;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .2), 0 0 24px rgba(255, 180, 230, .3);
    white-space: nowrap
}

.desktop-nav {
    display: none
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto
}

.theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s, transform .2s;
    flex-shrink: 0
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, .3);
    transform: rotate(22deg)
}

.header-bell-wrap {
    position: relative
}

.header-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background .15s
}

.header-bell:hover {
    background: rgba(255,255,255,.25)
}

.header-bell-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none
}

.notif-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 360px;
    max-height: 480px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
    border: 1px solid #e2e8f0;
    z-index: 9999;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #1e293b;
    flex-shrink: 0
}

.notif-panel-header > span {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .2px
}

.notif-ler-todas {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.85);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background .15s
}

.notif-ler-todas:hover { background: rgba(255,255,255,.2) }

.notif-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
    flex: 1
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 16px;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background .12s;
    position: relative
}

.notif-item:not(.lida) {
    background: #f8fafc;
    border-left-color: #2563eb
}

.notif-item.lida { background: #fff }

.notif-item:hover { background: #f1f5f9 }

.notif-item + .notif-item { border-top: 1px solid #f1f5f9 }

.notif-ic {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px
}

.notif-ic.ticket { background: rgba(37,99,235,.1) }
.notif-ic.ticket i { font-size: 14px; color: #2563eb }
.notif-ic.pedido { background: rgba(5,150,105,.1) }
.notif-ic.pedido i { font-size: 14px; color: #059669 }

.notif-content { flex: 1; min-width: 0 }

.notif-titulo {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.notif-item.lida .notif-titulo {
    font-weight: 500;
    color: #64748b
}

.notif-corpo {
    font-size: 12px;
    color: #475569;
    margin-bottom: 4px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.notif-item.lida .notif-corpo { color: #94a3b8 }

.notif-tempo {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500
}

.notif-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2563eb;
    flex-shrink: 0;
    margin-top: 5px
}

.notif-loading, .notif-empty {
    padding: 36px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px
}

@media (max-width: 400px) {
    .notif-panel { width: calc(100vw - 24px); right: -60px }
}

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    overflow: hidden
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.btn-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    border-radius: 20px;
    padding: 7px 16px;
    background: rgb(255, 255, 255);
    transition: background .15s;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: .1px
}

.btn-login:hover {
    background: rgb(255, 255, 255)
}

.hide-xs {
    display: none
}

.app-main {
    flex: 1;
    padding-bottom: 0px;
    min-height: 0
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: stretch;
    z-index: 200;
    padding-bottom: env(safe-area-inset-bottom, 0);
    transition: background .2s, border-color .2s, bottom .28s cubic-bezier(.4, 0, .2, 1)
}

.bottom-nav.nav-oculta {
    bottom: calc(-1 * var(--nav-h) - env(safe-area-inset-bottom, 0px))
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text-3);
    font-size: 10px;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    transition: color .15s;
    padding: 8px 4px
}

.bottom-nav-item i {
    font-size: 20px;
    line-height: 1
}

.bottom-nav-item.ativo {
    color: var(--primary)
}

.bottom-nav-item.ativo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    background: var(--ig-gradient);
    border-radius: 0 0 4px 4px
}

.hero {
    position: relative;
    background: var(--hero-bg);
    color: #fff;
    padding: 28px 16px 60px;
    display: flex;
    flex-direction: column;
    align-items: center
}

.hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden
}

.hero-particle {
    position: absolute;
    bottom: -40px;
    color: #fff;
    animation: heroFloat linear infinite;
    will-change: transform, opacity
}

@keyframes heroFloat {
    0% {
        transform: translateY(0) rotate(0);
        opacity: 0
    }

    8% {
        opacity: var(--op, .12)
    }

    90% {
        opacity: var(--op, .12)
    }

    100% {
        transform: translateY(-110vh) rotate(var(--rot, 180deg));
        opacity: 0
    }
}

.hero-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-bottom: 20px
}

.hero-br-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
    letter-spacing: .3px;
    margin-bottom: 14px;
    backdrop-filter: blur(6px)
}

.hero-br-flag {
    width: 22px;
    height: 16px;
    border-radius: 2px;
    flex-shrink: 0
}

.hero-title-row {
    display: flex;
    align-items: center;
    gap: 14px
}

.hero-ig-mark {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    flex-shrink: 0
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
    letter-spacing: .2px
}

.hero-badge i {
    color: #fcaf45
}

.hero-inner h1 {
    font-size: clamp(24px, 5.5vw, 52px);
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1.1;
    color: #fff
}

.hero-inner h1 span {
    display: inline;
    background: var(--ig-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 30px;
    margin-right: 8px
}

.hero-sub {
    font-size: clamp(14px, 2.5vw, 17px);
    color: rgba(255, 255, 255, .65);
    line-height: 1.55;
    max-width: 440px
}

.search-card {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 540px;
    background: var(--surface);
    border-radius: var(--r-xl);
    padding: 24px 22px 20px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 16px 48px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .18);
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: -110px;
    transition: background .2s
}

.search-card-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    letter-spacing: -.1px
}

.card-steps {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px
}

.card-step {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-3);
    white-space: nowrap;
    flex-shrink: 0
}

.card-step.ativo {
    color: var(--text-2);
    font-weight: 600
}

.card-step-num {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-3);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s, border-color .2s, color .2s
}

.card-step.ativo .card-step-num {
    background: var(--ig-gradient);
    border-color: transparent;
    color: #fff
}

.card-step-sep {
    flex: 1;
    height: 1px;
    background: var(--border);
    margin: 0 6px;
    min-width: 12px
}

.search-input-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid #b8d900;
    border-radius: var(--r);
    background: #d8ff00;
    transition: border-color .2s, background .2s;
    overflow: hidden
}

.search-input-wrap.chamar-atencao {
    animation: chamarAtencaoPulso .8s ease-in-out 2;
    border-color: var(--primary)
}

@keyframes chamarAtencaoPulso {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(193, 53, 132, .55)
    }

    25% {
        transform: scale(1.035)
    }

    50% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(193, 53, 132, 0)
    }

    75% {
        transform: scale(1.02)
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(193, 53, 132, 0)
    }
}

.search-input-wrap:focus-within {
    border-color: #8aaa00
}

.input-at {
    padding: 0 6px 0 14px;
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
    flex-shrink: 0;
    user-select: none;
    line-height: 1
}

.handle-input {
    flex: 1;
    border: none;
    border-radius: 0;
    padding: 13px 14px 13px 2px;
    font-size: 16px;
    font-family: var(--font);
    color: #1a1a1a;
    background: 0 0;
    outline: 0;
    min-width: 0
}

.handle-input::placeholder {
    color: #5a5c30
}

.paste-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    margin-right: 4px;
    border: none;
    background: var(--surface-2);
    color: var(--text-2);
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: 14px;
    transition: background .15s, color .15s
}

.paste-hint {
    display: none;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #d8ff00;
    border: 1px solid #b8d900;
    border-radius: var(--r-sm);
    color: #3a4200;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
    animation: fadeInHint .25s ease-out
}

.paste-hint i {
    flex-shrink: 0;
    margin-top: 2px
}

@keyframes fadeInHint {
    from {
        opacity: 0;
        transform: translateY(-4px)
    }

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

.paste-btn:hover {
    background: var(--primary);
    color: #fff
}

.paste-btn:active {
    transform: scale(.94)
}

.search-trust {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin-top: 5px
}

.search-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-2);
    white-space: nowrap
}

.hero-security-badge {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 999px;
    padding: 6px 16px;
    margin-top: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    opacity: .96;
    transition: opacity .15s, transform .15s
}

.hero-security-badge:hover {
    opacity: 1;
    transform: translateY(-1px)
}

.hero-security-badge img {
    height: 22px;
    width: auto;
    display: block
}

.hero-extra-services {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .75);
    letter-spacing: .2px;
    margin-top: -4px
}

.hero-extra-services span {
    color: rgba(255, 255, 255, .4)
}

.footer-seal-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 26px 20px;
    background: var(--footer-bg);
    border-bottom: 1px solid var(--footer-divider)
}

.footer-seal-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--footer-hdg)
}

.footer-seal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px
}

.footer-seal a {
    display: inline-flex;
    opacity: .9;
    transition: opacity .15s
}

.footer-seal a:hover {
    opacity: 1
}

.footer-seal img {
    height: 34px;
    width: auto;
    display: block
}

.footer-seal-pagamento {
    height: 30px;
    max-width: 100%;
    background: #fff;
    border-radius: 8px;
    padding: 5px 12px
}

@media (max-width:480px) {
    .footer-seal-section {
        padding: 20px 16px
    }

    .footer-seal img {
        height: 30px
    }

    .footer-seal-pagamento {
        height: 26px
    }
}

.search-trust-item i {
    font-size: 10px;
    color: var(--primary)
}

.search-trust-item:last-child i {
    color: #fcaf45
}

.price-anchor {
    text-align: center;
    font-size: 12.5px;
    color: var(--text-2);
    margin-top: 2px
}

.price-anchor strong {
    color: var(--text);
    font-weight: 800
}

.stats-bar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding-top: 80px;
    padding-bottom: 0;
    transition: background .2s, border-color .2s
}

.stats-bar-inner {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    padding-top: 16px;
    padding-bottom: 16px;
    gap: 8px
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    padding: 12px 8px
}

.stat-icon {
    font-size: 18px;
    background: var(--ig-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1
}

.stat-value {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.5px;
    font-variant-numeric: tabular-nums;
    background: var(--ig-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1
}

.stat-label {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 500;
    text-align: center
}

#app-content {
    padding-top: 24px;
    padding-bottom: 8px;
    transition: opacity .2s
}

.htmx-swapping #app-content {
    opacity: 0
}

.lp-section {
    padding-top: 10px;
    padding-bottom: 18px
}

.lp-section-alt {
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transition: background .2s, border-color .2s
}

.section-header {
    text-align: center;
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    background: var(--ig-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.section-header .section-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.3px;
    line-height: 1.2;
    color: var(--text)
}

.section-sub {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.55;
    max-width: 460px
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.feature-card {
    background: var(--surface);
    border-radius: var(--r-lg);
    padding: 22px 18px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform .2s, box-shadow .2s, background .2s
}

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg)
}

.feature-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: var(--r);
    background: linear-gradient(135deg, rgba(131, 58, 180, .12), rgba(225, 48, 108, .12));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0
}

.feature-icon-wrap i {
    background: var(--ig-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.feature-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3
}

.feature-desc {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.5
}

.steps-grid {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.step-card {
    display: flex;
    gap: 16px;
    align-items: flex-start
}

.step-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ig-gradient);
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(193, 53, 132, .3)
}

.step-content {
    flex: 1;
    padding-top: 8px
}

.step-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 5px
}

.step-desc {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.55
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
    justify-content: center;
    gap: 16px
}

.testimonial-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: background .2s, transform .2s, box-shadow .2s
}

.testimonial-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg)
}

.testimonial-stars {
    display: flex;
    gap: 3px
}

.testimonial-stars i {
    color: #fcaf45;
    font-size: 13px
}

.testimonial-text {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.65;
    font-style: italic;
    flex: 1
}

.testimonial-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
    border-top: 1px solid var(--border)
}

.testimonial-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ig-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0
}

.testimonial-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text)
}

.testimonial-handle {
    font-size: 12px;
    color: var(--text-3)
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left
}

.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px 18px
}

.faq-item summary {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px
}

.faq-item summary::-webkit-details-marker {
    display: none
}

.faq-item summary::after {
    content: '+';
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 400;
    color: var(--text-3);
    transition: transform .2s
}

.faq-item[open] summary::after {
    transform: rotate(45deg)
}

.faq-item p {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.6;
    margin-top: 10px
}

.help-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px
}

.help-link-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, border-color .2s
}

.help-link-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--primary)
}

.help-link-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--ig-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px
}

.help-link-text {
    flex: 1;
    min-width: 0
}

.help-link-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text)
}

.help-link-desc {
    font-size: 12px;
    color: var(--text-2);
    margin-top: 2px;
    line-height: 1.4
}

.help-link-arrow {
    color: var(--text-3);
    font-size: 14px;
    flex-shrink: 0
}

.cta-section {
    background: var(--ig-gradient);
    padding: 56px clamp(16px, 4vw, 60px);
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden
}

.cta-section h2 {
    font-size: clamp(24px, 5vw, 40px);
    font-weight: 900;
    letter-spacing: -1px;
    margin-bottom: 12px;
    line-height: 1.15
}

.cta-section h2 span {
    background: rgba(255, 255, 255, .25);
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #fff;
    font-style: italic
}

.cta-section p {
    font-size: 15px;
    opacity: .88;
    margin-bottom: 28px;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto
}

.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: var(--primary);
    font-size: 15px;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: var(--r-lg);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
    font-family: var(--font)
}

.btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .3)
}

.site-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 40px 0 32px;
    transition: background .2s, border-color .2s
}

.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 9px
}

.footer-logo-mark {
    width: 34px;
    height: 34px;
    background: var(--ig-gradient);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0
}

.footer-logo-name {
    font-size: 17px;
    font-weight: 800;
    background: var(--ig-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.footer-logo-img {
    height: 34px;
    max-width: 200px;
    width: auto;
    object-fit: contain;
    border-radius: 8px;
    display: block
}

[data-theme=dark] .footer-logo-img {
    filter: brightness(0) invert(1)
}

@media (prefers-color-scheme:dark) {
    :root:not([data-theme=light]) .footer-logo-img {
        filter: brightness(0) invert(1)
    }
}

.footer-tagline {
    font-size: 13px;
    color: var(--text-3);
    line-height: 1.55;
    max-width: 360px
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px
}

.footer-links a {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    transition: color .15s
}

.footer-links a:hover {
    color: var(--primary)
}

.footer-divider {
    width: 100%;
    max-width: 480px;
    height: 1px;
    background: var(--border)
}

.footer-copy {
    font-size: 12px;
    color: var(--text-3)
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--ig-gradient);
    color: #fff;
    border: none;
    border-radius: var(--r);
    font-size: 14px;
    font-weight: 700;
    padding: 13px 20px;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    white-space: nowrap;
    text-decoration: none;
    letter-spacing: .2px;
    font-family: var(--font)
}

.btn-primary:hover {
    opacity: .9
}

.btn-primary:active {
    transform: scale(.97)
}

.btn-primary-full {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    background: var(--ig-gradient);
    color: #fff;
    border: none;
    border-radius: var(--r);
    font-size: 15px;
    font-weight: 700;
    padding: 14px 20px;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    font-family: var(--font);
    margin-top: 10px
}

.btn-primary-full:hover {
    opacity: .9
}

.btn-primary-full:active {
    transform: scale(.98)
}

.btn-gradient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--ig-gradient);
    color: #fff;
    border: none;
    border-radius: var(--r);
    font-size: 14px;
    font-weight: 700;
    padding: 13px 20px;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    white-space: nowrap;
    text-decoration: none;
    letter-spacing: .2px;
    font-family: var(--font)
}

.btn-gradient:hover {
    opacity: .9
}

.btn-gradient:active {
    transform: scale(.97)
}

.btn-gradient-sm {
    padding: 9px 14px;
    font-size: 13px;
    border-radius: var(--r-sm)
}

.btn-gradient-full {
    width: 100%;
    padding: 14px 20px;
    font-size: 15px;
    border-radius: var(--r);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px
}

.btn-outline {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: 0 0;
    color: var(--primary);
    border: 1.5px solid var(--primary);
    border-radius: var(--r);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 16px;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none;
    font-family: var(--font)
}

.btn-outline:hover {
    background: var(--primary);
    color: #fff
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 500;
    padding: 7px 12px;
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
    font-family: var(--font)
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, .22)
}

.btn-sm {
    font-size: 12px;
    padding: 7px 12px;
    border-radius: var(--r-sm)
}

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: box-shadow .15s, background .15s;
    text-decoration: none;
    font-family: var(--font)
}

.btn-google:hover {
    background: var(--surface-2);
    box-shadow: var(--shadow)
}

.profile-card {
    background: var(--surface);
    border-radius: var(--r-lg);
    padding: 20px 16px 16px;
    margin: 0 0 16px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    transition: background .2s
}

.profile-avatar-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0
}

.profile-avatar-ring {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    padding: 3px;
    background: var(--ig-gradient);
    display: flex;
    align-items: center;
    justify-content: center
}

.profile-avatar-inner {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bg);
    overflow: hidden;
    border: 2px solid var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: background .2s, border-color .2s
}

.profile-avatar-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.profile-verified {
    position: absolute;
    bottom: 1px;
    right: 1px;
    background: #3897f0;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border: 2px solid var(--surface);
    color: #fff
}

.profile-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2
}

.profile-handle {
    font-size: 13px;
    color: var(--text-2)
}

.profile-bio {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.5
}

.profile-private-badge {
    font-size: 11px;
    background: rgba(220, 38, 38, .1);
    color: var(--danger);
    border-radius: 20px;
    padding: 2px 8px;
    font-weight: 600
}

.profile-stats {
    display: flex;
    width: 100%;
    border-top: 1px solid var(--border);
    padding-top: 12px;
    transition: border-color .2s
}

.profile-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px
}

.profile-stat+.profile-stat {
    border-left: 1px solid var(--border)
}

.profile-stat-value {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.3px
}

.profile-stat-label {
    font-size: 11px;
    color: var(--text-2)
}

.service-tabs-wrap {
    padding: 0 0 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none
}

.service-tabs-wrap::-webkit-scrollbar {
    display: none
}

.service-tabs {
    display: flex;
    gap: 8px;
    width: max-content
}

.service-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    background: var(--surface);
    border: 1.5px solid var(--border);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
    font-family: var(--font)
}

.service-tab:hover {
    border-color: var(--primary);
    color: var(--primary)
}

.service-tab.ativo {
    background: var(--ig-gradient);
    color: #fff;
    border-color: transparent
}

.service-cards-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.service-card {
    background: var(--surface);
    border-radius: var(--r);
    padding: 14px 16px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: box-shadow .15s, background .2s
}

.service-card:hover {
    box-shadow: var(--shadow-lg)
}

.service-card-info {
    flex: 1;
    min-width: 0
}

.service-card-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.service-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    flex-wrap: wrap
}

.service-card-badge {
    font-size: 10px;
    font-weight: 600;
    background: rgba(193, 53, 132, .1);
    color: var(--primary);
    border-radius: 20px;
    padding: 2px 8px
}

.service-card-price-wrap {
    text-align: right;
    flex-shrink: 0
}

.service-card-price {
    font-size: 16px;
    font-weight: 800;
    background: var(--ig-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap
}

.service-card-price-sub {
    font-size: 10px;
    color: var(--text-3);
    margin-bottom: 6px
}

.order-card {
    background: var(--surface);
    border-radius: var(--r-lg);
    padding: 20px 16px;
    margin: 0 0 16px;
    box-shadow: var(--shadow);
    transition: background .2s
}

.order-card-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px
}

.order-card-desc {
    font-size: 13px;
    color: var(--text-2);
    margin-bottom: 16px
}

.qty-selector {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    margin-bottom: 16px;
    transition: border-color .2s
}

.qty-btn {
    width: 44px;
    height: 44px;
    background: var(--surface-2);
    border: none;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-2);
    cursor: pointer;
    transition: background .1s, color .1s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.qty-btn:hover {
    background: var(--border);
    color: var(--text)
}

.qty-input {
    flex: 1;
    border: none;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    font-family: var(--font);
    color: var(--text);
    background: var(--surface);
    padding: 10px 8px;
    outline: 0;
    -moz-appearance: textfield;
    transition: background .2s, color .2s
}

.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none
}

.qty-range-hint {
    font-size: 11px;
    color: var(--text-3);
    text-align: center;
    margin-top: -10px;
    margin-bottom: 12px
}

.price-display {
    background: var(--surface-2);
    border-radius: var(--r-sm);
    padding: 16px;
    text-align: center;
    margin-bottom: 16px;
    transition: background .2s
}

.price-display-label {
    font-size: 12px;
    color: var(--text-2);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600
}

.price-display-value {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    background: var(--ig-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.payment-card {
    background: var(--surface);
    border-radius: var(--r-lg);
    padding: 20px 16px;
    margin: 0 0 16px;
    box-shadow: var(--shadow);
    text-align: center;
    transition: background .2s
}

.payment-card-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 4px
}

.payment-card-sub {
    font-size: 13px;
    color: var(--text-2);
    margin-bottom: 12px
}

.pag-field {
    margin-bottom: 12px;
    text-align: left
}

.pag-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .4px
}

.pag-field input {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--bg2, var(--surface));
    color: var(--text);
    font-size: 15px;
    box-sizing: border-box;
    transition: border-color .15s
}

.pag-field input:focus {
    outline: none;
    border-color: var(--accent)
}

.pag-login-sugestao {
    margin-top: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.pag-login-sugestao-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-2);
    font-weight: 500
}

.pag-login-sugestao-text .fa-chart-line {
    color: var(--primary);
    font-size: 15px
}

.btn-google-sm {
    padding: 8px 14px;
    font-size: 13px
}

.payment-qr-wrap {
    background: var(--surface-2);
    border-radius: var(--r);
    padding: 16px;
    margin: 12px auto;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.payment-qr-wrap img {
    width: 180px;
    height: 180px;
    image-rendering: pixelated
}

.payment-pix-key {
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    font-size: 13px;
    font-family: monospace;
    word-break: break-all;
    color: var(--text);
    margin: 10px 0;
    text-align: left;
    transition: background .2s, border-color .2s
}

.payment-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    padding: 10px;
    border-radius: var(--r-sm);
    margin-top: 12px
}

.payment-status.aguardando {
    background: rgba(252, 175, 69, .12);
    color: #d4850a
}

.payment-status.aprovado {
    background: rgba(5, 150, 105, .12);
    color: var(--success)
}

.alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 500;
    margin: 0 0 12px
}

.alert-error {
    background: rgba(220, 38, 38, .08);
    color: var(--danger);
    border: 1px solid rgba(220, 38, 38, .2)
}

.alert-success {
    background: rgba(5, 150, 105, .08);
    color: var(--success);
    border: 1px solid rgba(5, 150, 105, .2)
}

.alert-info {
    background: rgba(59, 130, 246, .08);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, .2)
}

.track-code-box {
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: var(--r-sm);
    padding: 14px;
    text-align: center;
    margin: 0 0 14px
}

.track-code-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-3);
    margin-bottom: 6px
}

.track-code-value {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--text);
    margin-bottom: 10px
}

.track-code-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap
}

.track-code-actions a,
.track-code-actions button {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    background: 0 0;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-2)
}

.empty-state-icon {
    font-size: 48px;
    color: var(--text-3);
    margin-bottom: 12px
}

.empty-state-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px
}

.empty-state-desc {
    font-size: 13px;
    line-height: 1.5
}

.success-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 20px;
    text-align: center
}

.success-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(5, 150, 105, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--success);
    margin-bottom: 16px;
    animation: successPop .4s cubic-bezier(.175, .885, .32, 1.275)
}

@keyframes successPop {
    from {
        transform: scale(0);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.success-title {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 6px
}

.success-sub {
    font-size: 14px;
    color: var(--text-2)
}

.loading-spinner {
    display: none;
    text-align: center;
    padding: 16px 0 4px;
    color: var(--text-2);
    font-size: 13px;
    align-items: center;
    justify-content: center;
    gap: 10px
}

.loading-spinner.htmx-request {
    display: flex
}

.spinner-ring {
    width: 22px;
    height: 22px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spinRing .7s linear infinite;
    flex-shrink: 0
}

@keyframes spinRing {
    to {
        transform: rotate(360deg)
    }
}

.section {
    padding: 20px 0 8px
}

.section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    padding: 0 0 10px
}

.handle-form {
    background: var(--surface);
    border-radius: var(--r-xl);
    padding: 22px 20px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 16px 48px rgba(0, 0, 0, .28), 0 4px 16px rgba(0, 0, 0, .18);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: background .2s;
    max-width: 460px;
    margin: 0 auto
}

.handle-form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    letter-spacing: -.1px
}

.handle-input-row {
    display: flex;
    gap: 8px;
    align-items: center
}

.form-trust {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 2px
}

.form-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3px 10px
}

.trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 5px 12px;
    transition: background .2s, border-color .2s
}

.desktop-panel {
    max-width: 780px;
    margin: 0 auto;
    width: 100%
}

.app-footer {
    padding: 0;
    margin: 0;
    border: none;
    background: 0 0
}

.divider {
    height: 1px;
    background: var(--border);
    margin: 16px 0;
    transition: background .2s
}

.text-center {
    text-align: center
}

.text-sm {
    font-size: 12px;
    color: var(--text-2)
}

.mt-8 {
    margin-top: 8px
}

.mb-8 {
    margin-bottom: 8px
}

.mt-12 {
    margin-top: 12px
}

.mb-12 {
    margin-bottom: 12px
}

.mt-16 {
    margin-top: 16px
}

.mb-16 {
    margin-bottom: 16px
}

.px-16 {
    padding: 0 16px
}

.flex {
    display: flex
}

.flex-col {
    flex-direction: column
}

.items-center {
    align-items: center
}

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

.w-full {
    width: 100%
}

.gap-8 {
    gap: 8px
}

#app-content {
    transition: opacity .2s
}

.htmx-swapping #app-content {
    opacity: 0
}

.social-proof {
    background: var(--bg);
    padding: 28px 0 8px
}

.sp-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px
}

.sp-rating-score {
    font-size: 42px;
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1;
    background: var(--ig-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.sp-stars {
    display: flex;
    gap: 3px
}

.sp-stars i {
    font-size: 15px;
    color: #fcaf45
}

.sp-rating-label {
    font-size: 12px;
    color: var(--text-2);
    margin-top: 3px
}

.sp-reviews {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 300px));
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px
}

.sp-review {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px
}

.sp-review-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 8px
}

.sp-review-stars i {
    font-size: 11px;
    color: #fcaf45
}

.sp-review p {
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.45;
    margin-bottom: 8px;
    font-style: italic
}

.sp-review span {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 500
}

.sp-review-desktop-only {
    display: none
}

.sp-live {
    margin-bottom: 8px
}

.sp-live-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: .5px
}

.sp-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    animation: livePulse 1.5s ease-in-out infinite;
    flex-shrink: 0
}

@keyframes livePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .5;
        transform: scale(.8)
    }
}

.sp-live-list {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.sp-live-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 10px 12px;
    animation: liveFade .4s ease
}

@keyframes liveFade {
    from {
        opacity: 0;
        transform: translateY(6px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.sp-live-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0
}

.sp-live-info {
    flex: 1;
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.3
}

.sp-live-name {
    font-weight: 600;
    color: var(--text)
}

.sp-live-service {
    font-weight: 600;
    color: var(--text)
}

.sp-live-time {
    color: var(--text-3)
}

.sp-live-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--success, #059669);
    background: rgba(5, 150, 105, .1);
    border-radius: 6px;
    padding: 3px 7px;
    flex-shrink: 0
}

.bottom-nav-cta {
    position: relative;
    overflow: visible !important
}

.bottom-nav-cta-btn {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--ig-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-top: -24px;
    box-shadow: 0 4px 16px rgba(193, 53, 132, .45);
    transition: transform .15s, box-shadow .15s
}

.bottom-nav-cta:active .bottom-nav-cta-btn {
    transform: scale(.93);
    box-shadow: 0 2px 8px rgba(193, 53, 132, .3)
}

.bottom-nav-cta span {
    font-size: 10px;
    font-weight: 600;
    color: var(--primary);
    margin-top: 2px
}

@media (min-width:640px) {
    .stats-bar-inner {
        gap: 0
    }

    .stat-item {
        border-right: 1px solid var(--border)
    }

    .stat-item:last-child {
        border-right: none
    }

    .stat-value {
        font-size: 22px
    }

    .stat-icon {
        font-size: 20px
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (min-width:768px) {
    .desktop-nav {
        display: flex;
        align-items: center;
        gap: 4px;
        flex: 1;
        margin-left: 28px
    }

    .desktop-nav a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, .85);
        padding: 8px 14px;
        border-radius: var(--r-sm);
        border: 1px solid transparent;
        transition: color .15s, background .15s, border-color .15s;
        white-space: nowrap;
        text-decoration: none;
        letter-spacing: .1px
    }

    .desktop-nav a i {
        font-size: 13px;
        opacity: .85
    }

    .desktop-nav a:hover {
        color: #fff;
        background: rgba(255, 255, 255, .15);
        border-color: rgba(255, 255, 255, .22)
    }

    .desktop-nav a.ativo {
        color: #fff;
        font-weight: 700;
        background: rgba(255, 255, 255, .2);
        border-color: rgba(255, 255, 255, .32)
    }

    .bottom-nav {
        display: none
    }

    .app-main {
        padding-bottom: 0
    }

    .hide-xs {
        display: inline
    }

    .hero {
        padding: 40px clamp(40px, 6vw, 80px) 64px;
        justify-content: center
    }

    .hero-inner {
        padding-bottom: 32px
    }

    .hero-title-row {
        flex-direction: column;
        gap: 16px
    }

    .hero-inner h1 br {
        display: none
    }

    .hero-inner h1 span {
        font-size: inherit;
        margin-left: 16px;
        margin-right: 16px
    }

    .search-card {
        margin-bottom: -120px;
        max-width: 580px;
        padding: 28px 26px 24px
    }

    .stats-bar {
        padding-top: 70px
    }

    .stats-bar-inner {
        padding-top: 16px;
        padding-bottom: 16px
    }

    .social-proof {
        padding: 40px 0 16px
    }

    .sp-review-desktop-only {
        display: block
    }

    .sp-live-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px
    }

    .stat-value {
        font-size: 26px
    }

    .stat-icon {
        font-size: 22px
    }

    .stat-label {
        font-size: 12px
    }

    #app-content {
        max-width: 720px;
        margin: 32px auto;
        padding-top: 0;
        padding-bottom: 0
    }

    .lp-section {
        padding-top: 10px;
        padding-bottom: 64px
    }

    .section-header {
        margin-bottom: 32px
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px
    }

    .feature-card {
        padding: 26px 22px
    }

    .feature-icon-wrap {
        width: 52px;
        height: 52px;
        font-size: 20px
    }

    .steps-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
        position: relative
    }

    .steps-grid::before {
        content: '';
        position: absolute;
        top: 22px;
        left: calc(16.66% + 22px);
        right: calc(16.66% + 22px);
        height: 2px;
        background: var(--ig-gradient);
        border-radius: 2px
    }

    .step-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0
    }

    .step-num {
        width: 44px;
        height: 44px;
        margin-bottom: 18px;
        position: relative;
        z-index: 1
    }

    .step-content {
        padding-top: 0
    }

    .testimonials-grid {
        gap: 20px
    }

    .order-card,
    .payment-card,
    .profile-card {
        margin: 0 0 16px
    }

    .service-cards-wrap {
        padding: 0
    }

    .service-tabs-wrap {
        padding: 0 0 12px
    }

    .section {
        padding: 20px 0 8px
    }

    .section-title {
        padding: 0 0 10px
    }

    .alert {
        margin: 0 0 12px
    }
}

@media (min-width:1024px) {
    .hero-inner h1 {
        font-size: clamp(52px, 5vw, 68px);
        letter-spacing: -2px
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (min-width:1280px) {
    .lp-section {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

.sc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-bottom: 12px
}

.sc-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
    box-shadow: var(--shadow)
}

.sc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--sc-grad, var(--ig-gradient));
    border-radius: var(--r-lg) var(--r-lg) 0 0
}

.sc-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px)
}

.sc-topo {
    display: flex;
    align-items: flex-start;
    gap: 8px
}

.sc-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--sc-grad, var(--ig-gradient));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: rgba(255, 255, 255, .95);
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .18)
}

.sc-tipo-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.sc-tipo-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--sc-accent, var(--primary));
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2
}

.sc-tipo-label i {
    font-size: 10px
}

.sc-badge-refill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    color: var(--success);
    background: rgba(5, 150, 105, .1);
    border: 1px solid rgba(5, 150, 105, .25);
    border-radius: 20px;
    padding: 1px 7px;
    width: fit-content
}

.sc-badge-refill i {
    font-size: 9px
}

.sc-nome {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.sc-qtd-max {
    font-weight: 500;
    color: var(--text-3);
    font-size: 12px
}

.sc-preco-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface-2);
    border-radius: var(--r-sm);
    padding: 8px 10px;
    gap: 6px;
    margin-top: auto
}

.sc-preco-label {
    font-size: 10px;
    color: var(--text-3);
    font-weight: 500;
    margin-bottom: 2px
}

.sc-preco-valor {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.4px;
    background: var(--ig-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.sc-range {
    text-align: right
}

.sc-range-val {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2)
}

.sc-comprar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: var(--ig-gradient);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 700;
    padding: 10px;
    cursor: pointer;
    font-family: var(--font);
    box-shadow: 0 4px 0 rgba(90, 10, 100, .5), 0 6px 12px rgba(131, 58, 180, .3);
    transform: translateY(0);
    transition: transform .1s, box-shadow .1s;
    letter-spacing: .1px
}

.sc-comprar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(90, 10, 100, .5), 0 10px 18px rgba(131, 58, 180, .35)
}

.sc-comprar:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 rgba(90, 10, 100, .5), 0 2px 6px rgba(131, 58, 180, .2)
}

.sc-comprar i {
    font-size: 11px
}

@media (min-width:640px) {
    .sc-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px
    }
}

@media (min-width:768px) {
    .sc-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .sc-icon-wrap {
        width: 44px;
        height: 44px;
        font-size: 20px
    }

    .sc-nome {
        font-size: 14px
    }
}

@media (min-width:1024px) {
    .sc-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px
    }
}

.search-card {
    transition: margin-bottom .35s ease, max-width .35s ease
}

.search-card.sc-expanded {
    margin-bottom: 0 !important;
    max-width: 600px
}

.stats-bar {
    transition: padding-top .35s ease
}

.stats-bar.sc-expanded {
    padding-top: 24px !important
}

.sc-perfil-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 8px
}

.sc-perfil-avatar-ring {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    padding: 2.5px;
    background: var(--ig-gradient);
    flex-shrink: 0
}

.sc-perfil-avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--surface);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px
}

.sc-perfil-avatar-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sc-perfil-handle {
    font-size: 14px;
    font-weight: 700;
    color: var(--text)
}

.sc-perfil-stats {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 3px
}

.sc-escolha-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 4px 0 8px
}

.sc-tipo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px
}

.sc-tipo-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 12px 6px;
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    cursor: pointer;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
    transition: border-color .15s, background .15s, transform .1s;
    position: relative
}

.sc-tipo-btn:hover {
    border-color: var(--primary);
    background: var(--surface-2);
    transform: translateY(-2px)
}

.sc-tipo-btn:active {
    transform: translateY(0)
}

.sc-tipo-btn-bloqueado {
    cursor: not-allowed;
    opacity: .55
}

.sc-tipo-btn-bloqueado:hover {
    border-color: var(--border);
    background: var(--surface);
    transform: none
}

.sc-tipo-btn-bloqueado .sc-tipo-icone {
    background: var(--text-3) !important;
    filter: grayscale(1)
}

.sc-tipo-icone {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    flex-shrink: 0
}

.sc-trocar-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    padding: 10px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    font-family: var(--font);
    transition: color .15s, border-color .15s, background .15s;
    width: 100%;
    margin-top: 16px
}

.sc-trocar-handle:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--surface-2)
}

.sc-nav-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
    margin-top: 10px
}

.sc-voltar-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 5px 10px;
    cursor: pointer;
    font-family: var(--font);
    transition: background .15s, color .15s;
    flex-shrink: 0
}

.sc-voltar-btn:hover {
    background: var(--border);
    color: var(--text)
}

.sc-nav-tipo-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    flex: 1
}

.card-step.completo .card-step-num {
    background: #405DE6;
    color: #fff
}

.card-step.completo span {
    color: #405DE6
}

.sc-pedido-handle {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px
}

.sc-pedido-handle .fa-instagram {
    color: #e1306c;
    font-size: 15px
}

.sc-qty-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 6px
}

.review-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px;
    margin-top: 20px;
    text-align: center
}

.review-box-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px
}

.review-box-comment {
    font-size: 13px;
    color: var(--text-2);
    font-style: italic;
    margin: 12px 0 0
}

.review-box-thanks {
    font-size: 12px;
    color: var(--text-3);
    margin: 10px 0 0
}

.star-display {
    display: flex;
    justify-content: center;
    gap: 4px;
    font-size: 22px
}

.star-input {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 4px;
    margin: 0 auto 14px
}

.star-input input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0
}

.star-input label {
    font-size: 30px;
    color: var(--border);
    cursor: pointer;
    transition: color .15s
}

.star-input input:checked~label {
    color: #fcaf45
}

.star-input label:hover,
.star-input label:hover~label {
    color: #fcaf45
}

.star-input input:focus-visible+label {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px
}

.review-textarea {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 10px 12px;
    font-family: var(--font);
    font-size: 13px;
    color: var(--text);
    resize: vertical;
    margin-bottom: 12px
}

.review-textarea:focus {
    outline: 0;
    border-color: var(--primary)
}

.hero+#app-content,
.hero+.social-proof {
    padding-top: 50px
}

@media (min-width:768px) {

    .hero+#app-content,
    .hero+.social-proof {
        padding-top: 70px
    }
}

.whatsapp-float {
    position: fixed;
    right: 16px;
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 16px);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #32af00;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .15);
    z-index: 210;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s
}

.whatsapp-online-badge {
    position: fixed;
    right: 16px;
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 16px + 54px + 8px);
    z-index: 210;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #32af00;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px 5px 8px;
    border-radius: 99px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .15);
    white-space: nowrap
}

.whatsapp-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #baffc9;
    flex-shrink: 0;
    animation: whatsappPulse 1.6s ease-in-out infinite
}

@keyframes whatsappPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .7)
    }

    50% {
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0)
    }
}

@media (min-width:768px) {
    .whatsapp-online-badge {
        right: 28px;
        bottom: 90px
    }
}

.whatsapp-float:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .18)
}

@media (min-width:768px) {
    .whatsapp-float {
        right: 28px;
        bottom: 28px
    }
}

.cta-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--ig-gradient);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    margin: 20px auto 0;
    color: #fff;
    max-width: 460px;
    margin-bottom: 30px
}

.cta-banner.cta-banner-wide {
    max-width: none
}

.cta-banner-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0
}

.cta-banner-text {
    flex: 1;
    min-width: 0
}

.cta-banner-title {
    font-size: 14.5px;
    font-weight: 800
}

.cta-banner-desc {
    font-size: 12.5px;
    opacity: .9;
    margin-top: 2px
}

.cta-banner-btn {
    flex-shrink: 0;
    background: #fff;
    color: var(--primary);
    font-weight: 700;
    font-size: 13px;
    padding: 10px 16px;
    border-radius: var(--r);
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px
}

@media (max-width:480px) {
    .cta-banner {
        flex-wrap: wrap
    }

    .cta-banner-btn {
        width: 100%;
        justify-content: center;
        margin-top: 8px
    }
}

.empty-state-card {
    background: var(--surface);
    border-radius: var(--r-xl);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 16px 48px rgba(0, 0, 0, .12), 0 4px 16px rgba(0, 0, 0, .06);
    max-width: 460px;
    margin: 0 auto
}

.footer-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
    margin-top: 4px
}

.footer-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 6px 12px;
    border-radius: 20px;
    white-space: nowrap
}

.footer-trust-item i {
    color: var(--primary);
    font-size: 11px
}

@media (max-width:480px) {
    .hero-title-row {
        flex-direction: column;
        align-items: center;
        gap: 10px
    }

    .hero-ig-mark {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        font-size: 18px;
        margin: 0 auto
    }

    .site-footer {
        padding: 32px 0 24px
    }

    .footer-inner {
        gap: 16px
    }

    .footer-links {
        gap: 10px 20px
    }

    .footer-links a {
        font-size: 12.5px
    }

    .footer-body {
        padding: 20px 16px 16px
    }

    .footer-cta-bar {
        padding: 16px 16px
    }

    .footer-trust {
        display: none
    }

    .footer-desc {
        display: none
    }

    .footer-brand {
        padding-bottom: 12px;
        border-bottom: 1px solid var(--footer-divider);
        margin-bottom: 4px
    }
}

.app-footer {
    margin-top: auto
}

.footer-cta-bar {
    background: var(--ig-gradient);
    padding: 28px 20px
}

.footer-cta-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap
}

.footer-cta-titulo {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 4px
}

.footer-cta-sub {
    font-size: .8rem;
    color: rgba(255, 255, 255, .8);
    margin: 0
}

.footer-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--primary);
    font-weight: 800;
    font-size: .9rem;
    padding: 12px 24px;
    border-radius: 99px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
    transition: transform .15s, box-shadow .15s;
    flex-shrink: 0
}

.footer-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .2)
}

.footer-trust {
    background: var(--footer-hi);
    padding: 14px 20px;
    border-top: 1px solid var(--footer-divider);
    border-bottom: 1px solid var(--footer-divider)
}

.footer-trust-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap
}

.trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--footer-trust-c)
}

.trust-item i {
    color: var(--footer-icon);
    font-size: .7rem
}

.footer-body {
    background: var(--footer-bg);
    padding: 40px 20px 28px
}

.footer-body-inner {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px
}

.footer-logo {
    height: 32px;
    opacity: .85;
    margin-bottom: 12px;
    display: block
}

.footer-logo-text {
    font-size: 1rem;
    font-weight: 800;
    color: var(--footer-logo-c);
    display: block;
    margin-bottom: 8px
}

.footer-logo-default {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px
}

.footer-desc {
    font-size: .78rem;
    color: var(--footer-txt-dim);
    line-height: 1.6;
    margin: 0 0 16px
}

.footer-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--footer-wa);
    text-decoration: none
}

.footer-whatsapp:hover {
    color: var(--footer-wa-hv)
}

.footer-links-group {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.footer-links-titulo {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--footer-hdg);
    margin: 0 0 4px
}

.footer-links-group a {
    font-size: .8rem;
    color: var(--footer-link);
    text-decoration: none;
    transition: color .12s
}

.footer-links-group a:hover {
    color: var(--footer-link-hv)
}

.footer-bottom {
    background: var(--footer-btm);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .72rem;
    color: var(--footer-txt-dim);
    flex-wrap: wrap;
    gap: 8px
}

.footer-bottom-made {
    font-weight: 600
}

@media (max-width:768px) {
    .footer-body-inner {
        grid-template-columns: 1fr 1fr;
        gap: 24px
    }

    .footer-brand {
        grid-column: 1/-1
    }

    .footer-cta-inner {
        flex-direction: column;
        text-align: center;
        align-items: center
    }

    .footer-trust-inner {
        gap: 14px
    }
}

@media (max-width:480px) {
    .footer-body-inner {
        grid-template-columns: 1fr 1fr;
        gap: 12px 20px
    }

    .footer-brand {
        grid-column: 1/-1
    }

    .footer-links-group {
        align-items: flex-start;
        text-align: left
    }

    .footer-links-group a {
        font-size: .8rem;
        line-height: 1.8
    }

    .footer-links-titulo {
        font-size: .6rem;
        margin-bottom: 6px
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 6px
    }
}

@keyframes piscar {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .3
    }
}

@media (max-width:639px) {
    .feature-card-secondary {
        display: none;
    }

    .features-grid .feature-card:nth-child(3) {
        grid-column: 1/-1;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

.home-cats {
    padding: 20px 0 4px;
    overflow: hidden;
}

.home-cats-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 16px 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.home-cats-scroll::-webkit-scrollbar {
    display: none;
}

.home-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    width: 90px;
    text-decoration: none;
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--r, 12px);
    padding: 14px 8px 12px;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    text-align: center;
}

.home-cat-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(193, 53, 132, .12);
    transform: translateY(-2px);
}

.home-cat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    flex-shrink: 0;
}

.home-cat-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.home-cat-price {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-3);
    line-height: 1.3;
}

.home-cat-card-all .home-cat-icon {
    background: var(--ig-gradient) !important;
}

@media(min-width:640px) {
    .home-cats-scroll {
        flex-wrap: wrap;
        justify-content: center;
        padding: 4px 16px 8px;
    }

    .home-cat-card {
        width: 100px;
    }
}

@media(min-width:900px) {
    .home-cat-card {
        width: 110px;
    }
}

.home-cats {
    padding-top: 70px !important;
}

.home-cats-header {
    text-align: center;
    padding: 0 16px 16px;
}

.home-cats-title {
    font-size: clamp(18px, 4vw, 24px);
    font-weight: 800;
    color: var(--text);
    margin: 0 0 6px;
    letter-spacing: -.3px;
}

.home-cats-desc {
    font-size: 13px;
    color: var(--text-3);
    margin: 0;
    line-height: 1.5;
}

.home-cats {
    padding-top: 0 !important;
}

.home-cats {
    padding-top: 80px !important;
}

#app-content:empty {
    display: none;
}

.footer-trust {
    display: none !important;
}

.footer-bottom {
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
}

@media(min-width:769px) {
    .footer-bottom {
        padding-bottom: 14px;
    }
}

.ft {
    background: var(--footer-bg);
    border-top: 3px solid transparent;
    border-image: var(--ig-gradient) 1;
}

.ft-cta {
    background: var(--ig-gradient);
    padding: 20px 16px;
}

.ft-cta-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ft-cta-titulo {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 3px;
}

.ft-cta-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, .8);
    margin: 0;
}

.ft-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .15s;
    flex-shrink: 0;
}

.ft-cta-btn:hover {
    opacity: .9;
}

.ft-main {
    border-bottom: 1px solid var(--footer-divider);
}

.ft-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 20px 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
}

.ft-brand {
    grid-column: 1/-1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.ft-logo-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ft-logo-img {
    height: 36px;
    width: auto;
}

.ft-logo-text {
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
}

.ft-logo-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--ig-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
}

.ft-desc {
    font-size: 12px;
    color: var(--footer-txt-dim);
    line-height: 1.6;
    margin: 0;
    max-width: 300px;
}

.ft-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #16a34a;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 50px;
    text-decoration: none;
    transition: background .15s;
}

.ft-wa-btn:hover {
    background: #15803d;
}

.ft-wa-btn .fa-whatsapp {
    font-size: 15px;
}

.ft-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ft-col-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--footer-hdg);
    margin: 0 0 2px;
}

.ft-link {
    font-size: 13px;
    color: var(--footer-link);
    text-decoration: none;
    transition: color .15s;
}

.ft-link:hover {
    color: var(--primary);
}

.ft-link-all {
    color: var(--primary);
    font-weight: 600;
    margin-top: 4px;
}

.ft-seals {
    padding: 16px 20px;
    border-bottom: 1px solid var(--footer-divider);
}

.ft-seals-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.ft-trust-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 12px;
}

.ft-trust-chips span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--footer-trust-c);
}

.ft-trust-chips i {
    color: var(--primary);
    font-size: 11px;
}

.ft-seal-imgs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ft-seal-imgs img {
    height: 28px;
    width: auto;
    opacity: .85;
}

.ft-seal-imgs a {
    display: inline-flex;
}

.ft-seal-imgs a img {
    height: 32px;
}

.ft-bottom {
    background: var(--footer-btm);
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    font-size: 11px;
    color: var(--footer-txt-dim);
    padding-bottom: calc(12px + var(--nav-h) + env(safe-area-inset-bottom, 0px));
}

.ft-bottom-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.ft-bottom-links a {
    color: var(--footer-txt-dim);
    text-decoration: none;
    transition: color .15s;
}

.ft-bottom-links a:hover {
    color: var(--footer-link);
}

.ft-bottom-sep {
    opacity: .4;
}

@media(min-width:600px) {
    .ft-inner {
        grid-template-columns: 1.6fr 1fr 1fr;
    }

    .ft-brand {
        grid-column: auto;
    }

    .ft-seals-inner {
        flex-direction: row;
        justify-content: space-between;
    }

    .ft-trust-chips {
        justify-content: flex-start;
    }

    .ft-seal-imgs {
        justify-content: flex-end;
    }
}

@media(min-width:769px) {
    .ft-bottom {
        flex-direction: row;
        justify-content: space-between;
        padding-bottom: 12px;
    }
}

.ft-bottom {
    padding-bottom: 12px !important;
}

.ft {
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
}

@media(min-width:769px) {
    .ft {
        padding-bottom: 0;
    }
}

.ft-bottom {
    padding-bottom: calc(12px + var(--nav-h) + env(safe-area-inset-bottom, 0px)) !important;
}

.ft {
    padding-bottom: 0 !important;
}

@media(min-width:769px) {
    .ft-bottom {
        padding-bottom: 12px !important;
    }

    .ft {
        padding-bottom: 0 !important;
    }
}

.ft-logo-name {
    background: var(--ig-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 17px;
    font-weight: 800;
}

body {
    background: var(--footer-bg);
}

.bottom-nav {
    height: var(--nav-h) !important;
    box-sizing: content-box !important;
}

.app-main {
    flex: none !important;
}

.ft {
    margin-top: auto;
}

.bottom-nav {
    height: var(--nav-h) !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
}