/* ==================== TAILWIND BASE (extraido do build original) ==================== */
@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {

        *,
        :before,
        :after,
        ::backdrop {
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-space-y-reverse: 0;
            --tw-space-x-reverse: 0;
            --tw-border-style: solid;
            --tw-leading: initial;
            --tw-font-weight: initial;
            --tw-tracking: initial;
            --tw-ordinal: initial;
            --tw-slashed-zero: initial;
            --tw-numeric-figure: initial;
            --tw-numeric-spacing: initial;
            --tw-numeric-fraction: initial;
            --tw-shadow: 0 0#0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0#0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0#0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0#0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0#0000;
            --tw-outline-style: solid;
            --tw-backdrop-blur: initial;
            --tw-backdrop-brightness: initial;
            --tw-backdrop-contrast: initial;
            --tw-backdrop-grayscale: initial;
            --tw-backdrop-hue-rotate: initial;
            --tw-backdrop-invert: initial;
            --tw-backdrop-opacity: initial;
            --tw-backdrop-saturate: initial;
            --tw-backdrop-sepia: initial;
            --tw-duration: initial;
            --tw-ease: initial;
            --tw-content: "";
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            --tw-scale-z: 1;
            --tw-animation-delay: 0s;
            --tw-animation-direction: normal;
            --tw-animation-duration: initial;
            --tw-animation-fill-mode: none;
            --tw-animation-iteration-count: 1;
            --tw-enter-blur: 0;
            --tw-enter-opacity: 1;
            --tw-enter-rotate: 0;
            --tw-enter-scale: 1;
            --tw-enter-translate-x: 0;
            --tw-enter-translate-y: 0;
            --tw-exit-blur: 0;
            --tw-exit-opacity: 1;
            --tw-exit-rotate: 0;
            --tw-exit-scale: 1;
            --tw-exit-translate-x: 0;
            --tw-exit-translate-y: 0
        }
    }
}

@layer theme {

    :root,
    :host {
        --font-sans: "Inter", sans-serif;
        --font-serif: "Cormorant Garamond", serif;
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --color-black: #000;
        --color-white: #fff;
        --spacing: .25rem;
        --container-sm: 24rem;
        --container-md: 28rem;
        --container-lg: 32rem;
        --container-xl: 36rem;
        --container-3xl: 48rem;
        --container-5xl: 64rem;
        --container-6xl: 72rem;
        --text-xs: .75rem;
        --text-xs--line-height: calc(1/.75);
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25/.875);
        --text-base: 1rem;
        --text-base--line-height: 1.5;
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75/1.125);
        --text-xl: 1.25rem;
        --text-xl--line-height: calc(1.75/1.25);
        --text-2xl: 1.5rem;
        --text-2xl--line-height: calc(2/1.5);
        --text-3xl: 1.875rem;
        --text-3xl--line-height: 1.2;
        --text-4xl: 2.25rem;
        --text-4xl--line-height: calc(2.5/2.25);
        --text-5xl: 3rem;
        --text-5xl--line-height: 1;
        --text-6xl: 3.75rem;
        --text-6xl--line-height: 1;
        --text-7xl: 4.5rem;
        --text-7xl--line-height: 1;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --tracking-tight: -.025em;
        --tracking-widest: .1em;
        --leading-tight: 1.25;
        --leading-relaxed: 1.625;
        --radius-2xl: 1rem;
        --ease-in-out: cubic-bezier(.4, 0, .2, 1);
        --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
        --aspect-video: 16/9;
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family: "Inter", sans-serif;
        --default-mono-font-family: var(--font-mono);
        --color-background: var(--background);
        --color-foreground: var(--foreground);
        --color-border: var(--border)
    }
}

@layer base {

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

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html,
    :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent
    }

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

    :-moz-focusring {
        outline: auto
    }

    img,
    svg {
        vertical-align: middle;
        display: block
    }

    img {
        max-width: 100%
    }

    button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor
        }

        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button {
        appearance: button
    }

    ::file-selector-button {
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    * {
        border-color: var(--color-border)
    }

    html {
        scroll-behavior: smooth
    }

    body {
        background-color: var(--color-background);
        color: var(--color-foreground);
        font-family: var(--font-sans);
        font-weight: 300
    }

    h1,
    h2,
    h3 {
        font-family: var(--font-serif);
        letter-spacing: -.01em;
        font-weight: 400
    }
}

@layer components;

