/* ==========================================================
   PALU EVENTOS
   STYLE.CSS
   Base Global / Header / Navegação / Botões / Footer
   ========================================================== */


/* ==========================================================
   RESET
   ========================================================== */

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

html {
    margin: 0;
    padding: 0;

    scroll-behavior: smooth;

    background: var(--color-black);
}

body {
    margin: 0;
    padding: 0;

    min-width: 320px;

    overflow-x: hidden;

    background: var(--color-black);

    color: var(--color-text);

    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-regular);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.menu-open {
    overflow: hidden;
}

main {
    display: block;
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
}

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

button,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    border: 0;
}

img,
picture,
video,
svg {
    display: block;
    max-width: 100%;
}

img {
    user-select: none;
}

::selection {
    background: var(--palu-blue);
    color: var(--color-white);
}


/* ==========================================================
   ACESSIBILIDADE
   ========================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--palu-blue-light);
    outline-offset: 4px;
}


/* ==========================================================
   SCROLLBAR
   ========================================================== */

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: var(--color-black);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
}


/* ==========================================================
   ELEMENTOS GLOBAIS
   ========================================================== */

.accent-dot {
    color: var(--palu-red);
}

.section-eyebrow {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 22px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 0.67rem;
    font-weight: var(--font-bold);

    letter-spacing: 0.20em;
    line-height: 1;

    text-transform: uppercase;
}

.section-eyebrow::before {
    content: "";

    display: block;

    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--palu-blue);

    box-shadow:
        0 0 16px rgba(35, 136, 255, 0.75);
}

.section-eyebrow.red::before {
    background: var(--palu-red);

    box-shadow:
        0 0 16px rgba(237, 28, 46, 0.65);
}


/* ==========================================================
   BOTÕES
   ========================================================== */

.btn {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    min-height: 54px;

    padding:
        0
        25px;

    overflow: hidden;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-xs);

    font-size:
        0.68rem;

    font-weight:
        var(--font-bold);

    letter-spacing:
        0.10em;

    line-height:
        1;

    text-align:
        center;

    text-transform:
        uppercase;

    cursor:
        pointer;

    transition:
        color var(--transition),
        border-color var(--transition),
        background var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.btn span {
    position: relative;

    z-index: 2;

    transition:
        transform var(--transition);
}

.btn:hover span {
    transform:
        translateX(4px);
}

.btn:active {
    transform:
        translateY(1px);
}


/* ==========================================================
   BOTÃO PRINCIPAL
   ========================================================== */

.btn-primary {
    color:
        var(--color-white);

    border-color:
        var(--palu-red);

    background:
        var(--palu-red);

    box-shadow:
        0 12px 35px
        rgba(237, 28, 46, 0.20);
}

.btn-primary::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    background:
        linear-gradient(
            90deg,
            var(--palu-blue),
            var(--palu-pink),
            var(--palu-red)
        );

    opacity: 0;

    transition:
        opacity var(--transition);
}

.btn-primary:hover {
    border-color:
        rgba(255, 255, 255, 0.16);

    box-shadow:
        0 16px 45px
        rgba(237, 28, 46, 0.28);
}

.btn-primary:hover::before {
    opacity: 1;
}

.btn-primary > * {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   BOTÃO OUTLINE
   ========================================================== */

.btn-outline {
    color:
        rgba(255, 255, 255, 0.86);

    border-color:
        rgba(255, 255, 255, 0.22);

    background:
        rgba(255, 255, 255, 0.015);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}

.btn-outline:hover {
    color:
        var(--color-white);

    border-color:
        rgba(255, 255, 255, 0.45);

    background:
        rgba(255, 255, 255, 0.065);
}


/* ==========================================================
   BOTÃO WHATSAPP
   ========================================================== */

.btn-whatsapp {
    color:
        var(--color-white);

    border-color:
        rgba(255, 255, 255, 0.20);

    background:
        rgba(255, 255, 255, 0.02);
}

.btn-whatsapp:hover {
    border-color:
        rgba(255, 255, 255, 0.42);

    background:
        rgba(255, 255, 255, 0.065);
}


/* ==========================================================
   HEADER
   ========================================================== */

.site-header {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index:
        var(--z-header);

    height:
        var(--header-height);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);

    background:
        linear-gradient(
            180deg,
            rgba(3, 6, 9, 0.90) 0%,
            rgba(3, 6, 9, 0.64) 100%
        );

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    transition:
        height var(--transition),
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.site-header.is-scrolled {
    background:
        rgba(3, 6, 9, 0.94);

    border-bottom-color:
        rgba(255, 255, 255, 0.11);

    box-shadow:
        0 12px 45px
        rgba(0, 0, 0, 0.22);
}


/* ==========================================================
   CONTAINER HEADER
   ========================================================== */

.header-container {
    width:
        min(
            calc(100% - (var(--page-padding) * 2)),
            var(--container-wide)
        );

    height: 100%;

    margin-inline: auto;

    display: flex;

    align-items: center;

    gap: 42px;
}


/* ==========================================================
   LOGO
   ========================================================== */

.brand {
    position: relative;

    display: flex;

    align-items: center;

    flex: 0 0 auto;

    z-index: 2;
}

.brand-logo {
    display: block;

    width: auto;

    height: 58px;

    object-fit: contain;

    transition:
        transform var(--transition),
        opacity var(--transition);
}

.brand:hover .brand-logo {
    transform:
        scale(1.025);
}


/* ==========================================================
   NAVEGAÇÃO DESKTOP
   ========================================================== */

.main-nav {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 36px;

    margin-left: auto;
}

.nav-link {
    position: relative;

    display: flex;

    align-items: center;

    height:
        var(--header-height);

    color:
        rgba(255, 255, 255, 0.64);

    font-size:
        0.70rem;

    font-weight:
        var(--font-semibold);

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    transition:
        color var(--transition);
}

.nav-link::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -1px;

    width: 0;
    height: 2px;

    transform:
        translateX(-50%);

    background:
        var(--gradient-palu);

    transition:
        width var(--transition);
}

