html,
body,
#root {
    max-width: 100%;
    overflow-x: hidden;
}

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

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    #root header {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    #root header .h-20 {
        height: 72px !important;
    }

    #root header img.h-10 {
        height: 34px !important;
    }

    #root section[id] {
        scroll-margin-top: 88px;
    }

    #root .pt-32 {
        padding-top: 6.5rem !important;
    }

    #root .pb-24,
    #root .py-24 {
        padding-bottom: 3.5rem !important;
    }

    #root [class*="max-w-"] {
        max-width: 100% !important;
    }

    #root [class*="grid-cols-"] {
        grid-template-columns: 1fr !important;
    }

    #root [class*="container"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    #root [class*="text-5xl"],
    #root [class*="text-6xl"],
    #root [class*="text-7xl"] {
        font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
        line-height: 1.15 !important;
    }

    #root h1,
    #root h2 {
        line-height: 1.15 !important;
        text-wrap: balance;
    }

    #root p {
        text-wrap: pretty;
    }

    #root button,
    #root [role="button"],
    #root a[class*="btn"],
    #root a[class*="Button"] {
        min-height: 44px;
    }

    #root [class*="px-10"],
    #root [class*="px-8"],
    #root [class*="px-6"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    #root [class*="gap-10"],
    #root [class*="gap-8"],
    #root [class*="gap-6"] {
        gap: 1rem !important;
    }

    #root #planos .scale-105 {
        transform: none !important;
    }

    #root #planos [class*="shadow-2xl"] {
        box-shadow: 0 10px 28px rgba(15, 61, 110, 0.14) !important;
    }

    #root #planos [class*="text-5xl"] {
        display: inline-block;
        margin-bottom: 2px;
    }

    #root #planos span.text-gray-600.ml-2 {
        margin-left: 6px !important;
        white-space: nowrap;
    }

    #root #planos ul {
        margin-top: 0.25rem;
    }

    #root #planos button,
    #root #planos a {
        width: 100% !important;
    }

    #root footer .grid {
        row-gap: 2rem !important;
    }

    #root footer .text-sm {
        line-height: 1.55 !important;
    }
}

@media (max-width: 480px) {
    #root header .h-20 {
        height: 66px !important;
    }

    #root header img.h-10 {
        height: 30px !important;
    }

    #root .pt-32 {
        padding-top: 6rem !important;
    }

    #root [class*="text-4xl"] {
        font-size: clamp(1.7rem, 9vw, 2.15rem) !important;
        line-height: 1.15 !important;
    }

    #root #planos [class*="rounded-2xl"] {
        border-radius: 1rem !important;
    }
}