@layer utilities {
    .pointer-events-none {
        pointer-events: none
    }

    .absolute {
        position: absolute
    }

    .fixed {
        position: fixed
    }

    .relative {
        position: relative
    }

    .inset-0 {
        inset: calc(var(--spacing)*0)
    }

    .right-6 {
        right: calc(var(--spacing)*6)
    }

    .bottom-6 {
        bottom: calc(var(--spacing)*6)
    }

    .z-50 {
        z-index: 50
    }

    .mx-auto {
        margin-inline: auto
    }

    .-mt-4 {
        margin-top: calc(var(--spacing)*-4)
    }

    .mt-2 {
        margin-top: calc(var(--spacing)*2)
    }

    .mt-3 {
        margin-top: calc(var(--spacing)*3)
    }

    .mt-5 {
        margin-top: calc(var(--spacing)*5)
    }

    .mt-6 {
        margin-top: calc(var(--spacing)*6)
    }

    .mt-8 {
        margin-top: calc(var(--spacing)*8)
    }

    .mt-10 {
        margin-top: calc(var(--spacing)*10)
    }

    .mt-12 {
        margin-top: calc(var(--spacing)*12)
    }

    .mt-16 {
        margin-top: calc(var(--spacing)*16)
    }

    .mb-5 {
        margin-bottom: calc(var(--spacing)*5)
    }

    .ml-1 {
        margin-left: calc(var(--spacing)*1)
    }

    .flex {
        display: flex
    }

    .grid {
        display: grid
    }

    .inline-flex {
        display: inline-flex
    }

    .h-4 {
        height: calc(var(--spacing)*4)
    }

    .h-6 {
        height: calc(var(--spacing)*6)
    }

    .h-7 {
        height: calc(var(--spacing)*7)
    }

    .h-12 {
        height: calc(var(--spacing)*12)
    }

    .h-14 {
        height: calc(var(--spacing)*14)
    }

    .h-28 {
        height: calc(var(--spacing)*28)
    }

    .min-h-screen {
        min-height: 100vh
    }

    .w-4 {
        width: calc(var(--spacing)*4)
    }

    .w-6 {
        width: calc(var(--spacing)*6)
    }

    .w-7 {
        width: calc(var(--spacing)*7)
    }

    .w-12 {
        width: calc(var(--spacing)*12)
    }

    .w-14 {
        width: calc(var(--spacing)*14)
    }

    .w-28 {
        width: calc(var(--spacing)*28)
    }

    .max-w-3xl {
        max-width: var(--container-3xl)
    }

    .max-w-5xl {
        max-width: var(--container-5xl)
    }

    .max-w-6xl {
        max-width: var(--container-6xl)
    }

    .max-w-xl {
        max-width: var(--container-xl)
    }

    .flex-1 {
        flex: 1
    }

    .flex-col {
        flex-direction: column
    }

    .flex-wrap {
        flex-wrap: wrap
    }

    .items-center {
        align-items: center
    }

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

    .justify-center {
        justify-content: center
    }

    .gap-2 {
        gap: calc(var(--spacing)*2)
    }

    .gap-3 {
        gap: calc(var(--spacing)*3)
    }

    .gap-4 {
        gap: calc(var(--spacing)*4)
    }

    .gap-6 {
        gap: calc(var(--spacing)*6)
    }

    .gap-8 {
        gap: calc(var(--spacing)*8)
    }

    .gap-px {
        gap: 1px
    }

    :where(.space-y-px>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(1px*var(--tw-space-y-reverse));
        margin-block-end: calc(1px*calc(1 - var(--tw-space-y-reverse)))
    }

    .gap-x-10 {
        column-gap: calc(var(--spacing)*10)
    }

    .gap-y-4 {
        row-gap: calc(var(--spacing)*4)
    }

    .overflow-hidden {
        overflow: hidden
    }

    .rounded-2xl {
        border-radius: var(--radius-2xl)
    }

    .rounded-full {
        border-radius: 3.40282e38px
    }

    .border {
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .border-t {
        border-top-style: var(--tw-border-style);
        border-top-width: 1px
    }

    .bg-\[\#25D366\] {
        background-color: #25d366
    }

    .bg-\[oklch\(0\.78_0\.11_75\)\] {
        background-color: #e1ad63
    }

    .bg-\[oklch\(0\.96_0\.018_85\)\] {
        background-color: #f7f1e5
    }

    .bg-white {
        background-color: var(--color-white)
    }

    .bg-white\/60 {
        background-color: #fff9
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-white\/60 {
            background-color: color-mix(in oklab, var(--color-white) 60%, transparent)
        }
    }

    .object-cover {
        object-fit: cover
    }

    .p-8 {
        padding: calc(var(--spacing)*8)
    }

    .px-6 {
        padding-inline: calc(var(--spacing)*6)
    }

    .px-7 {
        padding-inline: calc(var(--spacing)*7)
    }

    .px-9 {
        padding-inline: calc(var(--spacing)*9)
    }

    .py-3\.5 {
        padding-block: calc(var(--spacing)*3.5)
    }

    .py-4 {
        padding-block: calc(var(--spacing)*4)
    }

    .py-14 {
        padding-block: calc(var(--spacing)*14)
    }

    .py-20 {
        padding-block: calc(var(--spacing)*20)
    }

    .py-24 {
        padding-block: calc(var(--spacing)*24)
    }

    .pt-4 {
        padding-top: calc(var(--spacing)*4)
    }

    .text-center {
        text-align: center
    }

    .font-serif {
        font-family: Cormorant Garamond, serif
    }

    .text-2xl {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading, var(--text-2xl--line-height))
    }

    .text-3xl {
        font-size: var(--text-3xl);
        line-height: var(--tw-leading, var(--text-3xl--line-height))
    }

    .text-4xl {
        font-size: var(--text-4xl);
        line-height: var(--tw-leading, var(--text-4xl--line-height))
    }

    .text-5xl {
        font-size: var(--text-5xl);
        line-height: var(--tw-leading, var(--text-5xl--line-height))
    }

    .text-6xl {
        font-size: var(--text-6xl)
    }

    .text-base {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height))
    }

    .text-lg {
        font-size: var(--text-lg)
    }

    .text-sm {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height))
    }

    .text-xl {
        font-size: var(--text-xl);
        line-height: var(--tw-leading, var(--text-xl--line-height))
    }

    .text-xs {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height))
    }

    .leading-\[1\.1\] {
        --tw-leading: 1.1;
        line-height: 1.1
    }

    .leading-none {
        --tw-leading: 1;
        line-height: 1
    }

    .leading-relaxed {
        --tw-leading: var(--leading-relaxed);
        line-height: var(--leading-relaxed)
    }

    .leading-tight {
        --tw-leading: var(--leading-tight);
        line-height: var(--leading-tight)
    }

    .font-medium {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }

    .tracking-\[0\.2em\] {
        --tw-tracking: .2em;
        letter-spacing: .2em
    }

    .tracking-\[0\.18em\] {
        --tw-tracking: .18em;
        letter-spacing: .18em
    }

    .tracking-\[0\.25em\] {
        --tw-tracking: .25em;
        letter-spacing: .25em
    }

    .tracking-tight {
        --tw-tracking: var(--tracking-tight);
        letter-spacing: var(--tracking-tight)
    }

    .text-white {
        color: var(--color-white)
    }

    .uppercase {
        text-transform: uppercase
    }

    .underline-offset-4 {
        text-underline-offset: 4px
    }

    .opacity-30 {
        opacity: .3
    }

    .opacity-40 {
        opacity: .4
    }

    .shadow-lg {
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-sm {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .ring-1 {
        --tw-ring-shadow: var(--tw-ring-inset, )0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[oklch\(0\.78_0\.11_75\)\]\/20 {
        --tw-shadow-color: #e1ad6333
    }

    @supports (color:color-mix(in lab, red, red)) {
        .shadow-\[oklch\(0\.78_0\.11_75\)\]\/20 {
            --tw-shadow-color: color-mix(in oklab, oklab(78%.0284701 .106252/.2) var(--tw-shadow-alpha), transparent)
        }
    }

    .backdrop-blur {
        --tw-backdrop-blur: blur(8px);
        -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
        backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, )
    }

    .transition-all {
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-colors {
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-transform {
        transition-property: transform, translate, scale, rotate;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .group-focus-within\/menu-item\:opacity-100:is(:where(.group\/menu-item):focus-within *) {
        opacity: 1
    }

    @media (hover:hover) {
        .group-hover\/menu-item\:opacity-100:is(:where(.group\/menu-item):hover *) {
            opacity: 1
        }
    }

    .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*) {
        cursor: not-allowed
    }

    .peer-disabled\:opacity-70:is(:where(.peer):disabled~*) {
        opacity: .7
    }

    .file\:border-0::file-selector-button {
        border-style: var(--tw-border-style);
        border-width: 0
    }

    .file\:bg-transparent::file-selector-button {
        background-color: #0000
    }

    .file\:text-sm::file-selector-button {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height))
    }

    .file\:font-medium::file-selector-button {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }

    .file\:text-foreground::file-selector-button {
        color: var(--foreground)
    }

    .placeholder\:text-muted-foreground::placeholder {
        color: var(--muted-foreground)
    }

    .after\:absolute:after {
        content: var(--tw-content);
        position: absolute
    }

    .after\:-inset-2:after {
        content: var(--tw-content);
        inset: calc(var(--spacing)*-2)
    }

    .after\:inset-y-0:after {
        content: var(--tw-content);
        inset-block: calc(var(--spacing)*0)
    }

    .after\:left-1\/2:after {
        content: var(--tw-content);
        left: 50%
    }

    .after\:w-1:after {
        content: var(--tw-content);
        width: calc(var(--spacing)*1)
    }

    .after\:w-\[2px\]:after {
        content: var(--tw-content);
        width: 2px
    }

    .after\:-translate-x-1\/2:after {
        content: var(--tw-content);
        --tw-translate-x: -50%;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .group-data-\[collapsible\=offcanvas\]\:after\:left-full:is(:where(.group)[data-collapsible=offcanvas] *):after {
        content: var(--tw-content);
        left: 100%
    }

    @media (hover:hover) {
        .hover\:-translate-y-0\.5:hover {
            --tw-translate-y: calc(var(--spacing)*-.5);
            translate: var(--tw-translate-x) var(--tw-translate-y)
        }

        .hover\:-translate-y-1:hover {
            --tw-translate-y: calc(var(--spacing)*-1);
            translate: var(--tw-translate-x) var(--tw-translate-y)
        }

        .hover\:scale-110:hover {
            --tw-scale-x: 110%;
            --tw-scale-y: 110%;
            --tw-scale-z: 110%;
            scale: var(--tw-scale-x) var(--tw-scale-y)
        }

        .hover\:bg-\[oklch\(0\.28_0\.04_165\)\]:hover {
            background-color: #142f24
        }

        .hover\:bg-\[oklch\(0\.84_0\.12_75\)\]:hover {
            background-color: #f8bf6c
        }

        .hover\:bg-accent:hover {
            background-color: var(--accent)
        }

        .hover\:bg-destructive\/80:hover {
            background-color: var(--destructive)
        }

        @supports (color:color-mix(in lab, red, red)) {
            .hover\:bg-destructive\/80:hover {
                background-color: color-mix(in oklab, var(--destructive) 80%, transparent)
            }
        }

        .hover\:bg-destructive\/90:hover {
            background-color: var(--destructive)
        }

        @supports (color:color-mix(in lab, red, red)) {
            .hover\:bg-destructive\/90:hover {
                background-color: color-mix(in oklab, var(--destructive) 90%, transparent)
            }
        }

        .hover\:bg-muted:hover,
        .hover\:bg-muted\/50:hover {
            background-color: var(--muted)
        }

        @supports (color:color-mix(in lab, red, red)) {
            .hover\:bg-muted\/50:hover {
                background-color: color-mix(in oklab, var(--muted) 50%, transparent)
            }
        }

        .hover\:bg-primary\/80:hover {
            background-color: var(--primary)
        }

        @supports (color:color-mix(in lab, red, red)) {
            .hover\:bg-primary\/80:hover {
                background-color: color-mix(in oklab, var(--primary) 80%, transparent)
            }
        }

        .hover\:bg-primary\/90:hover {
            background-color: var(--primary)
        }

        @supports (color:color-mix(in lab, red, red)) {
            .hover\:bg-primary\/90:hover {
                background-color: color-mix(in oklab, var(--primary) 90%, transparent)
            }
        }

        .hover\:bg-secondary\/80:hover {
            background-color: var(--secondary)
        }

        @supports (color:color-mix(in lab, red, red)) {
            .hover\:bg-secondary\/80:hover {
                background-color: color-mix(in oklab, var(--secondary) 80%, transparent)
            }
        }

        .hover\:text-accent-foreground:hover {
            color: var(--accent-foreground)
        }

        .hover\:text-foreground:hover {
            color: var(--foreground)
        }

        .hover\:text-muted-foreground:hover {
            color: var(--muted-foreground)
        }

        .hover\:underline:hover {
            text-decoration-line: underline
        }

        .hover\:opacity-100:hover {
            opacity: 1
        }

        .hover\:shadow-\[0_0_0_1px_var\(--sidebar-accent\)\]:hover {
            --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--sidebar-accent));
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }

        .hover\:shadow-xl:hover {
            --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }
    }

    .focus\:bg-accent:focus {
        background-color: var(--accent)
    }

    .focus\:text-accent-foreground:focus {
        color: var(--accent-foreground)
    }

    .focus\:ring-1:focus {
        --tw-ring-shadow: var(--tw-ring-inset, )0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .focus\:ring-2:focus {
        --tw-ring-shadow: var(--tw-ring-inset, )0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .focus\:ring-ring:focus {
        --tw-ring-color: var(--ring)
    }

    .focus\:ring-offset-2:focus {
        --tw-ring-offset-width: 2px;
        --tw-ring-offset-shadow: var(--tw-ring-inset, )0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .focus\:outline-none:focus {
        --tw-outline-style: none;
        outline-style: none
    }

    .focus-visible\:ring-1:focus-visible {
        --tw-ring-shadow: var(--tw-ring-inset, )0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .focus-visible\:ring-2:focus-visible {
        --tw-ring-shadow: var(--tw-ring-inset, )0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .focus-visible\:ring-ring:focus-visible {
        --tw-ring-color: var(--ring)
    }

    .focus-visible\:ring-offset-1:focus-visible {
        --tw-ring-offset-width: 1px;
        --tw-ring-offset-shadow: var(--tw-ring-inset, )0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .focus-visible\:ring-offset-2:focus-visible {
        --tw-ring-offset-width: 2px;
        --tw-ring-offset-shadow: var(--tw-ring-inset, )0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .focus-visible\:ring-offset-background:focus-visible {
        --tw-ring-offset-color: var(--background)
    }

    .focus-visible\:outline-none:focus-visible {
        --tw-outline-style: none;
        outline-style: none
    }

    .disabled\:pointer-events-none:disabled {
        pointer-events: none
    }

    .disabled\:cursor-not-allowed:disabled {
        cursor: not-allowed
    }

    .disabled\:opacity-50:disabled {
        opacity: .5
    }

    .has-focus\:border-ring:has(:focus) {
        border-color: var(--ring)
    }

    .has-focus\:ring-\[3px\]:has(:focus) {
        --tw-ring-shadow: var(--tw-ring-inset, )0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .has-focus\:ring-ring\/50:has(:focus) {
        --tw-ring-color: var(--ring)
    }

    @supports (color:color-mix(in lab, red, red)) {
        .has-focus\:ring-ring\/50:has(:focus) {
            --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent)
        }
    }

    .has-\[\:disabled\]\:opacity-50:has(:disabled) {
        opacity: .5
    }

    .data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction=vertical]:after {
        content: var(--tw-content);
        left: calc(var(--spacing)*0)
    }

    .data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction=vertical]:after {
        content: var(--tw-content);
        height: calc(var(--spacing)*1)
    }

    .data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction=vertical]:after {
        content: var(--tw-content);
        width: 100%
    }

    .data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction=vertical]:after {
        content: var(--tw-content);
        --tw-translate-x: calc(var(--spacing)*0);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction=vertical]:after {
        content: var(--tw-content);
        --tw-translate-y: -50%;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    @media (hover:hover) {
        .data-\[state\=open\]\:hover\:bg-accent[data-state=open]:hover {
            background-color: var(--accent)
        }
    }

    .data-\[state\=open\]\:focus\:bg-accent[data-state=open]:focus {
        background-color: var(--accent)
    }

    @media (min-width:40rem) {
        .sm\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        .sm\:flex-row {
            flex-direction: row
        }

        .sm\:gap-5 {
            gap: calc(var(--spacing)*5)
        }
    }

    @media (min-width:48rem) {
        .md\:h-32 {
            height: calc(var(--spacing)*32)
        }

        .md\:w-32 {
            width: calc(var(--spacing)*32)
        }

        .md\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }

        .md\:flex-row {
            flex-direction: row
        }

        .md\:items-center {
            align-items: center
        }

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

        .md\:gap-6 {
            gap: calc(var(--spacing)*6)
        }

        .md\:gap-12 {
            gap: calc(var(--spacing)*12)
        }

        .md\:p-10 {
            padding: calc(var(--spacing)*10)
        }

        .md\:py-32 {
            padding-block: calc(var(--spacing)*32)
        }

        .md\:text-left {
            text-align: left
        }

        .md\:text-3xl {
            font-size: var(--text-3xl);
            line-height: var(--tw-leading, var(--text-3xl--line-height))
        }

        .md\:text-5xl {
            font-size: var(--text-5xl);
            line-height: var(--tw-leading, var(--text-5xl--line-height))
        }

        .md\:text-6xl {
            font-size: var(--text-6xl);
            line-height: var(--tw-leading, var(--text-6xl--line-height))
        }

        .md\:text-lg {
            font-size: var(--text-lg);
            line-height: var(--tw-leading, var(--text-lg--line-height))
        }
    }

    .after\:md\:hidden:after {
        content: var(--tw-content)
    }

    @media (min-width:48rem) {
        .after\:md\:hidden:after {
            display: none
        }
    }

    @media (min-width:64rem) {
        .lg\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }

        .lg\:text-7xl {
            font-size: var(--text-7xl);
            line-height: var(--tw-leading, var(--text-7xl--line-height))
        }
    }

    :is(.rtl\:\*\*\:\[\.rdp-button\\_next\>svg\]\:rotate-180:where(:dir(rtl), [dir=rtl], [dir=rtl] *) *):is(.rdp-button_next>svg),
    :is(.rtl\:\*\*\:\[\.rdp-button\\_previous\>svg\]\:rotate-180:where(:dir(rtl), [dir=rtl], [dir=rtl] *) *):is(.rdp-button_previous>svg) {
        rotate: 180deg
    }

    .bg-brand-green-deep {
        background-color: var(--brand-green-deep)
    }

    .bg-brand-cream {
        background-color: var(--brand-cream)
    }

    .text-brand-cream {
        color: var(--brand-cream)
    }

    .text-brand-green {
        color: var(--brand-green)
    }

    .text-brand-gold {
        color: var(--brand-gold)
    }

    .fade-in-up {
        animation: .9s ease-out both fadeInUp
    }

    @keyframes fadeInUp {
        0% {
            opacity: 0;
            transform: translateY(20px)
        }

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

    .ornament-line {
        color: var(--brand-gold);
        letter-spacing: .35em;
        text-transform: uppercase;
        align-items: center;
        gap: .75rem;
        font-size: .75rem;
        display: inline-flex
    }

    .ornament-line:before,
    .ornament-line:after {
        content: "";
        opacity: .6;
        background-color: currentColor;
        width: 32px;
        height: 1px
    }
}

@property --tw-animation-delay {
    syntax: "*";
    inherits: false;
    initial-value: 0s
}

@property --tw-animation-direction {
    syntax: "*";
    inherits: false;
    initial-value: normal
}

@property --tw-animation-duration {
    syntax: "*";
    inherits: false
}

@property --tw-animation-fill-mode {
    syntax: "*";
    inherits: false;
    initial-value: none
}

@property --tw-animation-iteration-count {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-enter-blur {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-enter-opacity {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-enter-rotate {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-enter-scale {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-enter-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-enter-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-blur {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-opacity {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-exit-rotate {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-scale {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-exit-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

:root {
    --radius: .5rem;
    --brand-green: oklch(32%.04 165);
    --brand-green-deep: oklch(25%.04 165);
    --brand-cream: oklch(93%.025 85);
    --brand-cream-soft: oklch(96%.018 85);
    --brand-gold: oklch(75%.08 75);
    --background: var(--brand-cream-soft);
    --foreground: var(--brand-green-deep);
    --card: oklch(100%0 0);
    --card-foreground: var(--brand-green-deep);
    --popover: oklch(100%0 0);
    --popover-foreground: var(--brand-green-deep);
    --primary: var(--brand-green);
    --primary-foreground: var(--brand-cream);
    --secondary: var(--brand-cream);
    --secondary-foreground: var(--brand-green-deep);
    --muted: oklch(94%.015 85);
    --muted-foreground: oklch(45%.02 165);
    --accent: var(--brand-gold);
    --accent-foreground: var(--brand-green-deep);
    --destructive: oklch(57.7%.245 27.325);
    --destructive-foreground: oklch(98.4%.003 247.858);
    --border: oklch(88%.02 85);
    --input: oklch(88%.02 85);
    --ring: var(--brand-green);
    --cream: var(--brand-cream);
    --cream-foreground: var(--brand-green-deep);
    --gold: var(--brand-gold)
}

@property --tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false
}

@property --tw-space-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-space-x-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-leading {
    syntax: "*";
    inherits: false
}

@property --tw-font-weight {
    syntax: "*";
    inherits: false
}

@property --tw-tracking {
    syntax: "*";
    inherits: false
}

@property --tw-ordinal {
    syntax: "*";
    inherits: false
}

@property --tw-slashed-zero {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-figure {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-spacing {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-fraction {
    syntax: "*";
    inherits: false
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0#0000
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0#0000
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0#0000
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0#0000
}

@property --tw-ring-inset {
    syntax: "*";
    inherits: false
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0#0000
}

@property --tw-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-backdrop-blur {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-invert {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-duration {
    syntax: "*";
    inherits: false
}

@property --tw-ease {
    syntax: "*";
    inherits: false
}

@property --tw-content {
    syntax: "*";
    inherits: false;
    initial-value: ""
}

@property --tw-scale-x {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-scale-y {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-scale-z {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

@keyframes enter {
    0% {
        opacity: var(--tw-enter-opacity, 1);
        transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
        filter: blur(var(--tw-enter-blur, 0))
    }
}

@keyframes exit {
    to {
        opacity: var(--tw-exit-opacity, 1);
        transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
        filter: blur(var(--tw-exit-blur, 0))
    }
}

@keyframes accordion-down {
    0% {
        height: 0
    }

    to {
        height: var(--radix-accordion-content-height, var(--bits-accordion-content-height, var(--reka-accordion-content-height, var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto)))))
    }
}

@keyframes accordion-up {
    0% {
        height: var(--radix-accordion-content-height, var(--bits-accordion-content-height, var(--reka-accordion-content-height, var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto)))))
    }

    to {
        height: 0
    }
}

@keyframes caret-blink {

    0%,
    70%,
    to {
        opacity: 1
    }

    20%,
    50% {
        opacity: 0
    }
}

/* ==================== BLOCO DE ESTILO ==================== */

@font-face {
    font-family: "CameraPlainVariable";
    src: url(fonts/cameraplainvariable-100_900-normal.woff2)format("woff2");
    font-weight: 100 900;
    font-style: normal
}

#lovable-badge {
    --badge-bg: #1b1b1b;
    --badge-text: #c5c1b9;
    --badge-text-hover: #dcdad5;
    --badge-radius: 6px;
    --badge-padding: 8px;
    --badge-gap: 6px;
    --badge-shadow: 0 0 0 1px rgba(0, 0, 0, 0.88), 0 1px 0 0 rgba(0, 0, 0, 0.04), 0 2px 2px -1px rgba(0, 0, 0, 0.08), 0 4px 4px -2px rgba(0, 0, 0, 0.08), 0 8px 8px -4px rgba(0, 0, 0, 0.08), 0 16px 16px -8px rgba(0, 0, 0, 0.08);
    --badge-transition-duration: 0.2s;
    --badge-transition-easing: cubic-bezier(0.16, 1, 0.32, 1);
    --focus-color: #575ECF;
    --focus-offset: 2px;
    --focus-width: 2px;
    position: fixed;
    bottom: 12px;
    right: 12px;
    height: 24px;
    display: flex;
    align-items: center;
    z-index: 1000000;
    background-color: var(--badge-bg);
    color: var(--badge-text);
    border-radius: var(--badge-radius);
    box-shadow: var(--badge-shadow);
    font-size: 12px;
    font-family: CameraPlainVariable, "CameraPlainVariable Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 400 !important;
    text-transform: none !important;
    font-feature-settings: normal !important;
    transform: translateZ(0);
    will-change: transform, opacity
}

#lovable-badge-cta {
    display: flex;
    align-items: center;
    gap: var(--badge-gap);
    padding: 0 var(--badge-padding);
    height: 100%;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--badge-radius)0 0 var(--badge-radius);
    transition: background-color var(--badge-transition-duration) ease, color var(--badge-transition-duration) ease, transform 0.1s ease
}

#lovable-badge-cta:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--badge-text-hover)
}

#lovable-badge-cta:active {
    transform: scale(0.98)
}

#lovable-badge-cta:focus {
    outline: none
}

#lovable-badge-cta:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
    z-index: 1
}

#lovable-badge-text {
    line-height: 1
}

#lovable-badge-divider {
    width: 1px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.04);
    flex-shrink: 0
}

#lovable-badge-close {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 var(--badge-radius) var(--badge-radius)0;
    flex-shrink: 0;
    transition: background-color var(--badge-transition-duration) ease, transform 0.1s ease
}

#lovable-badge-close:hover {
    background: rgba(255, 255, 255, 0.04)
}

#lovable-badge-close:active {
    transform: scale(0.92)
}

#lovable-badge-close:focus {
    outline: none
}

#lovable-badge-close:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: calc(var(--focus-offset)*-1);
    z-index: 1
}

