/* =========================================================
   PINTANDO 7 - STYLE.CSS
========================================================= */

/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {
    --color-mint: #79ebc3;
    --color-mint-dark: #63d8b4;
    --color-paper: #ededed;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-ink: #303030;
    --color-transparent: transparent;

    --color-brand-ink: #0f2721;
    --color-text-deep: #0f0f0f;
    --color-text-dark: #111111;
    --color-text-medium: #222222;
    --color-text-muted-dark: #2e2e2e;
    --color-text-charcoal: #1c1c1c;
    --color-text-charcoal-soft: #1d1d1d;
    --color-text-strong: #1f1f1f;
    --color-text-neutral: #343434;
    --color-text-light: #f0f0f0;

    --color-border-light: #ececec;
    --color-border-medium: #9a9a9a;
    --color-border-soft: #d7d7d7;

    --color-btn-dark: #3b3b3b;
    --color-btn-dark-hover: #2a2a2a;

    --color-surface-muted: #f7f7f7;
    --color-surface-soft: #f8f8f8;
    --color-surface-gray: #d9d9d9;
    --color-mint-glow-light: #f4fdf9;
    --color-mint-glow: #dcf8ed;
    --color-mint-glow-medium: #b8efd9;
    --color-mint-glow-strong: #95e8ca;
    --color-mint-bright: #79e4c2;
    --color-whatsapp: #25d366;
    --color-whatsapp-dark: #1ebe5d;

    --overlay-white-12: rgba(255,255,255,.12);
    --overlay-white-22: rgba(255,255,255,.22);
    --overlay-white-65: rgba(255,255,255,.65);
    --overlay-white-92: rgba(255,255,255,.92);
    --overlay-white-98: rgba(255,255,255,.98);

    --overlay-black-06: rgba(0,0,0,.06);
    --overlay-black-08: rgba(0,0,0,.08);
    --overlay-black-10: rgba(0, 0, 0, 0.1);
    --overlay-black-12: rgba(0,0,0,.12);
    --overlay-black-18: rgba(0,0,0,.18);
    --overlay-black-22: rgba(0,0,0,.22);
    --overlay-black-35: rgba(0,0,0,.35);
    --overlay-black-45: rgba(0,0,0,.45);
    --overlay-black-70: rgba(0,0,0,.7);
    --overlay-black-75: rgba(0,0,0,.75);

    --overlay-mint-0: rgba(121,228,194,0);
    --overlay-mint-25: rgba(121, 235, 195, 0.25);
    --overlay-mint-35: rgba(121, 235, 195, 0.35);
    --overlay-mint-55: rgba(121,228,194,.55);

    --shadow-soft: 0 10px 30px var(--overlay-black-08);
    --shadow-card: 0 12px 25px var(--overlay-black-22);
    --shadow-hover: 0 20px 30px var(--overlay-black-18);

    --transition-default: .35s ease;
}


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

 * {
     box-sizing: border-box;
}
 body {
     margin: 0;
     font-family: 'Montserrat', sans-serif;
     color: var(--color-ink);
     background: var(--color-white);
     overflow-x: hidden;
}

body:not(.site-loaded) {
    overflow: hidden;
}

 html {
     scroll-behavior: smooth;
}

/* =========================================================
   SITE LOADER
========================================================= */

#site-loader {
    position: fixed;
    inset: 0;

    background: var(--color-white);

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

    z-index: 999999;

    transition:
        opacity .9s ease,
        visibility .9s ease;
}

/* esconde */
#site-loader.loaded {
    opacity: 0;
    visibility: hidden;
}

/* conteúdo */
.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* logo */
.loader-logo {
    width: 140px;

    animation:
        loaderLogoFloat 2.2s ease-in-out infinite;
}

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

.logo-badge {
    opacity: 0;

    transform:
        translateY(-180px);
}

/* ativa */
.logo-badge.logo-loaded {
    animation:
        logoDrop 1.1s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes logoDrop {

    0% {
        opacity: 0;

        transform:
            translateY(-180px);
    }

    70% {
        opacity: 1;

        transform:
            translateY(12px);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0);
    }
}



/* linha */
.loader-line {
    width: 140px;
    height: 4px;

    margin-top: 18px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--color-transparent),
            var(--color-mint),
            var(--color-transparent)
        );

    background-size: 200% 100%;

    animation:
        loaderLineMove 1.6s linear infinite;
}

@keyframes loaderLogoFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

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

@keyframes loaderLineMove {

    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

/* suaviza a sensação visual */
 section {
     scroll-margin-top: 120px;
}
 h1, h2, h3 {
     font-family: 'Playfair Display', serif;
}
 .utility-bar {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border-light);
    z-index: 9999;
    position: relative;
    border: 0;
}
 .utility-item {
     font-size: 0.7rem;
     font-weight: 600;
     padding: 0 1.5rem;
}
 .utility-item a {
    color: var(--color-btn-dark);
    text-decoration: none;
}
 .utility-item a:hover {
    color: var(--color-border-medium);
}
 .header-band {
    background: var(--color-mint);
    padding-top: 1rem;
    padding-bottom: 1rem;
}
 .logo-badge {
    position: absolute;
    top: -30px;
    /* left: 0; */
    /* transform: translateX(-15%); */
    width: 240px;
    height: 140px;
    background: var(--color-white);
    border-radius: 0 0 130px 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
 .logo-mark {
     max-width: 140px;
     height: auto;
     display: block;
     margin-top: -30px;
}
 .nav-shell {
     margin-left: 280px;
     background: var(--color-white);
     border-radius: 999px;
     min-height: 56px;
     display: flex;
     align-items: center;
     justify-content: space-evenly;
     padding: 0.35rem 0.45rem 0.35rem 1rem;
     gap: 1rem;
     font-size: clamp(0.82rem, 0.78rem + 0.15vw, 0.875rem);
}
 .nav-shell .nav-link {
     color: var(--color-text-charcoal);
     font-weight: 600;
     padding: 0.35rem 0.5rem;
}
 .nav-shell .nav-link:hover, .nav-shell .nav-link:focus {
     color: var(--color-border-medium);
}
 .reserve-top-btn {
     background: var(--color-btn-dark);
     color: var(--color-white);
     border-radius: 0.75rem;
    font-size: clamp(0.82rem, 0.78rem + 0.15vw, 0.875rem);
    padding: 0.1rem;
    width: 120px;
}
 .reserve-top-btn:hover, .reserve-top-btn:focus {
     background: var(--color-border-medium);
     color: var(--color-white);
}
 .dropdown-custom {
     position: relative;
}
 .dropdown-custom .nav-link {
     display: flex;
     align-items: center;
     gap: 6px;
}
 .submenu-icon {
     font-size: 12px;
     transition: transform .3s ease;
}
 .submenu {
     position: absolute;
     top: calc(100% + 12px);
     left: 0;
     min-width: 220px;
     padding: 12px 0;
     margin: 0;
     list-style: none;
     background: var(--color-white);
     border-radius: 18px;
     box-shadow: 0 10px 30px var(--overlay-black-08);
     opacity: 0;
     visibility: hidden;
     transform: translateY(10px);
     transition: .25s ease;
     z-index: 99;
}
 .submenu li a {
     display: block;
     padding: 10px 18px;
     color: var(--color-text-medium);
     text-decoration: none;
     font-size: 15px;
     transition: .2s;
}
 .submenu li a:hover {
     background: var(--color-surface-muted);
     padding-left: 24px;
}

/* DESKTOP */
@media (hover: hover) {

    .dropdown-custom:hover .submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .dropdown-custom:hover .submenu-icon {
        transform: rotate(180deg);
    }

}

/* TOUCH */
.dropdown-custom.open .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-custom.open .submenu-icon {
    transform: rotate(180deg);
}

@media (max-width: 992px) {

    .submenu {
        position: static;

        display: none;

        opacity: 1;
        visibility: visible;
        transform: none;

        margin-top: 10px;

        background: var(--color-transparent);
        box-shadow: none;
    }

    .dropdown-custom.open .submenu {
        display: block;
    }

}

@media (min-width: 1200px) {
 .reserve-top-btn {
    font-weight: 700;
  }

    .nav-shell {
      margin-left: 340px;
      min-height: 64px;
      font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.125rem);
  }
  .nav-shell .nav-link {
      padding: 0.35rem 0.5rem;
  }

  .utility-item {
    font-size: 0.95rem;
  }
}

 .hero-section {
     position: relative;
     background: url('../assets/home/banner_home.png') center/cover no-repeat;
}
 .hero-section .padding-title {
     padding-left: 180px;
}
 .hero-copy {
     position: relative;
     z-index: 1;
     padding-top: 45px;
}
 .hero-copy h1 {
     margin: 0;
     color: var(--color-mint);
     font-size: clamp(1.8rem, 1.4rem + 0.7vw, 2.375rem);
     line-height: 1.03;
     font-weight: bolder;
}
 .hero-copy h1.title-1{
     font-size: clamp(1.7rem, 1.2rem + 1.3vw, 2.375rem);
     font-style: italic;
     transform: translateX(-80px);
     animation: slideLeftToRight .9s ease forwards;
     animation-delay: .2s;
}
 .hero-copy h1.title-2{
     font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem);
     font-style: italic;
     transform: translateX(-80px);
     animation: slideLeftToRight .9s ease forwards;
     animation-delay: .8s;
}
 .hero-copy p {
     color: var(--color-text-light);
     font-size: clamp(0.95rem, 0.93rem + 0.1vw, 1rem);
     line-height: 1.2;
     max-width: 34rem;
     margin: 1.5rem 0 1.5rem 0;
     font-weight: 500;
     animation: fadeInText .9s ease forwards;
     animation-delay: 1.4s;
}
 .hero-copy h2 {
     margin: 0 0 0.9rem;
     color: var(--color-white);
     font-style: italic;
     line-height: 1.05;
     font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
     font-weight: 900;
     transform: translateY(20px);
     animation: fadeUpTitle .8s ease forwards;
     animation-delay: 1.7s;
}
 .hero-copy .title-1, .hero-copy .title-2, .hero-copy h2, .hero-copy p, .reserve-main-btn, .hero-deer {
     opacity: 0;
}
 .reserve-main-btn {
     background: var(--color-mint);
     color: var(--color-brand-ink);
     border: 0;
     border-radius: 0.55rem;
     padding: 0.2rem 1.6rem;
     font-size: 18px;
     font-weight: 500;
     transform: translateY(40px);
     animation: buttonRise .8s ease forwards;
     animation-delay: 2s;
}
 .reserve-main-btn .bi-cart3 {
     font-size: 20px;
}
 .reserve-main-btn:hover, .reserve-main-btn:focus {
     background: var(--color-mint-dark);
     color: var(--color-brand-ink);
}
 .hero-deer {
     animation: deerLedEffect 1.2s ease forwards;
     animation-delay: 2.7s;
}
 @keyframes slideLeftToRight {
     from {
         opacity: 0;
         transform: translateX(-80px);
    }
     to {
         opacity: 1;
         transform: translateX(0);
    }
}
 @keyframes fadeInText {
     from {
         opacity: 0;
         transform: translateY(10px);
    }
     to {
         opacity: 1;
         transform: translateY(0);
    }
}
 @keyframes buttonRise {
     from {
         opacity: 0;
         transform: translateY(40px);
    }
     to {
         opacity: 1;
         transform: translateY(0);
    }
}
/* efeito painel de LED */
 @keyframes deerLedEffect {
     0% {
         opacity: 0;
         filter: brightness(0.2) blur(8px);
    }
     20% {
         opacity: .3;
         filter: brightness(2.5) blur(6px);
    }
     40% {
         opacity: .15;
         filter: brightness(1) blur(3px);
    }
     60% {
         opacity: .7;
         filter: brightness(3) blur(2px);
    }
     100% {
         opacity: 1;
         filter: brightness(1) blur(0);
    }
}
 @keyframes fadeUpTitle {
     from {
         opacity: 0;
         transform: translateY(20px);
    }
     to {
         opacity: 1;
         transform: translateY(0);
    }
}
 .hero-cards-wrap {
     margin-top: -70px;
     position: relative;
     z-index: 3;
}
 .hero-card {
     border-radius: 1.25rem;
     box-shadow: 0 12px 25px var(--overlay-black-22);
     opacity: 0;
     transform: translateY(80px) scale(.85) rotate(-4deg);
     filter: blur(10px) brightness(.7);
     animation: heroCardReveal 1s cubic-bezier(.22, 1, .36, 1) forwards, heroCardFloat 5s ease-in-out infinite;
     animation-play-state: running;
}
/* delays em sequência */
 .hero-card:nth-child(1) {
     animation-delay: 3.5s, 4.8s;
}
 .hero-card:nth-child(2) {
     transform: translateY(80px) scale(.85) rotate(3deg);
     animation-delay: 3.9s, 5.2s;
}
 .hero-card:nth-child(3) {
     transform: translateY(80px) scale(.85) rotate(-2deg);
     animation-delay: 4.3s, 5.6s;
}
 .hero-card:hover {
     transform: translateY(-12px) scale(1.03) !important;
     transition: transform .35s ease, filter .35s ease;
     filter: brightness(1.05) drop-shadow(0 20px 30px var(--overlay-black-18));
}
/* ========================= ENTRADA ========================= */
 @keyframes heroCardReveal {
     0% {
         opacity: 0;
         transform: translateY(80px) scale(.85) rotate(-6deg);
         filter: blur(12px) brightness(.5);
    }
     60% {
         opacity: 1;
         transform: translateY(-8px) scale(1.02) rotate(1deg);
         filter: blur(0) brightness(1.1);
    }
     100% {
         opacity: 1;
         transform: translateY(0) scale(1) rotate(0);
         filter: blur(0) brightness(1);
    }
}
/* ========================= FLOATING SUAVE ========================= */
 @keyframes heroCardFloat {
     0% {
         transform: translateY(0);
    }
     50% {
         transform: translateY(-8px);
    }
     100% {
         transform: translateY(0);
    }
}
 .section-light {
     background: var(--color-white);
}
 .section-title {
     font-size: clamp(2.2rem, 4.5vw, 4rem);
     color: var(--color-mint);
     text-align: center;
     margin-bottom: 2.5rem;
     font-weight: 700;

    opacity: 0;
    transform: translateY(80px);

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(.22, 1, .36, 1);
}