.nav-link:hover {
    color:
        var(--color-white);
}

.nav-link:hover::after {
    width: 28px;
}

.nav-link.active {
    color:
        var(--color-white);
}

.nav-link.active::after {
    width: 28px;
}


/* ==========================================================
   CTA HEADER
   ========================================================== */

.header-cta {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    min-height: 44px;

    padding:
        0
        20px;

    flex: 0 0 auto;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius:
        var(--radius-pill);

    background:
        rgba(255, 255, 255, 0.035);

    color:
        var(--color-white);

    font-size:
        0.64rem;

    font-weight:
        var(--font-bold);

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;

    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.header-cta::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        var(--gradient-palu);

    opacity: 0;

    transition:
        opacity var(--transition);
}

.header-cta span {
    position: relative;

    z-index: 2;

    transition:
        transform var(--transition);
}

.header-cta {
    z-index: 1;
}

.header-cta:hover {
    border-color:
        transparent;

    box-shadow:
        0 12px 35px
        rgba(35, 136, 255, 0.14);
}

.header-cta:hover::before {
    opacity: 1;
}

.header-cta:hover span {
    transform:
        translateX(3px);
}


/* ==========================================================
   MENU HAMBÚRGUER
   ========================================================== */

.menu-toggle {
    position: relative;

    display: none;

    width: 46px;
    height: 46px;

    flex: 0 0 auto;

    align-items: center;
    justify-content: center;

    margin-left: auto;

    padding: 0;

    border:
        1px solid rgba(255, 255, 255, 0.15);

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, 0.025);

    cursor:
        pointer;

    z-index:
        calc(var(--z-menu) + 2);

    transition:
        border-color var(--transition),
        background var(--transition);
}

.menu-toggle span {
    position: absolute;

    width: 18px;
    height: 1px;

    background:
        var(--color-white);

    transition:
        transform var(--transition),
        top var(--transition),
        opacity var(--transition);
}

.menu-toggle span:first-child {
    transform:
        translateY(-4px);
}

.menu-toggle span:last-child {
    transform:
        translateY(4px);
}

.menu-toggle.is-open span:first-child {
    transform:
        rotate(45deg);
}

.menu-toggle.is-open span:last-child {
    transform:
        rotate(-45deg);
}


/* ==========================================================
   MENU MOBILE
   ========================================================== */

.mobile-menu {
    position: fixed;

    inset: 0;

    z-index:
        var(--z-menu);

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        calc(var(--header-height) + 40px)
        var(--page-padding)
        45px;

    background:
        rgba(3, 6, 9, 0.985);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(-10px);

    transition:
        opacity var(--transition),
        visibility var(--transition),
        transform var(--transition);
}

.mobile-menu::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -180px;
    right: -220px;

    border-radius: 50%;

    background:
        var(--palu-blue);

    filter:
        blur(130px);

    opacity: 0.12;

    pointer-events: none;
}

.mobile-menu::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -220px;
    bottom: -240px;

    border-radius: 50%;

    background:
        var(--palu-red);

    filter:
        blur(140px);

    opacity: 0.10;

    pointer-events: none;
}

.mobile-menu.is-open {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0);
}


/* ==========================================================
   NAVEGAÇÃO MOBILE
   ========================================================== */

.mobile-nav {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    width: 100%;

    border-top:
        1px solid var(--color-border);
}