#lovable-badge-close svg path {
    fill: var(--badge-text);
    transition: fill var(--badge-transition-duration) ease
}

#lovable-badge-close:hover svg path {
    fill: var(--badge-text-hover)
}

@media (prefers-reduced-motion:reduce) {

    #lovable-badge-cta,
    #lovable-badge-close,
    #lovable-badge-close svg path {
        transition: none
    }

    #lovable-badge-cta:active,
    #lovable-badge-close:active {
        transform: none
    }
}

@media (prefers-contrast:high) {
    #lovable-badge {
        --badge-bg: #000;
        --badge-text: #fff;
        --badge-text-hover: #fff;
        border: 2px solid currentColor
    }

    #lovable-badge-cta:focus-visible,
    #lovable-badge-close:focus-visible {
        outline-width: 3px
    }
}

/* ==================== BLOCO DE ESTILO ==================== */

@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 300;
    src: url(fonts/cormorant-garamond-300-normal.woff2)format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 400;
    src: url(fonts/cormorant-garamond-400-normal.woff2)format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300;
    src: url(fonts/inter-300-normal.woff2)format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    src: url(fonts/inter-400-normal.woff2)format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    src: url(fonts/inter-500-normal.woff2)format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

/* ==================== ESTILOS CUSTOM DO TEMA (nav, hero, plan-card) ==================== */
        #navbar-menu { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; align-items: center; }
        #hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
        #hamburger span { display: block; width: 22px; height: 2px; background: oklch(93% .025 85); border-radius: 2px; transition: all .3s; }
        #mobile-menu { display: none; position: fixed; top: 4rem; left: 0; right: 0; background: oklch(25% .04 165); border-bottom: 1px solid oklch(93% .025 85 / 15%); padding: 1rem 1.5rem 1.5rem; z-index: 49; }
        #mobile-menu.open { display: block; }
        #mobile-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
        #mobile-menu ul li a { display: block; padding: .75rem 0; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: oklch(93% .025 85 / 70%); text-decoration: none; border-bottom: 1px solid oklch(93% .025 85 / 8%); }
        #mobile-menu ul li:last-child a { border-bottom: none; }
        #mobile-menu .mob-cta { display: inline-block; margin-top: 1rem; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; padding: .6rem 1.4rem; border: 1px solid oklch(75% .08 75); color: oklch(75% .08 75); text-decoration: none; border-radius: 2px; }
        @media (max-width: 767px) {
            #navbar-menu { display: none; }
            #hamburger { display: flex; }
        }
        /* Fix anchor scroll offset for fixed navbar */
        section[id], header[id] {
            scroll-margin-top: 4rem;
        }
        /* Banner principal - imagem de fundo com o diamante/logo, texto alinhado a esquerda */
        .hero-banner-bg {
            background-image: url(images/hero-banner-bg.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 78% center;
            background-color: #0c281d;
        }
        .hero-scrim {
            background: linear-gradient(100deg, oklch(0.1 0.03 165 / 78%) 0%, oklch(0.1 0.03 165 / 55%) 32%, oklch(0.1 0.03 165 / 15%) 55%, transparent 72%);
        }
        @media (max-width: 1023px) {
            .hero-banner-bg {
                background-size: contain;
                background-position: top center;
            }
        }
        .hero-tagline {
            font-family: "Cormorant Garamond", serif;
            font-style: italic;
            font-size: 1.15rem;
            line-height: 1.85;
            color: oklch(93% .025 85 / 88%);
        }
        @media (min-width: 768px) { .hero-tagline { font-size: 1.35rem; } }
        /* Pricing/plan cards */
        .plan-card { position: relative; border-radius: 1rem; padding: 2rem; background: oklch(0.28 0.04 165); border: 1px solid oklch(93% .025 85 / 10%); }
        .plan-card.featured { border-color: oklch(75% .08 75); border-width: 2px; }
        .plan-badge { position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%); background: oklch(75% .08 75); color: oklch(25% .04 165); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .35rem 1.1rem; border-radius: 9999px; white-space: nowrap; }
        .feature-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
        .feature-list li { display: flex; align-items: flex-start; gap: .55rem; }
        .feature-list svg { flex-shrink: 0; margin-top: .15rem; }