/* quando entrar na tela */
.section-title.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   ÍCONES DO TITLE
========================= */

.section-title .title-icon {
    opacity: 0;
}

/* PRIMEIRA IMAGEM */
.section-title.in-view .title-icon:first-of-type {
    animation:
        titleIconBurst .9s cubic-bezier(.22, 1, .36, 1) forwards;

    animation-delay: .6s;
}

/* SEGUNDA IMAGEM */
.section-title.in-view .title-icon:last-of-type {
    animation:
        titleIconDrop .8s cubic-bezier(.22, 1, .36, 1) forwards;

    animation-delay: 1.2s;
}

/* =========================
   BURST EFFECT
========================= */

@keyframes titleIconBurst {

    0% {
        opacity: 0;

        transform:
            scale(.2)
            rotate(-25deg);

        filter:
            blur(10px);
    }

    60% {
        opacity: 1;

        transform:
            scale(1.25)
            rotate(8deg);

        filter:
            blur(0);
    }

    100% {
        opacity: 1;

        transform:
            scale(1)
            rotate(0);

        filter:
            blur(0);
    }
}

/* =========================
   DROP EFFECT
========================= */

@keyframes titleIconDrop {

    0% {
        opacity: 0;

        transform:
            translateY(-80px)
            rotate(-12deg);

        filter:
            blur(8px);
    }

    70% {
        opacity: 1;

        transform:
            translateY(10px)
            rotate(4deg);

        filter:
            blur(0);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            rotate(0);
    }
}


/* =========================
   BG EXPERIENCIAS
========================= */

#experiencias {
    position: relative;
    overflow: hidden;
}

#experiencias::before {
    content: '';

    position: absolute;
    inset: 0;

    background:
        url('../assets/home/bg_experiencias.png')
        center center / 100% auto no-repeat;

    opacity: 0;

    transition: opacity 1.4s ease;

    z-index: 0;
}

/* fundo aparece */
#experiencias.bg-visible::before {
    opacity: 1;
}

/* =========================
   COVER BG EXPERIENCIA
========================= */

#experiencias::after {
    content: '';

    position: absolute;

    right: 15px;
    bottom: 50px;
    width: 185px;
    height: 170px;

    background:
        url('../assets/home/cover_bg_experiencia.png')
        bottom right / contain no-repeat;

    pointer-events: none;

    z-index: 1;

    display: none;

    opacity: 0;
}


@media (min-width: 1380px) {

    #experiencias.show-cover::after {
        display: block;

        animation:
            titleIconBurst 1s cubic-bezier(.22, 1, .36, 1) forwards,
            expCornerFloat 6s ease-in-out infinite 1s;
    }

}

@keyframes expCornerFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

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

/* conteúdo acima do fundo */
#experiencias .container {
    position: relative;
    z-index: 2;
}

 .experiences-section {
    height: 100dvh;
    max-height: 1100px;
    display: flex;
    align-items: center;
    position: relative;
}
 .exp-image {
     width: 100%
     object-fit: cover;
     border-radius: 2.25rem 2.25rem 0 0;
     margin-bottom: 0.9rem;
     margin-top: 30px;
     transition: height .45s ease, margin-top .45s ease, transform .45s ease;
}
 .exp-card h3 {
     font-family: 'Montserrat', sans-serif;
     font-size: 2rem;
     font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
     margin-bottom: 0.45rem;
     font-weight: 700;
}
/* Área fixa do texto */
 .exp-card p {
     min-height: 72px;
     margin: 0;
     opacity: 0;
     visibility: hidden;
     font-family: 'Montserrat', sans-serif;
     font-size: 1.65rem;
     font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1rem);
     line-height: 1.15;
    /*margin-bottom: 0.35rem;
    */
     padding: 1.5rem 0.9rem;
     transition: opacity .35s ease, visibility .35s ease;
     display: flex;
     align-items: center;
     justify-content: center;
}

.experiences-section article {
     height: 100%;
}

/* =========================
   EXPERIENCE MOBILE
========================= */

@media (hover: none), (max-width: 991px) {

    .exp-card,
    .exp-card:hover {
        transform: none !important;

        filter: none !important;
    }

    .exp-card a.saiba-mais,
    .exp-card::after,
    .exp-card:hover::after {
        opacity: 0 !important;
    }

    .exp-card:hover .exp-image {
        transform: none !important;
    }

    .exp-card:hover p {
        transform: none !important;
    }

}