.mobile-nav a {
    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 68px;

    border-bottom:
        1px solid var(--color-border);

    color:
        rgba(255, 255, 255, 0.78);

    font-family:
        var(--font-display);

    font-size:
        clamp(1.5rem, 7vw, 2.2rem);

    font-weight:
        var(--font-medium);

    letter-spacing:
        -0.04em;

    transition:
        color var(--transition),
        padding-left var(--transition);
}

.mobile-nav a::after {
    content: "→";

    color:
        var(--palu-red);

    font-family:
        var(--font-primary);

    font-size:
        1rem;
}

.mobile-nav a:hover {
    padding-left:
        8px;

    color:
        var(--color-white);
}


/* ==========================================================
   CTA MENU MOBILE
   ========================================================== */

.mobile-menu-cta {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 56px;

    margin-top: 30px;

    border-radius:
        var(--radius-xs);

    background:
        var(--palu-red);

    color:
        var(--color-white);

    font-size:
        0.72rem;

    font-weight:
        var(--font-bold);

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.site-footer {
    position: relative;

    width: 100%;

    padding:
        55px
        var(--page-padding)
        0;

    overflow: hidden;

    border-top:
        1px solid var(--color-border);

    background:
        #020406;
}

.site-footer::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 300px;

    left: 50%;
    bottom: -260px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        var(--palu-blue);

    filter:
        blur(150px);

    opacity:
        0.045;

    pointer-events:
        none;
}


/* ==========================================================
   FOOTER CONTAINER
   ========================================================== */

.footer-container {
    position: relative;

    z-index: 2;

    width:
        min(
            100%,
            var(--container-width)
        );

    margin-inline:
        auto;

    display:
        grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    gap:
        50px;

    align-items:
        center;
}


/* ==========================================================
   FOOTER MARCA
   ========================================================== */

.footer-brand {
    display:
        flex;

    align-items:
        center;

    gap:
        20px;
}

.footer-brand img {
    width:
        auto;

    height:
        48px;

    object-fit:
        contain;
}

.footer-brand span {
    max-width:
        150px;

    color:
        rgba(255, 255, 255, 0.38);

    font-size:
        0.56rem;

    font-weight:
        var(--font-semibold);

    letter-spacing:
        0.14em;

    line-height:
        1.5;

    text-transform:
        uppercase;
}


/* ==========================================================
   FOOTER NAV
   ========================================================== */

.footer-nav {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        28px;
}

.footer-nav a {
    color:
        rgba(255, 255, 255, 0.48);

    font-size:
        0.64rem;

    font-weight:
        var(--font-semibold);

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;

    transition:
        color var(--transition);
}

.footer-nav a:hover {
    color:
        var(--color-white);
}


/* ==========================================================
   FOOTER LOCAL
   ========================================================== */

.footer-location {
    justify-self:
        end;

    color:
        rgba(255, 255, 255, 0.38);

    font-size:
        0.62rem;

    font-weight:
        var(--font-medium);

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


/* ==========================================================
   FOOTER BOTTOM
   ========================================================== */

.footer-bottom {
    position:
        relative;

    z-index:
        2;

    width:
        min(
            100%,
            var(--container-width)
        );

    margin:
        45px auto 0;

    padding:
        20px 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.07);

    color:
        rgba(255, 255, 255, 0.28);

    font-size:
        0.57rem;

    letter-spacing:
        0.05em;

    text-align:
        center;
}


/* ==========================================================
   WHATSAPP FLUTUANTE
   ========================================================== */

.whatsapp-float {
    position:
        fixed;

    right:
        24px;

    bottom:
        24px;

    z-index:
        var(--z-whatsapp);

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-height:
        52px;

    padding:
        0 18px 0 14px;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius:
        var(--radius-pill);

    background:
        rgba(8, 15, 13, 0.92);

    color:
        #ffffff;

    box-shadow:
        0 15px 45px
        rgba(0, 0, 0, 0.34);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.whatsapp-float svg {
    width:
        23px;

    height:
        23px;

    flex:
        0 0 auto;

    color:
        #25d366;
}

.whatsapp-float span {
    font-size:
        0.65rem;

    font-weight:
        var(--font-bold);

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}

.whatsapp-float:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(37, 211, 102, 0.42);

    background:
        rgba(11, 30, 22, 0.97);

    box-shadow:
        0 18px 50px
        rgba(0, 0, 0, 0.42),
        0 0 30px
        rgba(37, 211, 102, 0.08);
}


/* ==========================================================
   ANIMAÇÕES GLOBAIS
   ========================================================== */

.reveal {
    opacity:
        0;

    transform:
        translateY(26px);

    transition:
        opacity 900ms
        cubic-bezier(.16, 1, .3, 1),

        transform 900ms
        cubic-bezier(.16, 1, .3, 1);
}

.reveal.visible {
    opacity:
        1;

    transform:
        translateY(0);
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

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

    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }

    .reveal {
        opacity:
            1;

        transform:
            none;
    }

}