/* ==================== EFEITOS NOVOS (refatoração 08/09/2026) ==================== */

/* ---------- Reset de scroll enquanto a splash está ativa ---------- */
html.no-scroll,
html.no-scroll body {
    overflow: hidden;
    height: 100%;
}

/* ---------- SPLASH SCREEN ---------- */
#splash-screen {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse 120% 110% at 50% 38%, #0c281d 0%, #0c281d 42%, oklch(0.17 0.038 165) 100%);
    transition: opacity 1s ease, transform 1.1s cubic-bezier(.65, 0, .35, 1);
}

#splash-screen img {
    width: min(280px, 64vw);
    height: auto;
    opacity: 0;
    transform: scale(.92);
    animation: splashLogoIn 1s ease-out .15s forwards;
}

@keyframes splashLogoIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

#splash-screen.splash-hide {
    opacity: 0;
    transform: translateY(-6%) scale(1.04);
    pointer-events: none;
}

#splash-screen.splash-hide img {
    animation: splashLogoOut .7s ease-in forwards;
}

@keyframes splashLogoOut {
    to {
        opacity: 0;
        transform: scale(1.06);
    }
}

#splash-screen.splash-gone {
    display: none;
}

/* ---------- Delays de entrada do hero (disparam junto com o fim da splash) ---------- */
.hero-d1 {
    animation-delay: 5.05s;
}