/* =========================
   EXPERIENCE MOBILE TIP
========================= */

.exp-mobile-tip {
    display: none;

    text-align: center;

    margin-top: 1.5rem;

    font-size: .78rem;
    font-weight: 700;

    letter-spacing: .08em;
    text-transform: uppercase;

    color: var(--color-btn-dark-hover);

    opacity: 0;

    transform: translateY(10px);
}

/* MOBILE */
@media (hover: none), (max-width: 991px) {

    .exp-mobile-tip {
        display: block;
    }

    .exp-mobile-tip.in-view {
        animation:
            expTipReveal .8s ease forwards;

        animation-delay: 1s;
    }

}

@keyframes expTipReveal {

    from {
        opacity: 0;

        transform:
            translateY(10px);

        filter:
            blur(4px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);

        filter:
            blur(0);
    }
}

/* =========================
   GRID MAIS PRÓXIMO
========================= */

.experiences-section .row {
    --bs-gutter-x: .8rem;
}

/* =========================
   CARD
========================= */

.exp-card {
    height: 100%;
    min-height: 360px;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    position: relative;
    overflow: hidden;

    opacity: 0;

    transform:
        translateY(-220px)
        scale(.88)
        rotate(-6deg);

    filter:
        blur(10px);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.exp-card.in-view {
    animation:
        expCardDrop 1s cubic-bezier(.22, 1, .36, 1) forwards;
}

.experiences-section article:nth-child(1) .exp-card {
    animation-delay: .2s;
}

.experiences-section article:nth-child(2) .exp-card {
    animation-delay: .4s;
}

.experiences-section article:nth-child(3) .exp-card {
    animation-delay: .6s;
}

.experiences-section article:nth-child(4) .exp-card {
    animation-delay: .8s;
}

.experiences-section article:nth-child(5) .exp-card {
    animation-delay: 1s;
}

@keyframes expCardDrop {

    0% {
        opacity: 0;

        transform:
            translateY(-220px)
            scale(.88)
            rotate(-8deg);

        filter:
            blur(12px);
    }

    55% {
        opacity: 1;

        transform:
            translateY(18px)
            scale(1.03)
            rotate(2deg);

        filter:
            blur(0);
    }

    75% {
        transform:
            translateY(-8px)
            scale(.99)
            rotate(-1deg);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1)
            rotate(0);

        filter:
            blur(0);
    }
}

/* =========================
   TÍTULO
========================= */

.exp-card h3 {
    margin-bottom: .7rem;
}


/* =========================
   LINK CARD
========================= */
.exp-card a.exp-card-link {
    text-decoration: none;
    color: initial;
}

/* =========================
   TEXTO VISÍVEL
========================= */

.exp-card p {
    min-height: 72px;

    margin: 0;

    opacity: 1;
    visibility: visible;

    font-size: clamp(.92rem, .88rem + .2vw, 1rem);
    line-height: 1.2;

    padding: 1.9rem;

    transition:
        transform .35s ease,
        font-size .35s ease,
        color .35s ease;
}

/* =========================
   LINK ESCONDIDO
========================= */

.exp-card a.saiba-mais {
    opacity: 0;
    visibility: hidden;

    transform: translateY(12px);

    margin-top: auto;

    color: var(--color-text-medium);

    font-size: .95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;

    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s ease;
}

/* =========================
   HOVER
========================= */

.exp-card:hover {
    transform: translateY(-14px);
}

.exp-card:hover .exp-image {
    transform:
        translateY(-18px)
        rotate(-2deg);
}

/* texto cresce levemente */
.exp-card:hover p {
    transform: scale(1.1);

    color: var(--color-text-dark);
}

/* saiba mais aparece */
.exp-card:hover a {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.exp-card a.saiba-mais:hover {
    color: var(--color-mint-dark);
}

/* =========================
   EFEITO CARTA
========================= */

.exp-card::after {
    content: '';

    position: absolute;
    inset: 0;

    border-radius: 24px;

    box-shadow:
        0 18px 35px var(--overlay-black-08);

    opacity: 0;

    transition: opacity .35s ease;

    pointer-events: none;
}

.exp-card:hover::after {
    opacity: 1;
}

#unidades {
    position: relative;
    overflow: hidden;
}

/* =========================
   UNIDADES ANIMATION
========================= */

#unidades .units-title,
#unidades .unit-about p,
#unidades .unit-card {
    opacity: 0;
}

#unidades .units-title.in-view {
    animation:
        unitsTitleReveal 1s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes unitsTitleReveal {

    from {
        opacity: 0;

        transform:
            translateY(70px);

        filter:
            blur(10px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);

        filter:
            blur(0);
    }
}

#unidades .unit-about p.in-view {
    animation:
        unitsTextReveal .9s ease forwards;
}

#unidades .unit-about p:nth-of-type(1) {
    animation-delay: .3s;
}

#unidades .unit-about p:nth-of-type(2) {
    animation-delay: .5s;
}

#unidades .unit-about p:nth-of-type(3) {
    animation-delay: .7s;
}

#unidades .unit-about p:nth-of-type(4) {
    animation-delay: .9s;
}

@keyframes unitsTextReveal {

    from {
        opacity: 0;

        transform:
            translateX(-40px);

        filter:
            blur(6px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);

        filter:
            blur(0);
    }
}

#unidades .unit-card.in-view {
    animation:
        unitCardReveal 1.1s cubic-bezier(.22, 1, .36, 1) forwards;
}

#unidades .unit-card:nth-of-type(1) {
    animation-delay: .8s;
}

#unidades .unit-card:nth-of-type(2) {
    animation-delay: 1.1s;
}

@keyframes unitCardReveal {

    0% {
        opacity: 0;

        transform:
            translateX(120px)
            scale(.95);

        filter:
            blur(10px);
    }

    60% {
        opacity: 1;

        transform:
            translateX(-10px)
            scale(1.01);

        filter:
            blur(0);
    }

    100% {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }
}

.unit-image {
    transition:
        transform .6s ease,
        filter .6s ease;
}

.unit-card.in-view .unit-image {
    animation:
        unitImageFocus 1.2s ease forwards;
}

@keyframes unitImageFocus {

    from {
        transform: scale(1.15);

        filter:
            blur(10px)
            brightness(.7);
    }

    to {
        transform: scale(1);

        filter:
            blur(0)
            brightness(1);
    }
}

#unidades::after {
    content: '';

    position: absolute;

    top: 30px;
    left: 15px;

    width: calc((100vw - 1320px) / 2);
    height: 340px;

    background:
        url('../assets/home/cover_bg_unidades.png')
        top left / contain no-repeat;

    pointer-events: none;

    z-index: 1;

    opacity: 0;

    display: none;
}

@media (min-width: 1380px) {

    #unidades.show-cover::after {
        display: block;

        animation:
            titleIconBurst 1s cubic-bezier(.22, 1, .36, 1) forwards,
            expCornerFloat 6s ease-in-out infinite 1s;
    }

}

#unidades .container {
    position: relative;
    z-index: 2;
}

 .units-section {
     padding: 65px 0;
     background: var(--color-paper);
     height: 100dvh;
     max-height: 1100px;
     display: flex;
     align-items: center;
     position: relative;
  }
 
  .units-title {
     color: var(--color-text-dark);
     font-size: clamp(2.2rem, 4.5vw, 4rem);
     margin-bottom: 1rem;
     font-weight: 700;
     text-align: right;
}
 .unit-about p {
     font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
     line-height: 1.35;
     margin-bottom: 1rem;
     text-align: right;
}
 .unit-card {
     padding-bottom: 1.2rem;
     margin-bottom: 1.3rem;
     border-bottom: 1px dashed var(--color-border-medium);
}
.unit-card:last-child {
    border: none;
}
 .unit-image {
     width: 100%;
     border-radius: 1.1rem;
}
 .unit-card h4 {
     margin-bottom: 0.3rem;
     font-weight: 700;
}
 .unit-card p {
     font-size: clamp(0.95rem, 0.93rem + 0.1vw, 1rem);
     line-height: 1.2;
     margin-bottom: 0.9rem;
}
 .unit-card a {
     color: var(--color-text-muted-dark);
     font-weight: 700;
}


.shop-section {
    position: relative;
    overflow: hidden;
    height: 100dvh;
    max-height: 1100px;
    display: flex;
    align-items: center;
}

/* =========================
   SHOP CONTAINER BG
========================= */

.shop-section .container {
    position: relative;
    z-index: 2;
}

/* BG */
.shop-section .container::before {
    content: '';
    position: absolute;
    inset: -140px 0 0 0;
    background: url(../assets/home/bg_shop.png) center 15px / 1025px auto no-repeat;
    opacity: 0;
    transition: opacity 1.4s ease;
    z-index: -1;
    pointer-events: none;
}

@media (max-width: 768px) {

    .shop-section .container::before {
        background: url(../assets/home/bg_shop.png) center center / 95% auto no-repeat !important;
        inset: 0;
    }

}

@media (min-width: 767px) {
    .shop-section .container::before {
        inset: -60px 0 0 0;
        background: url(../assets/home/bg_shop.png) center top / 70% auto no-repeat;
        
    }
    section-title.in-view {
        opacity: 0.5;
    }
}

/* ativa fade */
.shop-section.bg-visible .container::before {
    opacity: 1;
}

 .shop-section {
     background: radial-gradient( ellipse at center, var(--color-white) 0%, var(--color-white) 24%, var(--color-mint-glow-light) 38%, var(--color-mint-glow) 55%, var(--color-mint-glow-medium) 72%, var(--color-mint-glow-strong) 86%, var(--color-mint-bright) 100% );
}

