/* Sessão Clima de Festa */
.sessao-summer-night-vip {
    padding: 60px 0;
}

.sessao-summer-night-vip .column-left .box-image .off {
    border-radius: 44px;
    max-width: 320px;
    margin: 0 auto -60px auto;
    position: relative;
    z-index: 1;
}

.sessao-summer-night-vip .column-left .box-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sessao-summer-night-vip .column-left .box-text span {
    color: #797979;
    display: block;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
    line-height: 23px;
    letter-spacing: 3.8px;
    margin: 20px 0;
    max-width: 450px;
}

.sessao-summer-night-vip .column-left .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 15px;
}

.sessao-summer-night-vip .column-left .list img {
    width: 50%;
    max-width: 190px;
}

.sessao-summer-night-vip .column-left small {
    color: #717171;
    display: block;
    font-size: 12px;
    font-weight: 400;
    margin: 5px 0 0 0;
    text-align: center;
}

.sessao-summer-night-vip .form {
    gap: 70px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.sessao-summer-night-vip .column-right {
    border: 1px solid #8D00FF;
    border-radius: 70px;
    padding: 50px;
    min-height: 410px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sessao-summer-night-vip .form .column {
    width: 50%;
}

.sessao-summer-night-vip .form .column form {
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sessao-summer-night-vip .form .column form .save-the-date {
    color: #8F8F8F;
    font-size: 18px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 5.8px;
    text-align: center;
}

.sessao-summer-night-vip .form .column form .button {
    border-radius: 10px;
    background-color: #8D00FF;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 20px;
    margin: 10px 0;
}

.sessao-summer-night-vip .form .column form .title {
    color: #FFFFFF;
    font-weight: 600;
    line-height: 1em;
    text-align: center;
    margin: 0 0 20px 0;
}

.sessao-summer-night-vip .form .column form .title b {
    font-weight: 600;
}

.sessao-summer-night-vip .form .column form label {
    color: #7A7A7A;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 30px;
    letter-spacing: 2.5px;
    width: 100%;
}

.sessao-summer-night-vip .form .column form .checkbox {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
}

.sessao-summer-night-vip .form .column form .checkbox input {
    width: auto;
}

.sessao-summer-night-vip .form .column form .checkbox span {
    color: #7A7A7A;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.9px;
    line-height: 1.2em;
}

.sessao-summer-night-vip .form .column form input:not([type="submit"]):not([type="checkbox"]) {
    background-color: #3D3D3D;
    border: 1px solid #69727d;
    color: #7A7A7A;
    border-radius: 48px;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 15px;
    padding: 12px 16px;
}

@keyframes submitBtnShine {
    0% {
        left: -75%;
    }

    100% {
        left: 125%;
    }
}

@keyframes submitBtnPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0px rgba(238, 169, 7, 0.6), 0 6px 24px rgba(99, 4, 164, 0.4);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(238, 169, 7, 0), 0 6px 24px rgba(99, 4, 164, 0.4);
    }
}

.sessao-summer-night-vip .form .column form button[type="submit"] {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    border-radius: 60px;
    border: 2px solid #42EDA6;
    background-color: #42EDA6;
    font-family: 'Outfit', sans-serif;
    font-size: 21px;
    font-weight: 500;
    color: #000000;
    letter-spacing: 0.3px;
    cursor: pointer;
    /* animation: submitBtnPulse 2.4s ease-in-out infinite; */
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.25s ease;
}

/* Brilho deslizante */
.sessao-summer-night-vip .form .column form button[type="submit"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.22) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    animation: submitBtnShine 3s ease-in-out infinite;
    pointer-events: none;
}

.sessao-summer-night-vip .form .column form button[type="submit"]:hover {
    background-color: #8D00FF;
    border-color: #8D00FF;
    color: #fff;
    transform: translateY(-2px) scale(1.02);
}

.sessao-summer-night-vip .form .column form button[type="submit"]:hover::after {
    transform: translateY(-50%) scale(1) rotate(0deg);
}

@media (max-width: 1200px) {
    .sessao-summer-night-vip .form {
        gap: 40px;
    }

    .sessao-summer-night-vip .column-left .list img {
        max-width: 180px
    }

    .sessao-summer-night-vip .column-right {
        padding: 30px;
    }

    .sessao-summer-night-vip .form .column form .title {
        font-size: 24px;
    }

    .sessao-summer-night-vip .form .column form .checkbox span {
        font-size: 10px;
    }

    .sessao-summer-night-vip .form .column form .button {
        font-size: 16px;
    }
}