.hero-d2 {
    animation-delay: 5.25s;
}

.hero-d3 {
    animation-delay: 5.45s;
}

.hero-d4 {
    animation-delay: 5.65s;
}

/* ---------- Indicador de scroll no banner ---------- */
.scroll-cue {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: oklch(93% .025 85 / 60%);
    text-decoration: none;
    font-size: .65rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    animation: fadeInUp .9s ease-out both;
    animation-delay: 6s;
    transition: color .2s;
}

.scroll-cue:hover {
    color: oklch(75% .08 75);
}

.scroll-cue svg {
    animation: scrollCueBounce 1.8s ease-in-out infinite;
}

@keyframes scrollCueBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

/* ---------- Seção da frase de efeito (digitação) ---------- */
.typewriter-line {
    display: block;
    min-height: 1.85em;
}

.typewriter-cursor {
    display: inline-block;
    width: 2px;
    margin-left: 2px;
    background: currentColor;
    opacity: .75;
    animation: caretBlink .9s step-end infinite;
}

@keyframes caretBlink {

    0%,
    100% {
        opacity: .75;
    }

    50% {
        opacity: 0;
    }
}

/* ---------- FLIP CARDS (o que faz um BPO financeiro) ---------- */
.flip-card {
    perspective: 1200px;
    height: 280px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform .7s cubic-bezier(.4, .2, .2, 1);
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner,
.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.flip-card-back {
    transform: rotateY(180deg);
}

.flip-hint {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    font-size: .65rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--brand-green);
    opacity: .35;
}