.shop-section h2 {
  font-size: clamp(3rem, 1.8rem + 4vw, 5.3125rem);
}


/* =========================
   SHOP CARD INITIAL
========================= */

.shop-card {
  text-align: center;

    opacity: 0;

    transform:
        translateY(120px)
        scale(.82)
        rotate(-4deg);

    filter:
        blur(12px);
}

.shop-card.in-view {
    animation:
        shopCardReveal 1.1s cubic-bezier(.22, 1, .36, 1) forwards;
}

.shop-card:nth-child(1) {
    animation-delay: .2s;
}

.shop-card:nth-child(2) {
    animation-delay: .45s;
}

.shop-card:nth-child(3) {
    animation-delay: .7s;
}

@keyframes shopCardReveal {

    0% {
        opacity: 0;

        transform:
            translateY(120px)
            scale(.82)
            rotate(-6deg);

        filter:
            blur(12px)
            brightness(.7);
    }

    55% {
        opacity: 1;

        transform:
            translateY(-14px)
            scale(1.03)
            rotate(2deg);

        filter:
            blur(0)
            brightness(1.15);
    }

    75% {
        transform:
            translateY(6px)
            scale(.99)
            rotate(-1deg);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1)
            rotate(0);

        filter:
            blur(0)
            brightness(1);
    }
}

 .shop-image {
     border-radius: 1rem 1rem 0 0;
     margin-bottom: 0.8rem;
}

.shop-card h4 {
  margin-bottom: 0.3rem;
  font-weight: 700;
}
 .shop-card p {
    font-size: clamp(.92rem, .88rem + .2vw, 1rem);
    line-height: 1.2;
    padding: 1.9rem 3rem;
}

/* =========================
   BUY BUTTON HIGHLIGHT
========================= */

.buy-btn {
     background: var(--color-mint);
     color: var(--color-text-dark);
     border: 0;
     font-size: clamp(1.1rem, 1vw, 1.4rem);
     font-weight: 700;
     border-radius: 0.5rem;
     padding: 0.4rem 1.1rem;
    position: relative;
    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

/* glow suave */
.buy-btn::before {
    content: '';

    position: absolute;

    top: 0;
    left: -120%;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            120deg,
            var(--color-transparent),
            var(--overlay-white-65),
            var(--color-transparent)
        );

    transition: none;
}

 .buy-btn:hover, .buy-btn:focus {
     background: var(--color-mint-dark);
     color: var(--color-text-dark);
}


@keyframes buyBtnShine {

    from {
        left: -120%;
    }

    to {
        left: 140%;
    }
}

@keyframes buyBtnPulse {

    0% {
        transform: scale(1);

        box-shadow:
            0 0 0 var(--overlay-mint-0);
    }

    50% {
        transform: scale(1.06);

        box-shadow:
            0 0 24px var(--overlay-mint-55);
    }

    100% {
        transform: scale(1);

        box-shadow:
            0 0 0 var(--overlay-mint-0);
    }
}

/* shine */
.shop-card.in-view .buy-btn::before {
    animation:
        buyBtnShine 1.8s ease forwards;

    animation-delay: 1.1s;
}

/* pulse */
.shop-card.in-view .buy-btn {
    animation:
        buyBtnPulse 2.4s ease-in-out infinite;

    animation-delay: 1.5s;
}

 
.benefits-section {
    height: 100dvh;
    max-height: 1100px;
    display: flex;
    align-items: center;
    position: relative;
}

.benefits-section h1 {
    color: var(--color-mint);
    line-height: 1.03;
    font-weight: bolder;
}

.benefits-section h1.title-1 {
    font-size: clamp(2.3rem, 1.5rem + 2vw, 3.4375rem);
    font-style: italic;
}

.benefits-section h1.title-2 {
    font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem);
    font-style: italic;
}

.benefits-section .padding-title {
    padding-left: 180px;
}

 .benefit-item {
     display: flex;
     align-items: flex-start;
     gap: 1rem;
     margin-top: 30px;
}

.benefit-icon {
    min-width: 60px;
    width: 60px;
    height: 60px;

    border-radius: 0.75rem;

    background: var(--color-mint);

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

    flex-shrink: 0;
}

.benefit-icon img {
    width: 45px;
    height: auto;
    display: block;
}

.benefit-item h4 {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
    margin-bottom: 0.8rem;
    font-weight: 700;
    line-height: 1.15;
}

 .benefit-item p {
     font-size: clamp(1.05rem, 1.05vw, 1.35rem);
     line-height: 1.28;
     margin: 0;
}

/* =========================
   BENEFITS INITIAL
========================= */

#benefits .title-1,
#benefits .title-2,
#benefits .benefit-item {
    opacity: 0;
}

#benefits .row {
    align-items: stretch;
}

#benefits .col-lg-4 {
    display: flex;
    align-items: flex-end;
}

#benefits .title-1.in-view {
    animation:
        slideLeftToRight .9s ease forwards;

    animation-delay: .2s;
}

#benefits .title-2.in-view {
    animation:
        slideLeftToRight .9s ease forwards;

    animation-delay: .8s;
}

#benefits .benefit-item.in-view {
    animation:
        benefitsReveal .9s cubic-bezier(.22, 1, .36, 1) forwards;
}


#benefits article:nth-child(1) .benefit-item {
    animation-delay: 1.1s;
}

#benefits article:nth-child(2) .benefit-item {
    animation-delay: 1.35s;
}

#benefits article:nth-child(3) .benefit-item {
    animation-delay: 1.6s;
}

#benefits article:nth-child(4) .benefit-item {
    animation-delay: 1.85s;
}