@media (max-width: 991px) {
    .sessao-summer-night-vip .column-left .box-image .off {
        border-radius: 35px;
        max-width: 260px;
        margin: 0 auto -40px auto;
    }
}

@media (max-width: 600px) {

    .sessao-summer-night-vip .column-left .box-text span {
        font-size: 14px;
        letter-spacing: 0.5px;
    }

    .sessao-summer-night-vip .column-left .list img {
        max-width: 250px;
        width: 100%;
    }

    .sessao-summer-night-vip .form .column form .button {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .sessao-summer-night-vip .column-left .box-image .off {
        border-radius: 30px;
        max-width: 220px;
    }
}

/* Sessão Benefícios */
.sessao-beneficios {
    padding: 80px 0;
}

/* Linha: imagem + texto (desktop: side by side) */
.benefit-row {
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 80px 0;
}

.benefit-row:first-child {
    padding-top: 0;
}

.benefit-row:last-child {
    padding-bottom: 0;
}

/* --- Lado da imagem --- */
.benefit-media {
    flex: 0 0 49%;
    max-width: 49%;
}

.benefit-media .image {
    position: relative;
}

.benefit-media .image img {
    transition: transform 300ms ease;
}

.benefit-media .image:hover img {
    transform: scale(1.04);
}

/* --- Lado do texto --- */
.benefit-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Linha de acento cyan */
.benefit-accent {
    border-radius: 100px;
    background-color: transparent;
    background-image: linear-gradient(180deg, #02F8AE 0%, #B229F2 100%);
    display: block;
    width: 60px;
    height: 9px;
}

.txt-cyan {
    color: #42eda6;
}

.benefit-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 60px;
    line-height: 1;
    color: #ffffff;
    margin: 0;
}

.benefit-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #C8C8C8;
    margin: 0;
    line-height: 1.6;
}

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

    /* Benefícios */
    .benefit-row {
        padding: 60px 0;
    }

    .benefit-title {
        font-size: 42px;
    }
}

@media (max-width: 992px) {

    /* Benefícios */
    .benefit-title {
        font-size: 32px;
    }

    .benefit-desc {
        font-size: 16px;
    }
}

@media (max-width: 768px) {

    /* Formulário */
    .sessao-summer-night-vip {
        padding: 40px 0 30px;
    }

    .sessao-summer-night-vip .title {
        margin-bottom: 30px;
    }

    .sessao-summer-night-vip .form {
        flex-direction: column;
        gap: 30px;
    }

    .sessao-summer-night-vip .form .column {
        width: 100%;
    }

    .sessao-summer-night-vip .column-right {
        padding: 30px 20px;
        border-radius: 24px;
        min-height: unset;
        width: 100%;
    }

    /* Benefícios */
    .sessao-beneficios {
        padding: 40px 0;
    }

    .benefit-row {
        flex-direction: column;
        gap: 32px;
        padding: 50px 0;
        text-align: center;
    }

    .benefit-media {
        flex: unset;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }

    .benefit-content {
        align-items: center;
        order: 2;
    }
}

@media (max-width: 480px) {

    /* Formulário */
    .sessao-summer-night-vip .form .column form button[type="submit"] {
        font-size: 14px;
    }

    .benefit-row {
        padding: 30px 0;
    }

    .benefit-title {
        font-size: 28px;
    }

    .benefit-desc {
        font-size: 14px;
    }
}

/* FAQ Section - Simplified Structure */
.section-faq {
    padding: 100px 0;
    color: #fff;
}

.section-faq .container {
    display: flex;
    gap: 80px;
    align-items: center;
}

.section-faq .left-content {
    flex: 1;
}

.section-faq .right-content {
    flex: 1.6;
}

.faq-badge {
    display: block;
    color: #00fbfa;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 4px;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.faq-title {
    font-size: 60px;
    /* font-family: 'Montserrat', sans-serif; */
    font-weight: 600;
    line-height: 1em;
    margin: 0 0 32px;
    color: #FFFFFF;
}

.faq-description {
    font-size: 18px;
    color: #C8C8C8;
    line-height: 1.3em;
    /* max-width: 360px; */
}

.accordion {
    background-color: #14131b;
    padding: 40px;
    border-radius: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.accordion .item {
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.05); */
    padding: 10px 0;
    margin-bottom: 24px;
}