/* ---------- Cartão da parceria Conta Azul ---------- */
.partner-shot {
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 30px 60px -20px oklch(0.2 0.05 165 / 35%);
    transform: rotate(1.5deg);
    transition: transform .5s ease, box-shadow .5s ease;
    border: 6px solid white;
}

.partner-shot:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 40px 70px -18px oklch(0.2 0.05 165 / 40%);
}

.partner-shot img {
    display: block;
    width: 100%;
    height: auto;
}

.partner-badge-float {
    position: absolute;
    top: -18px;
    right: -14px;
    background: oklch(0.78 0.11 75);
    color: oklch(0.2 0.05 165);
    border-radius: 9999px;
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.1;
    text-transform: uppercase;
    box-shadow: 0 10px 25px -8px oklch(0.2 0.05 165 / 45%);
    animation: badgePulse 2.8s ease-in-out infinite;
    padding: 4px;
}

@keyframes badgePulse {

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

    50% {
        transform: scale(1.07);
    }
}

/* ---------- Revelação suave ao rolar a página (aplicada em várias sections) ---------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .6, .2, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger.is-visible > * {
    animation: fadeInUp .7s ease both;
}

.reveal-stagger.is-visible > *:nth-child(1) { animation-delay: .05s; }
.reveal-stagger.is-visible > *:nth-child(2) { animation-delay: .15s; }
.reveal-stagger.is-visible > *:nth-child(3) { animation-delay: .25s; }
.reveal-stagger.is-visible > *:nth-child(4) { animation-delay: .35s; }

/* ---------- Botões com brilho passando no hover ---------- */
.shine-btn {
    position: relative;
    overflow: hidden;
}