@keyframes benefitsReveal {

    0% {
        opacity: 0;

        transform:
            translateY(40px)
            scale(.92);

        filter:
            blur(8px);
    }

    60% {
        opacity: 1;

        transform:
            translateY(-6px)
            scale(1.02);

        filter:
            blur(0);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

.benefit-item {
    transition:
        transform .35s ease,
        filter .35s ease;
}

.benefit-item:hover {
    transform: translateY(-6px);

    filter:
        drop-shadow(0 16px 24px var(--overlay-black-08));
}

/* =========================
   BENEFIT DEER
========================= */

.benefit-deer-wrap {
    min-height: 700px;

    background:
        url('../assets/home/benefit-deer.png')
        center bottom / contain no-repeat;

    opacity: 0;

    transform:
        translateY(50px)
        scale(.95);

    filter:
        blur(10px);

    transition:
        opacity 1.2s ease,
        transform 1.2s cubic-bezier(.22, 1, .36, 1),
        filter 1.2s ease;
}

/* aparece */
.benefit-deer-wrap.in-view {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter:
        blur(0);

    animation:
        deerSoftFloat 6s ease-in-out infinite;
}

@keyframes deerSoftFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

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

 .footer-strip {
     background: var(--color-black);
}
 .footer-thumb {
     width: 110px;
     height: 64px;
     object-fit: cover;
     border-radius: 0.6rem;
}

 @media (max-width: 767.98px) {
     .utility-item {
         font-size: 0.85rem;
    }
     .section-title, .units-title {
         margin-bottom: 1.5rem;
    }
     .benefit-item {
         align-items: center;
    }
     .benefit-icon {
         width: 52px;
         min-width: 52px;
         height: 52px;
         font-size: 1.7rem;
    }
}

/* =========================================================
   HISTÓRIA
========================================================= */

.history-section {
    margin: 5rem 0;
}

.history-section .container {
    position: relative;
}

.history-section .container > * {
    position: relative;
    z-index: 2;
}

.history-section .container::before {
    content: '';
    position: absolute;
    right: 40px;
    top: -15px;
    width: 123px;
    height: 107px;
    background: url(../assets/historia/historia_bg_1.png) top right / contain no-repeat;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transform:
        scale(.3)
        rotate(-15deg);
    filter:
        blur(10px);
}

.history-section.bg-visible .container::before {
    animation:
        historyBgReveal 1s cubic-bezier(.22, 1, .36, 1) forwards,
        historyBgFloat 6s ease-in-out infinite 1s;
}

.units-history-section .justify-content-space-evenly {
    justify-content: space-evenly;
}


@keyframes historyBgReveal {

    0% {
        opacity: 0;

        transform:
            scale(.3)
            rotate(-15deg);

        filter:
            blur(10px);
    }

    60% {
        opacity: 1;

        transform:
            scale(1.15)
            rotate(6deg);

        filter:
            blur(0);
    }

    100% {
        opacity: 1;

        transform:
            scale(1)
            rotate(0);

        filter:
            blur(0);
    }
}

@keyframes historyBgFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

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

.history-section .history-row-2 .img {
    position: relative;
}

.history-section .history-row-2 .img::before {
    content: '';
    position: absolute;
    right: 10px;
    top: -70px;
    width: 86px;
    height: 67px;
    background: url(../assets/historia/historia_bg_2.png) top right / contain no-repeat;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transform:
        scale(.3)
        rotate(-15deg);
    filter:
        blur(10px);
}

.history-section.bg-visible-2 .history-row-2 .img::before {
    animation:
        historyBgReveal 1s cubic-bezier(.22, 1, .36, 1) forwards,
        historyBgFloat 6s ease-in-out infinite 1s;
}

/* =========================================================
   HISTORY CONTENT ANIMATION
========================================================= */

.history-section p,
.history-section .video-thumb-wrap,
.history-section .history-row-2 .img {
    opacity: 0;
}

.history-section p {
    transform:
        translateX(-60px);

    filter:
        blur(6px);
}

.history-section .video-thumb-wrap,
.history-section .history-row-2 .img {
    transform:
        scale(.92)
        translateY(20px);

    filter:
        blur(10px);
}

.history-section .history-animate.in-view {
    animation:
        historyTextReveal .9s cubic-bezier(.22, 1, .36, 1) forwards;
}

.history-section .history-media.in-view {
    animation:
        historyMediaReveal 1s cubic-bezier(.22, 1, .36, 1) forwards;
}

/* primeira coluna */
.history-section .row:first-child p:nth-child(1) {
    animation-delay: .2s;
}

.history-section .row:first-child p:nth-child(2) {
    animation-delay: .5s;
}

.history-section .row:first-child p:nth-child(3) {
    animation-delay: .8s;
}

/* segunda row */
.history-row-2 p:nth-child(1) {
    animation-delay: .2s;
}

.history-row-2 p:nth-child(2) {
    animation-delay: .5s;
}

.history-section .video-thumb-wrap.in-view {
    animation-delay: 1s;
}

.history-section .history-row-2 .img.in-view {
    animation-delay: 1.2s;
}

@keyframes historyTextReveal {

    from {
        opacity: 0;

        transform:
            translateX(-60px);

        filter:
            blur(6px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);

        filter:
            blur(0);
    }
}

@keyframes historyMediaReveal {

    from {
        opacity: 0;

        transform:
            scale(.92)
            translateY(20px);

        filter:
            blur(10px);
    }

    to {
        opacity: 1;

        transform:
            scale(1)
            translateY(0);

        filter:
            blur(0);
    }
}

/* =========================================================
   VIDEO THUMB
========================================================= */

.video-thumb-wrap {
    position: relative;
}

.video-trigger {
    position: relative;

    border: 0;
    background: var(--color-transparent);

    width: 100%;

    padding: 0;

    overflow: hidden;

    border-radius: 28px;

    cursor: pointer;
}

/* imagem */
.video-trigger img {
    transition:
        transform .6s ease,
        filter .6s ease;
}

/* hover */
.video-trigger:hover img {
    transform: scale(1.04);

    filter:
        brightness(.7);
}

/* botão play */
.video-play {
    position: absolute;

    inset: 0;

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

    pointer-events: none;
}

.video-play i {
    width: 88px;
    height: 88px;

    border-radius: 50%;

    background: var(--overlay-white-92);

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

    font-size: 3rem;

    color: var(--color-mint);

    box-shadow:
        0 10px 30px var(--overlay-black-18);

    transition:
        transform .35s ease,
        background .35s ease;
}

/* hover */
.video-trigger:hover .video-play i {
    transform: scale(1.08);

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

/* =========================================================
   VIDEO MODAL
========================================================= */

.video-modal {
    position: fixed;

    inset: 0;

    background:
        var(--overlay-black-75);

    backdrop-filter: blur(10px);

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

    padding: 2rem;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .45s ease,
        visibility .45s ease;

    z-index: 999999;
}

/* aberto */
.video-modal.open {
    opacity: 1;
    visibility: visible;
}

/* conteúdo */
.video-modal-content {
    position: relative;

    width: 100%;
    max-width: 1100px;

    transform:
        translateY(30px)
        scale(.95);

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1);
}

/* animação */
.video-modal.open .video-modal-content {
    transform:
        translateY(0)
        scale(1);
}

/* iframe */
.video-frame-wrap {
    position: relative;

    width: 100%;

    padding-top: 56.25%;

    border-radius: 28px;

    overflow: hidden;

    box-shadow:
        0 20px 60px var(--overlay-black-35);
}

.video-frame-wrap iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}

/* fechar */
.video-close {
    position: absolute;

    top: -54px;
    right: 0;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    border: 0;

    background: var(--overlay-white-12);

    color: var(--color-white);

    backdrop-filter: blur(10px);

    z-index: 2;

    transition:
        background .3s ease,
        transform .3s ease;
}

.video-close:hover {
    background: var(--overlay-white-22);

    transform: rotate(90deg);
}

.history-section p {
    font-weight: 500;
}

.history-section .history-row-2 {
    padding-top: 5rem
}

.history-section .section-title {
    text-align: left;
    font-size: clamp(2rem, 1rem + 2.5vw, 3.125rem);
}

/* =========================================================
   ARTETERAPIA TYPE
========================================================= */

.arteterapia-section {
    padding: 20px 0;
    background: var(--color-paper);
    display: flex;
    align-items: center;
    position: relative;
}

.arteterapia-section .section-title {
    color: var(--color-text-dark);
    font-size: clamp(2.2rem, 1.4rem + 1.8vw, 3.125rem);
    margin-bottom: 1rem;
    font-weight: 700;
    text-align: center;
}

.arteterapia-section article {
    font-weight: 500;
    margin: 1.5rem 0;
    text-align: center;
}

/* =========================================================
   ARTETERAPIA TYPEWRITER
========================================================= */

.arteterapia-section p {
    position: relative;

    opacity: 0;

    transition: opacity .3s ease;
}

/* ativo */
.arteterapia-section p.typing,
.arteterapia-section p.finished {
    opacity: 1;
}

/* cursor */
.arteterapia-section p.typing::after {
    content: '|';

    display: inline-block;

    margin-left: 2px;

    color: var(--color-mint);

    animation:
        typeCursor .7s infinite;
}

/* remove cursor */
.arteterapia-section p.finished::after {
    display: none;
}

/* =========================================================
   UNITS HISTORY
========================================================= */

.units-history-section {
    height: 100dvh;
    max-height: 1100px;
    display: flex;
    align-items: center;
    position: relative;
}

.units-history-section .unit-card a {
    font-weight: 600;
    font-size: 15px;
}

.units-history-section .justify-content-space-evenly {
    justify-content: space-evenly;
}

@media (max-width: 992px) {
    .units-history-section {
        max-height: none;
        height: auto;
        display: block;
        margin: 80px 0;
        text-align: center;
    }
}

#unidades-historia .unit-card {
    opacity: 0;

    transform:
        scale(.55)
        translateY(60px);

    filter:
        blur(10px);
}

#unidades-historia .unit-card.in-view {
    animation:
        unitsCardExplode 1s cubic-bezier(.22, 1, .36, 1) forwards;
}

#unidades-historia .col-lg-4:nth-of-type(1) .unit-card {
    animation-delay: .2s;
}

#unidades-historia .col-lg-4:nth-of-type(2) .unit-card {
    animation-delay: .7s;
}

@keyframes unitsCardExplode {

    0% {
        opacity: 0;

        transform:
            scale(.55)
            translateY(60px);

        filter:
            blur(10px);
    }

    60% {
        opacity: 1;

        transform:
            scale(1.06)
            translateY(-8px);

        filter:
            blur(0);
    }

    100% {
        opacity: 1;

        transform:
            scale(1)
            translateY(0);

        filter:
            blur(0);
    }
}

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

.footer-main {
    position: relative;
    padding-top: 80px;
    background: var(--color-mint);
    overflow: hidden;
}

/* container */
.footer-main .container {
    position: relative;
    z-index: 2;
}

/* logo */
.footer-logo {
    height: 100px;

    margin-bottom: 2rem;
}

/* blocos */
.footer-block {
    margin-bottom: 1.8rem;
}

.footer-block h4,
.footer-unit h4 {
    font-size: 1.2rem;
    font-weight: 800;

    margin-bottom: .45rem;

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

/* links */
.footer-links {
    padding: 0;
    margin: 0;

    list-style: none;
}

.footer-links li {
    margin-bottom: .15rem;
}

.footer-links a,
.footer-unit a {
    color: var(--color-black);

    text-decoration: none;

    transition:
        color .3s ease;
}

.footer-links a:hover,
.footer-unit a:hover {
    color: var(--color-white);
}

/* social */
.footer-social {
    display: flex;
    gap: 12px;
}

.footer-social a {
    color: var(--color-black);

    font-size: 1.45rem;

    transition:
        transform .3s ease,
        color .3s ease;
}

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

    transform: translateY(-3px);
}

/* imagens */
.footer-unit-image {
    height: 100px;
    border-radius: 1rem;
    margin-bottom: 2rem;
    display: block;
}

/* textos unidade */
.footer-unit p {
    margin-bottom: 1rem;
    line-height: 1.2;
}

/* link unidade */
.footer-unit a {
    font-weight: 800;
}

/* cervo */
.footer-deer {
    width: 100%;
    opacity: 0.4;
}

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

.footer-copy {
    margin-top: 4rem;

    padding:
        1.2rem 1rem;

    text-align: center;

    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;

    color: var(--overlay-black-70);

    border-top:
        1px solid var(--overlay-black-08);
}

/* RESPONSIVO */
@media (max-width: 992px) {

    .footer-main {
        padding-top: 60px;
    }

    .footer-deer {
        display: none;
    }

} 