.accordion .item:last-child {
    /* border-bottom: none; */
    padding-bottom: 0;
    margin-bottom: 0;
}

.accordion .item:first-child {
    padding-top: 0;
}

.question {
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.question h3 {
    font-size: 22px;
    /* font-family: 'Montserrat', sans-serif; */
    font-weight: 700;
    color: #9C9C9C;
    transition: color 0.3s ease;
    flex: 1;
    margin: 0;
}

.icon {
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.icon::before,
.icon::after {
    content: '';
    position: absolute;
    background-color: #9C9C9C;
    transition: all 0.3s ease;
    border-radius: 1px;
}

.icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    transform: translateY(-50%);
}

.icon::after {
    top: 0;
    left: 50%;
    width: 3px;
    height: 100%;
    transform: translateX(-50%);
}

.answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding-left: 40px;
    padding-bottom: 0;
}

.answer p {
    font-size: 18px;
    color: #949494;
    line-height: 1.6;
    padding-top: 15px;
    margin: 0;
}

/* Hover & Active States */
.question:hover h3 {
    color: #ffffff;
}

.question:hover .icon::before,
.question:hover .icon::after {
    background-color: #ffffff;
}

.item.active .question h3 {
    color: #B500FF;
}

.item.active .icon::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}

.item.active .icon::before,
.item.active .icon::after {
    background-color: #B500FF;
}

.item.active .answer {
    max-height: 200px;
    /* padding-bottom: 20px; */
}

@media (max-width: 1200px) {
    .section-faq .left-content {
        text-align: center;
    }

    .section-faq {
        margin-bottom: 16px;
    }
}

@media (max-width: 992px) {
    .section-faq {
        padding: 60px 0;
    }


    .section-faq .container {
        flex-direction: column;
        gap: 24px;
    }

    .faq-title {
        font-size: 42px;
    }

    .accordion {
        padding: 30px;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .section-faq {
        padding: 60px 0;
    }

    .faq-title {
        font-size: 32px;
    }

    .accordion .item {
        margin-bottom: 8px;
    }

    .question h3,
    .answer p {
        font-size: 16px;
    }
}

/* =============================================
       Animations — SummerVille Birthday Theme 🎉
    ============================================= */

/* Float up with a gentle landing bounce — sem scale() para evitar CLS */
@keyframes celebrationRise {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    60% {
        opacity: 1;
        transform: translateY(-8px);
    }

    80% {
        transform: translateY(3px);
    }

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

/* Slide from left with micro tilt — like a gift sliding in */
@keyframes celebrationLeft {
    0% {
        opacity: 0;
        transform: translateX(-60px) rotate(-3deg);
    }

    60% {
        opacity: 1;
        transform: translateX(8px) rotate(1deg);
    }

    80% {
        transform: translateX(-3px) rotate(0deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
}

/* Slide from right — mirror of left */
@keyframes celebrationRight {
    0% {
        opacity: 0;
        transform: translateX(60px) rotate(3deg);
    }

    60% {
        opacity: 1;
        transform: translateX(-8px) rotate(-1deg);
    }

    80% {
        transform: translateX(3px) rotate(0deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
}

/* Scale pop — like a balloon being inflated */
@keyframes celebrationPop {
    0% {
        opacity: 0;
        transform: scale(0.75);
    }

    55% {
        opacity: 1;
        transform: scale(1.06);
    }

    78% {
        transform: scale(0.97);
    }

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

/* Base states — composited layer para evitar CLS */
.fade-in,
.slide-in-left,
.slide-in-right,
.zoom-in {
    opacity: 0;
    will-change: opacity, transform;
}

/* Remove will-change após completar a animação (economiza memória GPU) */
.fade-in.visible,
.slide-in-left.visible,
.slide-in-right.visible,
.zoom-in.visible {
    will-change: auto;
}

/* Triggered states */
.fade-in.visible {
    animation: celebrationRise 0.85s cubic-bezier(0.33, 1, 0.68, 1) both;
}

.slide-in-left.visible {
    animation: celebrationLeft 0.85s cubic-bezier(0.33, 1, 0.68, 1) both;
}

.slide-in-right.visible {
    animation: celebrationRight 0.85s cubic-bezier(0.33, 1, 0.68, 1) both;
}

.zoom-in.visible {
    animation: celebrationPop 0.8s cubic-bezier(0.33, 1, 0.68, 1) both;
}

.delay-200 {
    animation-delay: 0.22s;
}