.shine-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, oklch(1 0 0 / 35%), transparent);
    transform: skewX(-20deg);
    transition: left .75s ease;
}

.shine-btn:hover::after {
    left: 130%;
}

/* ---------- Logo do rodapé ampliado ---------- */
.footer-logo {
    height: 5rem;
    width: 5rem;
    border-radius: 9999px;
    object-fit: cover;
    box-shadow: 0 0 0 1px oklch(75% .08 75 / 40%), 0 8px 24px -8px oklch(0 0 0 / 40%);
}

@media (min-width: 768px) {
    .footer-logo {
        height: 6rem;
        width: 6rem;
    }
}

/* ---------- Respeita usuários que preferem menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {

    #splash-screen,
    #splash-screen img,
    .scroll-cue svg,
    .flip-card-inner,
    .partner-badge-float,
    .reveal,
    .reveal-stagger>*,
    .fade-in-up,
    .shine-btn::after {
        animation: none !important;
        transition: none !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* ==================== UTILITARIOS AUSENTES NO BUILD ORIGINAL ====================
   Este CSS foi extraido de um build que só gera regras para classes já
   presentes no HTML de origem. As classes abaixo foram introduzidas nesta
   refatoração (ou já existiam soltas no arquivo original sem a regra
   correspondente) e não tinham CSS compilado. Adicionadas explicitamente
   abaixo, usando os mesmos valores de escala do Tailwind e as variáveis
   de cor já definidas neste arquivo. */