@media (max-width: 767px) {

    .footer-logo,
    .footer-unit-image,
    .footer-deer {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-social {
        justify-content: center;
    }

}

/*************/
/** MOBILE **/
/************/

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

.menu-toggle {
    display: none;
}

@media (max-width: 992px) {

    /* =========================
       TOPO
    ========================= */

    .utility-bar .container {
        justify-content: center !important;
        gap: 2.6rem !important;
        padding:
            .5rem 1rem !important;
    }

    .utility-item {
        padding: 5px 0px !important;
        font-size: .82rem;
    }

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

    .header-band {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: 80px;;
    }

    .header-band .container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

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

    .logo-badge {
        position: relative !important;
        top: -15px !important;
        left: auto !important;
        z-index: 900;
        height: 130px;
        width: 230px;
    }

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

    .nav-shell {
        position: fixed;
        top: 0;
        right: -100%;
        width: 82%;
        max-width: 340px;
        height: 100vh;
        margin-left: 0 !important;
        background: var(--overlay-white-98);
        box-shadow:
            -18px 0 45px var(--overlay-black-12),
            -4px 0 12px var(--overlay-black-08);
        backdrop-filter: blur(12px);
        border-radius: 0;
        flex-direction: column;
        justify-content: flex-start;
        padding:
            120px 2rem 2rem !important;
        transition:
            right .45s cubic-bezier(.22, 1, .36, 1);
        z-index: 1001;
    }

    .nav-shell::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 100%;
        background:
            linear-gradient(
                to bottom,
                var(--color-transparent),
                var(--overlay-black-08),
                var(--color-transparent)
            );
    }

    /* menu aberto */
    .nav-shell.mobile-open {
        right: 0;
    }

    /* UL */
    .nav-shell .nav {
        width: 100%;

        flex-direction: column !important;

        gap: .3rem !important;
    }

    /* links */
    .nav-shell .nav-link {
        width: 100%;

        padding:
            1rem 0 !important;

        font-size: 1.15rem;

        border-bottom:
            1px solid var(--overlay-black-06);

        touch-action: manipulation;
    }

    /* botão */
    .reserve-top-btn {
        width: 100% !important;

        margin-top: 1.5rem;

        padding: .9rem 1rem !important;

        border-radius: 16px;
    }

    /* =========================
       HAMBURGUER
    ========================= */

    .menu-toggle {
        display: block;
        position: absolute;

        right: 16px;
        top: 18px;

        width: 46px;
        height: 46px;

        border: 0;
        background: var(--color-transparent);

        display: flex;
        flex-direction: column;
        justify-content: center;

        gap: 6px;

        z-index: 1003;
    }

    .menu-toggle span {
        width: 28px;
        height: 3px;

        border-radius: 999px;

        background: var(--color-black);

        transition: .35s ease;
    }

    /* animação X */
    body.menu-open .menu-toggle span:nth-child(1) {
        transform:
            rotate(45deg)
            translateY(13px);
    }

    body.menu-open .menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    body.menu-open .menu-toggle span:nth-child(3) {
        transform:
            rotate(-45deg)
            translateY(-13px);
    }

    /* =========================
       SUBMENU MOBILE
    ========================= */

    .submenu {
        margin-top: .5rem !important;

        padding-left: 1rem !important;
    }

    .submenu li a {
        padding:
            .7rem 0 !important;

        font-size: .95rem;
    }

}

/* =========================================================
   HERO MOBILE
========================================================= */

@media (max-width: 992px) {

    /* =========================
       HERO
    ========================= */

    .hero-section {
        min-height: auto !important;

        padding:
            3rem 0 4rem !important;

        background-position:
            center center !important;

        overflow: hidden;
    }

    /* overlay suave */
    .hero-section::before {
        content: '';

        position: absolute;
        inset: 0;

        background:
            linear-gradient(
                to bottom,
                var(--overlay-black-18),
                var(--overlay-black-45)
            );

        z-index: 0;
    }

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

    .hero-section .container {
        position: relative;
        z-index: 2;
    }

    /* =========================
       COPY
    ========================= */

    .hero-copy {
        padding-top: 1rem !important;

        text-align: center;
    }

    .hero-section .padding-title {
        padding-left: 0 !important;
    }

    .hero-cards-wrap {
        margin-top: 2rem;
    }
    .hero-copy h1.title-2 {
        max-width: auto;
    }

    /* =========================
       TITLES
    ========================= */

    .hero-copy h1.title-1 {
        font-size:
            clamp(2rem, 7vw, 3rem);

        margin-bottom: .3rem;
    }

    .hero-copy h1.title-2 {
        font-size:
            clamp(2.2rem, 8vw, 3.4rem);

        margin-bottom: 1.2rem;
    }

    /* =========================
       TEXT
    ========================= */

    .hero-copy p {
        max-width: 100%;

        margin:
            0 auto 1.5rem !important;

        padding:
            0 1rem;

        font-size:
            1rem;

        line-height: 1.45;
    }

    /* =========================
       SUBTITLE
    ========================= */

    .hero-copy h2 {
        font-size:
            clamp(1.2rem, 5vw, 1.7rem);

        margin-bottom: 1.2rem !important;
    }

    /* =========================
       BUTTON
    ========================= */

    .reserve-main-btn {
        width: 100%;

        max-width: 320px;

        min-height: 58px;

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

        gap: .7rem;

        font-size: 1.05rem !important;

        border-radius: 18px;

        padding:
            1rem 1.4rem !important;
    }

    /* =========================
       CERVO MOBILE
    ========================= */

    .hero-section::after {
        content: '';

        position: absolute;

        right: -40px;
        bottom: -20px;

        width: 220px;
        height: 220px;

        background:
            url('../assets/home/hero-deer.png')
            center center / contain no-repeat;

        opacity: .12;

        pointer-events: none;

        animation:
            deerSoftFloat 6s ease-in-out infinite;
    }

    /* =========================
       HERO CARDS
    ========================= */

    .hero-cards-wrap .row {
        justify-content: center !important;
    }

    .hero-cards-wrap .col-7 {
        width: 100% !important;

        justify-content: center;
    }

    .hero-card {
        margin-bottom: 1rem;

        border-radius: 22px;
    }

    /* =========================
       EXPERIENCE
    ========================= */
    
    .experiences-section {
        max-height: none;
        height: auto;
        display: block;
        margin: 80px 0;
    }

    .experiences-section .row {
        justify-content: center;
    }

    .section-title .title-icon {
        max-width: 120px;
    }

    /* =========================
       UNITS
    ========================= */

    .units-section {
        max-height: none;
        height: auto;
        display: block;
    }

    .units-title {
        text-align: center;
    }

    .unit-about p { 
        text-align: left;
    }

    /* =========================
       SHOP
    ========================= */

    .shop-section {
        max-height: none;
        height: auto;
        display: block;
        padding: 80px 0 95px;
        margin-bottom: 70px;
    }

    /* =========================
       BENEFITS
    ========================= */

    .benefits-section {
        max-height: none;
        height: auto;
        display: block;
        padding: 80px 0 95px;
        margin-bottom: 70px;
    }

    /* =========================
       EXPERIÊNCIAS
    ========================= */

    .outras-experiencias-detail-section {
        max-height: none !important;
        height: auto !important;
        display: block !important;
        padding: 80px 0 95px;
        margin-bottom: 70px;
    }
}

@media (max-width: 768px) {
    .section-title .title-icon {
        max-width: 80px;
    }
}

@media (max-width: 576px) {
    .section-title .title-icon {
        max-width: 80px;
    }
}

@media (max-width: 520px) {
    .benefits-section .padding-title {
        padding-left: initial;
    }
    .benefits-section h1 {
        text-align: center;
    }
}

@media (max-width: 430px) {
    .section-title .title-icon {
        display: none;
    }

    .utility-item {
        font-size: 0.55rem;
    }

    .logo-badge {
        height: 115px;
        width: 200px;
    }

    .logo-mark {
        max-width: 120px;
        margin-top: -15px;
    }
    
}

/* =========================================================
   UNIDADE PAGE
========================================================= */

.unidade-hero-section {
    padding: 4.2rem 0 2.6rem;
}

.unidade-container-narrow {
    max-width: 980px;
    padding: 0;
}

.unidade-main-title {
    margin-bottom: .9rem;
}

.unidade-hero-section .section-title {
    margin-bottom: .6rem;
}

.unidade-address {
    font-size: clamp(1.3rem, 1.15rem + .6vw, 2.8rem);
    color: var(--color-text-medium);
    margin-bottom: .1rem;
    line-height: 1.2;
}

.unidade-map-link {
    color: var(--color-text-medium);
    text-decoration: none;
    font-size: clamp(1rem, .95rem + .3vw, 1.4rem);
}

.unidade-map-link:hover {
    color: var(--color-black);
    text-decoration: underline;
}

.unidade-whatsapp {
    margin-top: .5rem;
    margin-bottom: 1.9rem;
    color: var(--color-text-medium);
    font-size: clamp(1.2rem, 1.1rem + .35vw, 1.75rem);
    font-weight: 600;
}

.unidade-video-title {
    margin-bottom: .85rem;
    color: var(--color-border-medium);
    font-size: clamp(1.3rem, 1.2rem + .4vw, 2rem);
    font-weight: 800;
}

.unidade-video-wrap {
    max-width: 95%;
    margin: 0 auto;
}

.unidade-video-trigger {
    width: 100%;
}

.unidade-video-thumb {
    display: block;
    width: 100%;
}

.unidade-structure-section {
    padding: 3rem 0 2rem;
}

.unidade-section-title {
    margin-bottom: 1.8rem;
}

.unidade-structure-grid {
    --bs-gutter-x: 1rem;
}

.unidade-structure-item {
    text-align: center;
    max-width: 150px;
}

.unidade-structure-icon {
    width: 82px;
    height: 82px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.1rem;
    background: var(--color-mint);
    margin-bottom: .8rem;
}

.unidade-structure-icon i {
    font-size: 2.25rem;
    color: var(--color-black);
}

.unidade-structure-item h3 {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(0.82rem, 0.78rem + 0.15vw, 0.875rem);
    line-height: 1.18;
    color: var(--color-text-neutral);
}

.unidade-about-section {
    padding: 2.6rem 0 3.2rem;
}

.unidade-about-section p {
    /* margin: 0 auto 1.15rem; */
    max-width: 950px;
    font-size: clamp(1.05rem, 1rem + .25vw, 1.42rem);
    line-height: 1.22;
    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
    font-weight: 500;
}

.unidade-contact-section {
    background: var(--color-mint);
    padding: 3.5rem 0;
}

.unidade-contact-section h2 {
    margin: 0 0 .5rem;
    color: var(--color-black);
    font-size: clamp(2.3rem, 1.5rem + 2vw, 3.4375rem);
    font-weight: 800;
}

.unidade-contact-section p {
    margin: 0 0 1rem;
    color: var(--color-black);
    font-size: clamp(1.2rem, 1.1rem + .3vw, 1.8rem);
    font-weight: 500;
}

.unidade-whats-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--color-black);
    text-decoration: none;
    font-size: clamp(1.8rem, 1.6rem + .7vw, 3rem);
    font-weight: 500;
}

.unidade-whats-link:hover {
    color: var(--color-black);
    text-decoration: underline;
}

.unidade-reserve-section {
    padding: 5rem 0 2rem;
}

.unidade-reserve-btn {
    background: var(--color-mint);
    color: var(--color-brand-ink);
    border: 0;
    border-radius: .55rem;
    padding: .35rem 1.6rem;
    font-size: clamp(1.1rem, 1.05rem + .3vw, 1.55rem);
    font-weight: 500;
}

.unidade-reserve-btn:hover {
    background: var(--color-mint-dark);
    color: var(--color-brand-ink);
}

.unidade-benefits-section {
    padding-top: 2.4rem;
}

/* =========================
   UNIDADE ANIMATIONS
========================= */

.unidade-page .unidade-reveal {
    opacity: 0;
    transform: translateY(34px) scale(.98);
    filter: blur(8px);
}

.unidade-page .unidade-reveal.in-view {
    animation: unidadeFadeUp .9s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: var(--unidade-delay, 0ms);
}

.unidade-page .unidade-structure-item.unidade-reveal {
    transform: translateY(46px) scale(.86) rotate(-4deg);
}

.unidade-page .unidade-structure-item.unidade-reveal.in-view {
    animation: unidadeIconPop .9s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: var(--unidade-delay, 0ms);
}

.unidade-page .unidade-video-wrap.unidade-reveal {
    transform: translateY(36px) scale(.94);
}

@keyframes unidadeFadeUp {
    0% {
        opacity: 0;
        transform: translateY(34px) scale(.98);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes unidadeIconPop {
    0% {
        opacity: 0;
        transform: translateY(46px) scale(.86) rotate(-4deg);
        filter: blur(10px);
    }

    65% {
        opacity: 1;
        transform: translateY(-8px) scale(1.05) rotate(2deg);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0);
        filter: blur(0);
    }
}

@media (max-width: 992px) {
    .unidade-about-section,
    .unidade-hero-section {
        padding: 2.2rem;
    }

    .unidade-video-wrap {
        max-width: 100%;
    }

    .unidade-video-title {
        margin-bottom: 1.2rem;
    }

    .unidade-structure-item {
        max-width: none;
    }

    .unidade-contact-section {
        padding: 2.6rem 0;
    }

    .unidade-reserve-section {
        padding-top: 3rem;
    }
}

@media (max-width: 576px) {
    .unidade-structure-icon {
        width: 72px;
        height: 72px;
    }

    .unidade-structure-icon i {
        font-size: 2rem;
    }
}

/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-section {
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}

.contact-panel,
.contact-side {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

.contact-panel {
  padding: 2rem;
}

.contact-side {
  padding: 1.5rem;
  position: sticky;
  top: 110px;
}

.contact-form .form-label {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-text-strong);
}

.contact-form .form-control {
  border-radius: 12px;
  border: 1px solid var(--color-border-soft);
  padding: 0.8rem 0.95rem;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.contact-form .form-control:focus {
  border-color: var(--color-mint-dark);
  box-shadow: 0 0 0 3px var(--overlay-mint-25);
}

.contact-whats-highlight {
  font-weight: 700;
}

.contact-social-text {
  font-size: 0.92rem;
  margin-bottom: 1rem;
}

.contact-social-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.contact-social-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--color-text-strong);
  font-weight: 600;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  padding: 0.65rem 0.8rem;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.contact-social-item:hover,
.contact-social-item:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px var(--overlay-black-10);
  background: var(--color-white);
}

.contact-social-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-mint);
  color: var(--color-text-charcoal-soft);
  font-size: 1.1rem;
}

.contact-form {
    opacity: 0;
    transition: opacity 1.5s ease;
}

.contact-form.loaded {
    opacity: 1;
}

@keyframes contactIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 991px) {
  .contact-side {
    position: static;
  }

  .contact-panel {
    padding: 1.4rem;
  }
}

/* =========================================================
   MONTE SEU KIT
========================================================= */

.kit-section {
  background: var(--color-white);
  padding: 3.5rem 0 4.5rem;
  min-height: 700px;
  position: relative;
  overflow: hidden;
}

.kit-container {
  max-width: 980px;
  position: relative;
  z-index: 2;
}

.kit-deer-wrap {
  position: absolute;
  left: 6%;
  bottom: 2%;
  width: min(380px, 22vw);
  min-height: 520px;

  background:
    url('../assets/home/benefit-deer.png')
    center bottom / contain no-repeat;

  opacity: 0;

  transform:
    translateY(50px)
    scale(.95);

  filter:
    blur(10px);

  transition:
    opacity 1.2s ease,
    transform 1.2s cubic-bezier(.22, 1, .36, 1),
    filter 1.2s ease;
}

.kit-deer-wrap.is-visible,
.kit-deer-wrap.in-view {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);

  filter:
    blur(0);

  animation:
    deerSoftFloat 6s ease-in-out infinite;
}

.kit-hero {
  text-align: center;
  margin-bottom: 1.5rem;
}

.kit-hero h1 {
  color: var(--color-mint-dark);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin-bottom: .35rem;
}

.kit-hero p {
  font-size: clamp(1.2rem, 2.1vw, 2rem);
  margin: 0;
}

.kit-model-box {
  text-align: center;
  margin-bottom: 2rem;
}

.kit-model-box h3,
.kit-choice-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  margin-bottom: 1rem;
}

.kit-card {
  max-width: 310px;
  margin: 0 auto;
  border-radius: 22px;
  background: var(--color-surface-gray);
  padding: 1.5rem 1rem 1rem;
}

.kit-card img {
  width: 100%;
  max-width: 200px;
  display: block;
  margin: 0 auto 0.75rem;
}