.gap-14 { gap: 3.5rem }
.gap-5 { gap: 1.25rem }
.mt-4 { margin-top: 1rem }
.py-16 { padding-top: 4rem; padding-bottom: 4rem }
.max-w-2xl { max-width: 42rem }
.max-w-sm { max-width: 24rem }
.w-full { width: 100% }
.tracking-\[0\.1em\] { letter-spacing: 0.1em }

@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .md\:justify-start { justify-content: flex-start }
    .md\:max-w-none { max-width: none }
    .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
}

.text-brand-green-deep { color: var(--brand-green-deep) }

.text-brand-cream\/50 { color: oklch(93% .025 85 / 50%) }
.text-brand-cream\/60 { color: oklch(93% .025 85 / 60%) }
.text-brand-cream\/70 { color: oklch(93% .025 85 / 70%) }
.text-brand-cream\/75 { color: oklch(93% .025 85 / 75%) }
.text-brand-cream\/80 { color: oklch(93% .025 85 / 80%) }
.text-brand-cream\/85 { color: oklch(93% .025 85 / 85%) }

.text-brand-green\/60 { color: oklch(32% .04 165 / 60%) }
.text-brand-green\/70 { color: oklch(32% .04 165 / 70%) }
.text-brand-green\/80 { color: oklch(32% .04 165 / 80%) }
.text-brand-green\/85 { color: oklch(32% .04 165 / 85%) }

.border-brand-cream\/10 { border-color: oklch(93% .025 85 / 10%) }
.border-brand-cream\/40 { border-color: oklch(93% .025 85 / 40%) }
.border-brand-green\/10 { border-color: oklch(32% .04 165 / 10%) }
.border-brand-green\/30 { border-color: oklch(32% .04 165 / 30%) }
.border-brand-gold\/40 { border-color: oklch(75% .08 75 / 40%) }

.bg-brand-cream\/10 { background-color: oklch(93% .025 85 / 10%) }
.bg-brand-green\/10 { background-color: oklch(32% .04 165 / 10%) }

.hover\:bg-brand-cream:hover { background-color: var(--brand-cream) }
.hover\:bg-brand-green:hover { background-color: var(--brand-green) }
.hover\:text-brand-cream:hover { color: var(--brand-cream) }
.hover\:text-brand-gold:hover { color: var(--brand-gold) }
.hover\:text-brand-green-deep:hover { color: var(--brand-green-deep) }

/* ==================== UTILITARIOS DO NOVO BANNER ==================== */
.items-start { align-items: flex-start }
.text-left { text-align: left }
.max-w-lg { max-width: 32rem }
.max-w-md { max-width: 28rem }

@media (min-width: 640px) {
    .sm\:items-center { align-items: center }
}

@media (min-width: 1024px) {
    .lg\:text-6xl {
        font-size: var(--text-6xl);
        line-height: var(--tw-leading, var(--text-6xl--line-height))
    }
}