.kit-card h4 {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

.kit-card p {
  margin: .2rem 0;
}

.kit-card strong {
  font-size: 1.4rem;
}

.kit-form {
  text-align: center;
}

.kit-options {
  display: grid;
  grid-template-columns: repeat(6, minmax(92px, 1fr));
  gap: 1rem;
  margin: 4.5rem 0 2rem;
}

.kit-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.kit-option-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 110px;
  background: var(--color-mint);
  border-radius: 22px;
  border: 3px solid var(--color-transparent);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.kit-option-card img {
  width: 95px;
  height: 95px;
  object-fit: contain;
}

.kit-option-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.kit-option input:checked + .kit-option-card {
  border-color: var(--color-text-strong);
  box-shadow: 0 0 0 4px var(--overlay-mint-35);
  transform: translateY(-4px);
}

.kit-includes {
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  margin-bottom: 1.2rem;
}

.kit-pay-btn {
  margin: 2.2rem auto 2.2rem;
  max-width: 560px;
  background: var(--color-mint);
  color: var(--color-text-deep);
  border-radius: 28px;
  padding: 0.95rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: clamp(1.05rem, 2vw, 1.8rem);
  font-weight: 700;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.kit-pay-btn:hover, .kit-pay-btn:focus {
    background: var(--color-mint-dark);
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft);
}

.kit-pay-badge img{
    width: 75px;
}

.kit-help {
  text-align: center;
  max-width: 345px;
  margin: 3.4rem auto;
}

.kit-help h2 {
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.2;
  margin-bottom: .5rem;
}

.kit-help p {
  font-size: 1.2rem;
  margin-bottom: 1.85rem;
}

.kit-help a {
  font-size: clamp(1.6rem, 3.3vw, 2.4rem);
  color: var(--color-text-deep);
  text-decoration: none;
}

.kit-help a i {
  margin-right: .35rem;
}

.kit-animate {
  opacity: 0;
  transform: translateY(16px);
}

.kit-animate.is-visible {
  animation: kitFade .65s cubic-bezier(.22, 1, .36, 1) var(--delay, 0s) forwards;
}

@keyframes kitFade {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 991px) {
  .kit-deer-wrap {
    left: -40px;
    width: 260px;
    min-height: 320px;
    opacity: .25;
    filter: blur(0);
  }

  .kit-options {
    grid-template-columns: repeat(3, minmax(92px, 1fr));
  }
}

@media (max-width: 670px) {
  .kit-deer-wrap {
    width: 0;
  }
}

@media (max-width: 575px) {
  .kit-options {
    grid-template-columns: repeat(2, minmax(92px, 1fr));
  }
}

/* =========================================================
   EXPERIENCIAS DETAILS
========================================================= */

.experiencia-detail-section {
    margin: 5rem 0;
}

.outras-experiencias-detail-section {
    background-color: var(--color-paper);
    height: 100dvh;
    max-height: 1100px;
    display: flex;
    align-items: center;
    position: relative;
}

.experiencia-detail-section .container {
    position: relative;
}

.experiencia-detail-section .container > * {
    position: relative;
    z-index: 2;
}

.experiencia-detail-section.bg-visible .container::before {
    animation:
        experienciaBgReveal 1s cubic-bezier(.22, 1, .36, 1) forwards,
        experienciaBgFloat 6s ease-in-out infinite 1s;
}

@keyframes experienciaBgReveal {

    0% {
        opacity: 0;

        transform:
            scale(.3)
            rotate(-15deg);

        filter:
            blur(10px);
    }

    60% {
        opacity: 1;

        transform:
            scale(1.15)
            rotate(6deg);

        filter:
            blur(0);
    }

    100% {
        opacity: 1;

        transform:
            scale(1)
            rotate(0);

        filter:
            blur(0);
    }
}

@keyframes experienciaBgFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

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

.experiencia-detail-section .experiencia-row-2 .img {
    position: relative;
}

.experiencia-detail-section.bg-visible-2 .experiencia-row-2 .img::before {
    animation:
        experienciaBgReveal 1s cubic-bezier(.22, 1, .36, 1) forwards,
        experienciaBgFloat 6s ease-in-out infinite 1s;
}

.experiencia-detail-section .section-title {
    font-size: clamp(2rem, 1rem + 2.5vw, 3.125rem);
}

.experiencia-detail-section p {
    font-weight: 500;
}

.experiencia-detail-section .experiencia-row-2 {
    padding-top: 5rem
}

/* =========================================================
   EXPERIÊNCIA CONTENT ANIMATION
========================================================= */

.experiencia-detail-section p,
.experiencia-detail-section .video-thumb-wrap,
.experiencia-detail-section .experiencia-row-2 .img {
    opacity: 0;
}

.experiencia-detail-section p {
    transform:
        translateX(-60px);

    filter:
        blur(6px);
}

.experiencia-detail-section .video-thumb-wrap,
.experiencia-detail-section .experiencia-row-2 .img {
    transform:
        scale(.92)
        translateY(20px);

    filter:
        blur(10px);
}

.experiencia-detail-section .experiencia-animate.in-view {
    animation:
        experienciaTextReveal .9s cubic-bezier(.22, 1, .36, 1) forwards;
}

.experiencia-detail-section .experiencia-media.in-view {
    animation:
        experienciaMediaReveal 1s cubic-bezier(.22, 1, .36, 1) forwards;
}

/* primeira coluna */
.experiencia-detail-section .row:first-child p:nth-child(1) {
    animation-delay: .2s;
}

.experiencia-detail-section .row:first-child p:nth-child(2) {
    animation-delay: .5s;
}

.experiencia-detail-section .row:first-child p:nth-child(3) {
    animation-delay: .8s;
}

/* segunda row */
.experiencia-row-2 p:nth-child(1) {
    animation-delay: .2s;
}

.experiencia-row-2 p:nth-child(2) {
    animation-delay: .5s;
}

.experiencia-detail-section .video-thumb-wrap.in-view {
    animation-delay: 1s;
}

.experiencia-detail-section .experiencia-row-2 .img.in-view {
    animation-delay: 1.2s;
}

@keyframes experienciaTextReveal {

    from {
        opacity: 0;

        transform:
            translateX(-60px);

        filter:
            blur(6px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);

        filter:
            blur(0);
    }
}

@keyframes experienciaMediaReveal {

    from {
        opacity: 0;

        transform:
            scale(.92)
            translateY(20px);

        filter:
            blur(10px);
    }

    to {
        opacity: 1;

        transform:
            scale(1)
            translateY(0);

        filter:
            blur(0);
    }
}

.payment-return-section {
    padding: 80px;
}

.event-date-highlight {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--color-mint);
    color: var(--color-brand-ink);
    font-weight: 800;
    box-shadow: var(--shadow-soft);
}

.event-date-highlight i {
    font-size: 1.25rem;
}

/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.floating-whatsapp {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9998;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 58px;
    height: 58px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--color-whatsapp);
    color: var(--color-white);
    font-weight: 800;
    text-decoration: none;
    box-shadow:
        0 12px 28px var(--overlay-black-18),
        0 0 0 0 var(--overlay-mint-55);
    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
    animation: floatingWhatsappPulse 2.4s ease-in-out infinite;
}

.floating-whatsapp i {
    font-size: 1.55rem;
    line-height: 1;
}

.floating-whatsapp:hover,
.floating-whatsapp:focus {
    color: var(--color-white);
    background: var(--color-whatsapp-dark);
    transform: translateY(-3px) scale(1.03);
    box-shadow:
        0 16px 34px var(--overlay-black-22),
        0 0 0 8px var(--overlay-mint-25);
}

@keyframes floatingWhatsappPulse {
    0%,
    100% {
        box-shadow:
            0 12px 28px var(--overlay-black-18),
            0 0 0 0 var(--overlay-mint-0);
    }

    50% {
        box-shadow:
            0 12px 28px var(--overlay-black-18),
            0 0 0 10px var(--overlay-mint-25);
    }
}

@media (max-width: 576px) {
    .floating-whatsapp {
        right: 14px;
        bottom: 14px;
        width: 56px;
        min-width: 56px;
        height: 56px;
        padding: 0;
    }

    .floating-whatsapp span {
        display: none;
    }
}

/* =========================================================
   404 PAGE
========================================================= */

.site-404-section {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 6rem 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, var(--overlay-mint-35), var(--color-transparent) 28%),
        linear-gradient(135deg, var(--color-white), var(--color-mint-glow-light));
}

.site-404-section::before,
.site-404-section::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.site-404-section::before {
    width: 18rem;
    height: 18rem;
    right: -5rem;
    top: 4rem;
    background: var(--overlay-mint-25);
    filter: blur(2px);
}

.site-404-section::after {
    width: 12rem;
    height: 12rem;
    left: 6vw;
    bottom: -4rem;
    border: 1.5rem solid var(--color-mint-glow-medium);
    opacity: .75;
}

.site-404-card {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4rem);
    text-align: center;
    border-radius: 2rem;
    background: var(--overlay-white-92);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.site-404-card::before {
    content: "404";
    position: absolute;
    inset: auto -1rem -3.2rem auto;
    font-family: 'Playfair Display', serif;
    font-size: clamp(7rem, 18vw, 15rem);
    font-weight: 800;
    line-height: .8;
    color: var(--color-mint-glow-medium);
    opacity: .35;
    z-index: -1;
}

.site-404-mark {
    width: 92px;
    height: 92px;
    margin: 0 auto 1.2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
    animation: experienciaBgFloat 5s ease-in-out infinite;
}

.site-404-mark img {
    max-width: 62px;
}

.site-404-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .8rem;
    padding: .35rem .9rem;
    border-radius: 999px;
    background: var(--color-mint-glow);
    color: var(--color-brand-ink);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .82rem;
}

.site-404-title {
    margin-bottom: 1.2rem;
}

.site-404-card p {
    max-width: 640px;
    margin: 0 auto 2rem;
    color: var(--color-text-neutral);
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 500;
    line-height: 1.7;
}

.site-404-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.site-404-link-btn {
    border: 2px solid var(--color-mint);
    border-radius: 14px;
    color: var(--color-brand-ink);
    font-weight: 800;
    padding: .8rem 1.35rem;
    background: var(--color-white);
    transition: var(--transition-default);
}

.site-404-link-btn:hover,
.site-404-link-btn:focus {
    background: var(--color-mint-glow);
    border-color: var(--color-mint-dark);
    color: var(--color-brand-ink);
    transform: translateY(-2px);
}

@media (max-width: 575.98px) {
    .site-404-section {
        padding: 4rem 0;
    }

    .site-404-card {
        border-radius: 1.4rem;
    }

    .site-404-actions .btn {
        width: 100%;
    }
}

/* =========================================================
   EXPERIENCE EVENT LINK
========================================================= */

.experience-event-link-wrap {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

.experience-event-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    max-width: 100%;
    padding: .95rem 1.6rem;
    border-radius: 999px;
    border: 2px solid var(--color-mint-dark);
    background:
        linear-gradient(135deg, var(--color-mint), var(--color-mint-glow-strong));
    color: var(--color-brand-ink);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 900;
    text-align: center;
    box-shadow: 0 16px 32px var(--overlay-black-12);
    transition: var(--transition-default);
}

.experience-event-link:hover,
.experience-event-link:focus {
    color: var(--color-brand-ink);
    background:
        linear-gradient(135deg, var(--color-mint-dark), var(--color-mint));
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 38px var(--overlay-black-18);
}

.experience-event-link .bi {
    font-size: 1.2em;
}

@media (max-width: 575.98px) {
    .experience-event-link {
        width: 100%;
        border-radius: 1rem;
    }
}
