/* ==========================================================================
   VARIÁVEIS DE LUXO E RESETS
   ========================================================================== */
   :root {
    --color-bg: #030812;          /* Fundo principal se não houver imagem */
    --color-dark: #060e1a;        /* Azul marinho profundo */
    --color-darker: #02050a;      /* Quase preto */
    --color-gold: #DDA950;        /* Dourado elegante (Títulos) */
    --color-gold-btn: #E0AE55;    /* Dourado dos botões */
    --color-gold-btn-hover: #F2C168;
    --color-text: #B4C0D0;        /* Texto de leitura clara (Cinza azulado) */
    --color-white: #FFFFFF;
    --color-card-blue: #1C3352;   /* Azul dos cards da dobra 2 */
    --color-card-blue-hover: #24426b;
    --color-red: #590B0B;         /* Vermelho para os cards de Não É pra Você */
    
    --font-heading: 'Cinzel', serif;      /* Títulos majestosos */
    --font-body: 'Montserrat', sans-serif;/* Corpo de texto moderno */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    text-wrap: balance;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
}

/* ==========================================================================
   TIPOGRAFIA & UTILITÁRIOS GLOBAIS
   ========================================================================== */
.title-serif {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    font-size: 2.2rem;
}
.main-title {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    font-size: 3rem;
}

.text-gold { color: var(--color-gold); }
.text-white { color: var(--color-white); }
.text-red { color: #FF4A4A; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-small { font-size: 0.85rem; }

.subtitle {
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text);
    font-weight: 500;
}

.description {
    font-size: 1.2rem;
    color: var(--color-white);
    font-weight: 300;
}

.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-6 { margin-top: 2.5rem; }
.mt-8 { margin-top: 4rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-6 { margin-bottom: 2.5rem; }
.pt-8 { padding-top: 4rem; }
.pb-8 { padding-bottom: 4rem; }
.w-100 { width: 100%; }

.bg-dark { background-color: var(--color-dark); }
.bg-darker { background-color: var(--color-darker); }

/* Espaço vazio garantido no HTML onde a Logo Voadora irá "pousar" em cada seção */

.logo-marker {
    /* Elemento invisível usado pelo GSAP para saber onde a logo deve ir */
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* ==========================================================================
   BOTÕES (CTA)
   ========================================================================== */
.btn-gold {
    display: inline-block;
    background: linear-gradient(to right, #DDA950, #EAC37D, #DDA950);
    background-size: 200% auto;
    color: #000000;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1px;
    padding: 1.2rem 3rem;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 10px 20px rgba(221, 169, 80, 0.2);
    cursor: pointer;
    transition: all 0.4s ease;
}
.btn-gold:hover {
    background-position: right center;
    box-shadow: 0 15px 30px rgba(221, 169, 80, 0.4);
    transform: translateY(-2px);
}

/* ==========================================================================
   LAYOUT GERAL DAS SEÇÕES
   ========================================================================== */
.section-full {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 4rem 1rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    z-index: 1; /* O container da logo voadora terá z-index maior */
}
.flex-center {
    align-items: center;
    justify-content: center;
}
.flex-column {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.container {
    width: 100%;
    max-width: 1100px;
    position: relative;
    z-index: 2;
}

.grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    width: 100%;
}
.align-center {
    align-items: center;
}

/* ==========================================================================
   A LOGO VOADORA
   ========================================================================== */
#flying-logo-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none; /* Para não bloquear cliques */
    z-index: 9999; 
    overflow: hidden;
}

.flying-logo {
    position: absolute;
    /* Valores iniciais (Dobra 1) - O GSAP assumirá o controle */
    top: 25vh;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.flying-logo .center-piece {
    width: 140px;
    position: relative;
    z-index: 2;
}
.flying-logo .wing-anim {
    width: 90px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}
.left-wing { left: 0; transform-origin: right center; }
.right-wing { right: 0; transform-origin: left center; }


/* ==========================================================================
   COMPONENTES ESPECÍFICOS (TIMELINES E CARDS)
   ========================================================================== */

/* Timeline (Dobras 2 e 7) */
.timeline-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    height: 40px;
}
.timeline-line {
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--color-white);
    transform: translateY(-50%);
    z-index: 1;
}
/* Linha dividida para a Dobra 7 (Branca e Vermelha) */
.line-split {
    background: linear-gradient(to right, var(--color-white) 65%, #FF4A4A 65%);
}

.timeline-nodes {
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    z-index: 2;
}
.node {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-gold);
}
.node-gold { background: var(--color-gold); }
.node-red { background: #FF4A4A; }


/* Cards Padrão (Dobras 2, 4, 7) */
.card {
    padding: 2rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, background 0.3s ease;
}
.card:hover {
    transform: translateY(-5px);
}
.card p {
    font-size: 0.95rem;
    color: var(--color-white);
    line-height: 1.5;
}

.card-blue {
    background: linear-gradient(145deg, rgba(26, 49, 90, 0.4), rgba(10, 20, 40, 0.8));
    border: 1px solid rgba(212, 175, 55, 0.15);
    box-shadow: inset 0 0 20px rgba(212, 175, 55, 0.05), 0 15px 35px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
}
.card-blue:hover { 
    background: linear-gradient(145deg, rgba(26, 49, 90, 0.6), rgba(10, 20, 40, 0.9)); 
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: inset 0 0 30px rgba(212, 175, 55, 0.1), 0 20px 40px rgba(0,0,0,0.6);
}

.card-red {
    background: linear-gradient(145deg, rgba(60, 20, 20, 0.4), rgba(15, 10, 15, 0.8));
    border: 1px solid rgba(255, 74, 74, 0.15);
    box-shadow: inset 0 0 20px rgba(255, 74, 74, 0.05), 0 15px 35px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
}
.card-red:hover {
    background: linear-gradient(145deg, rgba(60, 20, 20, 0.6), rgba(15, 10, 15, 0.9));
    border-color: rgba(255, 74, 74, 0.4);
    box-shadow: inset 0 0 30px rgba(255, 74, 74, 0.1), 0 20px 40px rgba(0,0,0,0.6);
}

.card-check h4, .card-cross h4 {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

/* Grid de Cards (Dobra 2 e 7) */
.grid-cards-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    width: 100%;
}

/* Pirâmide de Cards (Dobra 4) */
.pyramid-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.pyramid-row {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
}
.row-4 .card { width: 23%; }
.row-3 .card { width: 23%; }


/* Cards Empilhados (Dobra 3) */
.stacked-cards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.stacked-cards .card {
    padding: 1.5rem;
}
.stacked-cards h4 {
    color: var(--color-gold);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Imagens de Perfil (Dobras 5 e 6) */
.profile-card {
    width: 100%;
    max-width: 400px;
    height: 500px;
    margin: 0 auto;
    border-radius: 20px;
    background-color: transparent; /* No mock eles parecem estar no próprio BG, mas se precisarmos por foto é só trocar aqui */
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    background-size: cover;
    background-position: center;
}
/* Se as fotos já estiverem no background global da Dobra, deixamos o .profile-card invisível ou removemos no HTML */
.profile-eduardo { display: none; } /* Pelo print 5, a foto do Eduardo parece embutida no background */
.profile-andre { display: none; }   /* Mesma coisa */


/* Textos de Corpo (Body Text) nas Dobras Laterais */
.body-text p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: var(--color-text);
}
.body-text strong {
    color: var(--color-white);
    font-weight: 600;
}


/* ==========================================================================
   FORMULÁRIO E FAQ (Dobras Finais)
   ========================================================================== */
.event-details {
    list-style: none;
    font-size: 1.1rem;
}
.event-details li {
    margin-bottom: 0.8rem;
    color: var(--color-white);
}
.event-details strong {
    color: var(--color-gold);
}

.form-container {
    padding: 3rem;
}
.custom-form input, .custom-form select {
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 1rem;
}
.custom-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.custom-form input:focus, .custom-form select:focus {
    outline: none;
    border-color: var(--color-gold);
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-radius: 8px;
}
.faq-item h4 {
    color: var(--color-white);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}
.faq-item p {
    font-size: 0.95rem;
}


/* ==========================================================================
   RESPONSIVIDADE (MOBILE)
   ========================================================================== */
@media (max-width: 992px) {
    .main-title { font-size: 2.2rem; }
    .title-serif { font-size: 1.8rem; }
    
    .grid-2-col {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .reverse-mobile {
        display: flex;
        flex-direction: column-reverse;
    }
    
    /* Grid de Cards vira 2 colunas ou 1 coluna */
    .grid-cards-6 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pyramid-row {
        flex-wrap: wrap;
    }
    .row-4 .card, .row-3 .card {
        width: 45%;
    }
    
    .timeline-container { display: none; } /* Timeline horizontal quebra no mobile, escondemos por estética */
}

@media (max-width: 600px) {
    .main-title { font-size: 1.8rem; }
    .title-serif { font-size: 1.5rem; }
    .section-full { padding: 4rem 1rem; }
    
    .grid-cards-6 {
        grid-template-columns: 1fr;
    }
    .row-4 .card, .row-3 .card {
        width: 100%;
    }
    
    .flying-logo {
        width: 200px; /* Logo menor no celular */
    }
    .flying-logo .center-piece { width: 90px; }
    .flying-logo .wing-anim { width: 55px; }
    
    .form-container { padding: 1.5rem; }
}

/* ==========================================================================
   ASAS ESTÁTICAS (O "V")
   ========================================================================== */
.static-wings {
    display: flex;
    justify-content: center;
    align-items: center; /* Alinha as metades perfeitamente pela base/centro */
    margin-bottom: 2rem;
    /* Ajuste fino opcional: se houver espaço vazio na imagem, podemos usar um gap negativo, ex: gap: -5px; */
}
.static-wings img {
    height: 40px; /* Ambas as asas terão rigidamente a mesma altura */
    width: auto;
    object-fit: contain;
}

.static-wings-left {
    margin: 0 0 2rem 0;
    justify-content: flex-start;
}

.mx-auto { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   CARROSSEIS HORIZONTAIS
   ========================================================================== */
.carousel-viewport {
    width: 100%;
    overflow: hidden; /* Hide horizontal scrollbar */
    padding: 2rem 0;
}

.carousel-wrapper {
    display: flex;
    /* gap: 2rem; REMOVED to allow continuous timeline */
    width: max-content; /* Let the wrapper grow based on contents */
    padding: 0 1rem;
}

.card-carousel {
    width: 350px;
    flex-shrink: 0;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.icon-gold {
    width: 48px;
    height: 48px;
    color: var(--color-gold);
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
}

/* Adjustments for container centering inside pins */
.pin-container-2, .pin-container-7 {
    position: relative;
    z-index: 10;
}
/* ==========================================================================
   TIMELINE NOS CARROSSEIS
   ========================================================================== */
.card-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 350px;
    flex-shrink: 0;
}

.timeline-node-container {
    width: 100%;
    height: 40px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

/* A linha contínua */
.timeline-node-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 1;
}

.line-gold::before { background-color: var(--color-gold); }
.line-red::before { background-color: var(--color-red); }

/* Gradiente para a transição entre ouro e vermelho na dobra 7 */
.line-transition::before {
    background: linear-gradient(to right, var(--color-gold) 50%, var(--color-red) 50%);
}

/* Corte das pontas */
.card-column:first-child .timeline-node-container::before { left: 50%; }
.card-column:last-child .timeline-node-container::before { right: 50%; }

.node {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    position: relative;
    z-index: 2;
}

.node-gold { background-color: var(--color-gold); }
.node-red { background-color: var(--color-red); }

/* Adjust column to act as gap */
.card-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 382px; /* 350px card + 32px padding (16px each side) = 382px total space */
    flex-shrink: 0;
    padding: 0 1rem; 
}
.card-column .card-carousel {
    width: 100%; /* Fill the column minus padding */
}
/* Timeline fixes to span the padding gap */
.timeline-node-container {
    width: calc(100% + 2rem); /* Stretch to cover the left/right padding */
    margin-left: -1rem; /* Offset to align with edges */
    height: 40px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
/* ==========================================================================
   CARDS EM ESCADINHA (DOBRA 3)
   ========================================================================== */
.card-percent {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.05);
}

.percent-number {
    font-family: 'Cinzel', serif;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    width: 120px;
    text-align: right;
}

.percent-text h4 {
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
    font-family: 'Cinzel', serif;
}

.percent-text p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #e2e8f0;
    margin: 0;
}

/* Escadinha & Cores */
.card-10 {
    margin-left: 0;
    background-color: rgba(212, 175, 55, 0.1); /* Fundo sutil dourado */
    border-left: 4px solid var(--color-gold);
}
.card-70 {
    margin-left: 3rem;
    background-color: rgba(255, 255, 255, 0.05); /* Fundo neutro */
    border-left: 4px solid #a0aec0;
}
.card-20 {
    margin-left: 6rem;
    background-color: rgba(230, 57, 70, 0.1); /* Fundo sutil vermelho */
    border-left: 4px solid var(--color-red);
}

@media (max-width: 768px) {
    .card-percent {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    .percent-number {
        font-size: 2.5rem;
        width: 80px;
    }
    .card-70 { margin-left: 1rem; }
    .card-20 { margin-left: 2rem; }
}
/* ==========================================================================
   INFOGRÁFICO / ORGANOGRAMA (DOBRA 3)
   ========================================================================== */
.infographic-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 0;
}

/* Linha vertical central conectando os nós */
.infographic-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    background: linear-gradient(to bottom, var(--color-gold), #94a3b8, var(--color-red));
    z-index: 0;
    border-radius: 4px;
}

.info-node {
    display: flex;
    align-items: center;
    background: rgba(10, 20, 40, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 1.5rem 2rem;
    width: 100%;
    max-width: 550px;
    margin-bottom: 3rem; /* Espaço para ver a linha conectora */
    position: relative;
    z-index: 1;
    box-shadow: 0 15px 35px rgba(0,0,0,0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.info-node:last-child {
    margin-bottom: 0;
}
.info-node:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.8);
}

.info-percent {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Cinzel', serif;
    font-size: 2.2rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-right: 2rem;
    border: 3px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 20px rgba(0,0,0,0.5), inset 0 0 15px rgba(255,255,255,0.1);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.info-text h4 {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-text p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #e2e8f0;
    margin: 0;
}

/* Estilos de Cores por Nível */
.node-10 { border-top: 2px solid var(--color-gold); }
.node-10 .info-percent { 
    background: linear-gradient(135deg, #d4af37, #8a6d1c); 
    border-color: rgba(212, 175, 55, 0.8);
    color: #fff;
}

.node-70 { border-top: 2px solid #94a3b8; }
.node-70 .info-percent { 
    background: linear-gradient(135deg, #94a3b8, #475569); 
    border-color: rgba(148, 163, 184, 0.8);
    color: #fff;
}

.node-20 { border-top: 2px solid var(--color-red); }
.node-20 .info-percent { 
    background: linear-gradient(135deg, #e63946, #780000); 
    border-color: rgba(230, 57, 70, 0.8);
    color: #fff;
}

@media (max-width: 768px) {
    .infographic-wrapper::before {
        left: 45px; /* Alinha a linha vertical com o centro dos círculos no mobile */
    }
    .info-node {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
    }
    .info-percent {
        margin-bottom: 1.5rem;
        width: 70px;
        height: 70px;
        font-size: 1.6rem;
    }
}
/* ==========================================================================
   CARDS MINIMALISTAS COM BEBAS NEUE (DOBRA 3)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

.infographic-wrapper::before {
    display: none !important;
}

.info-node {
    display: flex;
    align-items: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 1rem 0 !important;
    margin-bottom: 2rem !important;
    width: 100%;
}

.info-node:hover {
    transform: translateX(10px) !important;
    box-shadow: none !important;
}

.info-percent {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 6.5rem !important;
    font-weight: 400 !important; /* Bebas Neue só tem w400 */
    line-height: 0.8 !important;
    width: auto !important;
    height: auto !important;
    margin-right: 1.5rem !important;
    text-shadow: none !important;
}

.node-10 .info-percent { color: var(--color-gold) !important; }
.node-70 .info-percent { color: #94a3b8 !important; }
.node-20 .info-percent { color: var(--color-red) !important; }

.info-text {
    border-left: 2px solid;
    padding-left: 1.5rem;
}
.node-10 .info-text { border-color: var(--color-gold); }
.node-70 .info-text { border-color: #94a3b8; }
.node-20 .info-text { border-color: var(--color-red); }

/* ==========================================================================
   TEXTO DE LUXO (DOBRA 3 - COLUNA DIREITA)
   ========================================================================== */
.luxury-text-box {
    background: rgba(10, 20, 40, 0.4);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 24px;
    padding: 3rem 2rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

/* Efeito de brilho no topo da caixa */
.luxury-text-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.8), transparent);
}

.luxury-badge {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-gold);
    letter-spacing: 2px;
    text-transform: uppercase;
    background: rgba(212, 175, 55, 0.05);
}

.luxury-divider .divider-line {
    flex-grow: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
}

.glass-highlight {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.4));
    border-left: 3px solid var(--color-gold);
    border-radius: 0 16px 16px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
    .luxury-text-box {
        padding: 2rem 1.5rem;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    .luxury-text-box::before {
        display: none !important;
    }
    .glass-highlight {
        padding: 1.5rem 1rem !important;
    }
}

/* ==========================================================================
   GLASSMORPHISM & BG GIGANTE (DOBRA 4)
   ========================================================================== */
#dobra-4 {
    position: relative;
    overflow: hidden; /* Prevent giant wings from overflowing */
}

.giant-bg-wings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.04; /* Baixa opacidade */
    pointer-events: none;
    z-index: 0;
}
.giant-bg-wings img {
    width: 45%;
    max-width: 800px;
}

#dobra-4 .container {
    position: relative;
    z-index: 1;
}

/* Glassmorphism Cards */
.card-glass {
    background: rgba(255, 255, 255, 0.02) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2.5rem 1.5rem !important;
    border-radius: 16px !important;
    transition: transform 0.3s ease, background 0.3s ease;
}

.card-glass:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05) !important;
}

.card-glass .icon-minimal {
    width: 42px;
    height: 42px;
    margin-bottom: 1.5rem;
    color: var(--color-gold);
    stroke-width: 1.2px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* ==========================================================================
   FORMS MINIMALISTA & BG GIGANTE (DOBRA 8)
   ========================================================================== */
#inscricao {
    position: relative;
    overflow: hidden;
}

#inscricao .container {
    align-items: center; /* Alinha o texto da esquerda no centro vertical do form */
    position: relative;
    z-index: 1;
}

/* Formulário Minimalista */
.minimal-form input, .minimal-form select {
    width: 100%;
    padding: 0.8rem 0;
    margin-bottom: 1.5rem;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 0 !important;
    color: var(--color-white);
    font-family: 'Montserrat', sans-serif;
    transition: border-color 0.3s ease;
    font-size: 0.95rem;
}

.minimal-form input:focus, .minimal-form select:focus {
    outline: none !important;
    border-bottom: 1px solid var(--color-gold) !important;
}

.minimal-form input::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
}

.minimal-form select {
    color: rgba(255, 255, 255, 0.4); /* Like placeholder until selected */
}
.minimal-form select option {
    background-color: #0b1120;
    color: white;
}

.form-glass {
    padding: 3rem !important;
}

/* ==========================================================================
   HERO WINGS 3D
   ========================================================================== */
.hero-wings {
    perspective: 400px; /* Perspectiva muito mais forte para 3D extremo */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px; /* Não tampa a logo */
    z-index: 10;
    position: relative;
    pointer-events: none;
}

.hero-wing-left, .hero-wing-right {
    width: 120px; /* Bem menor, proporcional à logo */
    will-change: transform;
}

/* ==========================================================================
   FIX PERSPECTIVA HERO WINGS
   ========================================================================== */
.hero-content {
    perspective: 800px !important;
}

.hero-wings {
    perspective: none !important;
    transform-style: preserve-3d !important;
}

/* ==========================================================================
   PERSPECTIVA DAS ASAS ESTÁTICAS PARA ANIMAÇÃO DE SCROLL
   ========================================================================== */
.static-wings {
    perspective: 600px !important;
    transform-style: preserve-3d !important;
}

.wing-left, .wing-right {
    will-change: transform;
}

/* ==========================================================================
   DESKTOP LAYOUT - DOBRA 2 (CARDS GRANDES E ITENS JUNTOS)
   ========================================================================== */
@media (min-width: 769px) {
    #dobra-1 .static-logo-container {
        margin-bottom: 8vh !important; /* Sobe bem a logo e as asas no desktop */
    }

    #dobra-3 .col-right {
        margin-top: 0 !important; /* Iguala a altura das colunas no desktop */
    }

    #dobra-2 .pin-container-2 {
        justify-content: center !important;
        padding-top: 5vh !important;
        padding-bottom: 5vh !important;
    }
    
    #dobra-2 .container.mb-6 { margin-bottom: 3vh !important; }
    #dobra-2 .carousel-viewport { margin-bottom: 3vh !important; }

    #dobra-7 .pin-container-7 {
        justify-content: space-between !important;
        padding-top: 10vh !important;
        padding-bottom: 8vh !important;
    }
    
    #dobra-2 .card-column,
    #dobra-7 .card-column {
        width: 480px !important; /* Cards bem maiores no desktop */
        max-width: 35vw !important;
        padding: 0 1.5rem !important; /* Respiro extra entre os cards gigantes */
    }
    
    #dobra-2 .card,
    #dobra-7 .card {
        min-height: 42vh !important; /* Cards mais altos */
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 3rem 2.5rem !important;
    }
    
    #dobra-2 .card p,
    #dobra-7 .card p {
        font-size: 1.15rem !important; /* Fonte maior para acompanhar o card gigante */
        line-height: 1.6 !important;
    }

    #dobra-7 .pin-container-7 > .container {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    #dobra-7 .carousel-viewport {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* ==========================================================================
   CORREÇÕES GLOBAIS MOBILE (PRINTS USER)
   ========================================================================== */
/* Bloqueio de scroll horizontal */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

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

@media (max-width: 768px) {
    /* 1. Todos os textos centralizados e com respiro na borda */
    p, h1, h2, h3, h4, h5, .text-left, .text-right, .subtitle, .description, .body-text {
        text-align: center !important;
    }
    
    .container, section, .col-left, .col-right {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* 2. Botão sempre em 1 linha */
    .btn-gold {
        white-space: nowrap !important;
        font-size: 0.8rem !important;
        padding: 0.8rem 1rem !important;
        width: 100% !important;
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* 3. Dobras de Carrossel (2 e 7) - Asas e Textos */
    /* 3. Dobras de Carrossel (2 e 7) - Asas e Textos */
    #dobra-2 .pin-container-2 {
        justify-content: flex-start !important;
        padding-top: 5vh !important;
    }
    #dobra-2 .static-wings {
        transform: scale(0.4) !important;
        margin-bottom: 0.5rem !important;
        margin-top: -1.5rem !important;
    }
    #dobra-2 .title-serif {
        font-size: 1.1rem !important; 
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }

    /* Ajustes Específicos Dobra 7 - Proporção Exata (Espaços iguais, Cards Maiores, Headline Maior) */
    #dobra-7 {
        padding-left: 0 !important;
        padding-right: 0 !important; /* Remove a borda de segurança para o carrossel vazar na tela */
    }
    #dobra-7 .pin-container-7 {
        justify-content: space-between !important; /* Distribui os espaços perfeitamente iguais */
        padding-top: 6vh !important; 
        padding-bottom: 4vh !important;
        overflow: hidden !important;
    }
    #dobra-7 .container.mb-6 { 
        margin-bottom: 0 !important; /* Deixa o space-between calcular a margem */
        flex-shrink: 0 !important;
    }
    #dobra-7 .static-wings {
        transform: scale(0.35) !important;
        margin-bottom: 0 !important;
        margin-top: -2rem !important; 
    }
    #dobra-7 .title-serif {
        font-size: clamp(1.4rem, 4vh, 1.8rem) !important; /* Headline consideravelmente maior */
        line-height: 1.15 !important;
        margin-bottom: 0 !important;
    }
    #dobra-7 .carousel-viewport {
        margin-top: 0 !important; 
        margin-bottom: 0 !important; /* Deixa o space-between calcular a margem */
        flex-shrink: 1 !important; 
    }
    #dobra-7 .card-column {
        width: 85vw !important; /* Cards largos */
        max-width: 350px !important;
    }
    #dobra-7 .card {
        padding: clamp(1.5rem, 3vh, 2.5rem) 1.5rem !important; 
        height: 48vh !important; /* CARDS MUITO MAIORES E MAIS ALTOS */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; /* Centraliza o conteúdo dentro do card */
    }
    #dobra-7 .card h4 {
        font-size: clamp(1.1rem, 2.5vh, 1.3rem) !important;
        margin-bottom: 2vh !important;
    }
    #dobra-7 .card p {
        font-size: clamp(0.95rem, 2vh, 1.1rem) !important;
    }
    #dobra-7 .container.mt-4 { /* Container do botão */
        margin-top: 0 !important; /* Deixa o space-between calcular a margem */
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }
    .carousel-viewport {
        margin-top: -1rem !important;
    }
    .carousel-wrapper {
        padding-left: 1.5rem !important;
    }

    /* 4. Dobra 3 (Porcentagens) - Cards Minimalistas e Visíveis */
    #dobra-3 .col-left {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    #dobra-3 .info-node {
        background-color: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 12px !important;
        padding: 0.8rem 1rem !important; 
        margin: 0 0.5rem 0.8rem 0.5rem !important;
        flex-direction: row !important;
        align-items: center !important;
        border-top: none !important;
        border-left: 4px solid !important;
        gap: 1rem !important;
    }
    .node-10 { border-left-color: #FFDF73 !important; }
    .node-70 { border-left-color: #cbd5e1 !important; }
    .node-20 { border-left-color: #ff4d4d !important; }
    
    #dobra-3 .info-percent {
        font-size: 2.2rem !important;
        min-width: 65px !important;
        text-align: center !important;
        margin-bottom: 0 !important;
        line-height: 1 !important;
    }
    
    #dobra-3 .info-text h4 {
        font-size: 0.8rem !important;
        margin-bottom: 0.2rem !important;
        text-align: left !important;
    }
    #dobra-3 .info-text p {
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0 !important;
        text-align: left !important;
    }
    
    #dobra-3 .col-right {
        margin-top: 1.5rem !important;
    }
    #dobra-3 .col-right p {
        font-size: 0.8rem !important;
        margin-bottom: 0.6rem !important;
    }
}
/* ==========================================================================
   RESTAURAÇÃO FOTO DOBRA 1 E GRADIENTE
   ========================================================================== */
#dobra-1 {
    background-image: linear-gradient(to bottom, rgba(3, 9, 20, 0) 0%, rgba(3, 9, 20, 0.8) 30%, rgba(3, 9, 20, 1) 50%, rgba(3, 9, 20, 1) 100%), url('BACKGROUNDS/DOBRA%201_.png') !important;
    background-size: 100% auto !important; /* Foto da plateia no topo, cabendo 100% da largura */
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-color: var(--color-dark) !important;
}

@media (max-width: 768px) {
    #dobra-1 {
        background-image: linear-gradient(to bottom, rgba(3, 9, 20, 0) 0%, rgba(3, 9, 20, 0.9) 25%, rgba(3, 9, 20, 1) 40%, rgba(3, 9, 20, 1) 100%), url('BACKGROUNDS/DOBRA%201_.png') !important;
        background-size: 100% auto !important; /* Reduz bem a foto e deixa no topo */
    }
    
    /* As informacoes começam de 40% pra baixo */
    #dobra-1 .hero-content {
        margin-top: 40vh !important; 
    }
}
/* ==========================================================================
   AJUSTES FINAIS DOBRA 1 (TEXTOS, ESPAÇAMENTOS E MOBILE)
   ========================================================================== */

/* GLOBAL (DESKTOP E MOBILE) */
#dobra-1 .hero-content {
    padding-top: 6vh !important; /* Abaixa um pouco as informações globais */
}
#dobra-1 .hero-wings {
    margin-bottom: 1.5rem !important; /* Afasta as asas da logo */
}

/* MOBILE EXCLUSIVO */
@media (max-width: 768px) {
    /* 1. Foto maior ocupando o topo (cerca de 40%) */
    #dobra-1 {
        background-size: 160% auto !important; /* Aumenta a foto da plateia */
        background-position: top center !important;
    }
    
    /* 2. Tudo precisa caber na tela sem rolar */
    #dobra-1 .hero-content {
        margin-top: 36vh !important; /* Empurra pra baixo da foto */
        padding-top: 0 !important; /* Remove o padding do desktop */
        justify-content: flex-start !important; /* Organiza do topo pra baixo */
        height: auto !important;
    }
    
    /* 3. Diminuindo elementos para caber tudo na dobra */
    #dobra-1 .hero-wings {
        transform: scale(0.6) !important; /* Diminui as asas */
        margin-bottom: 0.2rem !important; /* Menos espaço entre asa e logo no mobile */
        margin-top: -1rem !important;
    }
    
    #dobra-1 .hero-logo {
        width: 140px !important; /* Diminui a logo */
    }
    
    #dobra-1 .static-logo-container {
        margin-bottom: 0.5rem !important;
    }
    
    #dobra-1 .subtitle {
        font-size: 0.6rem !important; /* Letra bem menor */
        line-height: 1.2 !important;
        margin-top: 0 !important;
        margin-bottom: 0.6rem !important;
    }
    
    #dobra-1 .main-title {
        font-size: 1.15rem !important; /* Título principal bem menor */
        line-height: 1.15 !important;
        margin-top: 0 !important;
        margin-bottom: 0.6rem !important;
    }
    
    #dobra-1 .description {
        font-size: 0.65rem !important; /* Texto debaixo bem menor */
        line-height: 1.2 !important;
        margin-top: 0 !important;
        margin-bottom: 0.8rem !important;
    }
    
    #dobra-1 .btn-gold {
        font-size: 0.75rem !important;
        padding: 0.7rem 1rem !important;
        margin-top: 0 !important;
        margin-bottom: 0.4rem !important; /* Traz a data pra mais perto */
    }
    
    #dobra-1 .info-date {
        font-size: 0.55rem !important; /* Data bem pequenininha pra caber na base */
        margin-top: 0 !important;
    }
}
/* ==========================================================================
   AUMENTANDO FOTO DA PLATEIA ATÉ AS ASAS (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    #dobra-1 {
        /* Degradê desce muito mais agora, revelando a foto até 55% da tela (perto das asas) */
        background-image: linear-gradient(to bottom, rgba(3, 9, 20, 0) 0%, rgba(3, 9, 20, 0) 35%, rgba(3, 9, 20, 0.8) 50%, rgba(3, 9, 20, 1) 60%, rgba(3, 9, 20, 1) 100%), url('BACKGROUNDS/DOBRA%201_.png') !important;
        /* Força a imagem a ter no mínimo 55vh de altura para encostar nas asas */
        background-size: auto 60vh !important; 
        background-position: top center !important;
    }
}
/* ==========================================================================
   FOTO DA PLATEIA COBRINDO A TELA INTEIRA (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    #dobra-1 {
        /* Degradê muito mais suave, começando a escurecer só no meio da tela e terminando 100% preto na borda de baixo */
        background-image: linear-gradient(to bottom, rgba(3, 9, 20, 0) 0%, rgba(3, 9, 20, 0.2) 30%, rgba(3, 9, 20, 0.7) 60%, rgba(3, 9, 20, 0.95) 85%, rgba(3, 9, 20, 1) 100%), url('BACKGROUNDS/DOBRA%201_.png') !important;
        
        /* Foto agora é "cover", ela preenche a altura inteira da dobra 1 sem cortar */
        background-size: cover !important; 
        background-position: top center !important;
    }
}
/* ==========================================================================
   AJUSTE FINO DO TAMANHO DA FOTO (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    #dobra-1 {
        /* Aumenta a foto e desloca um pouco para a esquerda */
        background-size: 280% auto !important; 
        background-position: 30% top !important; 
    }
}
/* ==========================================================================
   SUBINDO INFORMAÇÕES DOBRA 1 PARA CABER NA TELA (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    #dobra-1 .hero-content {
        margin-top: 20vh !important; /* Subiu o bloco de texto para caber tudo */
    }
}
/* ==========================================================================
   NOVO DESIGN PREMIUM DOBRA 3 (DESKTOP E GLOBAL)
   ========================================================================== */
#dobra-3 .info-node {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.2)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 2rem !important; /* Espaçamento interno mais luxuoso */
    margin-bottom: 1.5rem !important;
    transition: all 0.4s ease !important;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px) !important; /* Toque glassmorphism */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important; /* Sombra suave para destacar do fundo */
}

#dobra-3 .info-node:hover {
    transform: translateY(-5px) !important; /* Animação mais elegante (sobe em vez de deslizar lateral) */
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1)) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5) !important;
}

/* Barras coloridas removidas a pedido do usuário */
#dobra-3 .info-node::before {
    display: none !important;
}

#dobra-3 .info-percent {
    font-size: 5rem !important;
    font-family: 'Bebas Neue', sans-serif !important;
    line-height: 1 !important;
    margin-right: 2rem !important;
    text-shadow: 0 4px 15px rgba(0,0,0,0.6) !important;
}

#dobra-3 .info-text h4 {
    font-size: 1.1rem !important;
    margin-bottom: 0.3rem !important;
    letter-spacing: 1px !important;
}

#dobra-3 .info-text p {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    color: #e2e8f0 !important;
}

/* ==========================================================================
   AJUSTE DE LATERAIS DOBRA 3 (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    #dobra-3 .col-left {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    #dobra-3 .info-node {
        margin: 0 0 1rem 0 !important; /* Sem margens laterais pra alinhar com o texto */
        padding: 1rem !important;
        border-left: none !important; /* Desliga a borda CSS padrão pois o ::before já vai fazer o traço */
    }
    
    #dobra-3 .info-percent {
        font-size: 3rem !important; /* Ajuste pro celular */
        margin-right: 1rem !important;
    }
    
    #dobra-3 .info-text h4 {
        font-size: 0.9rem !important;
    }
    
    #dobra-3 .info-text p {
        font-size: 0.75rem !important;
    }
}
/* ==========================================================================
   FIX DEFINITIVO DE OVERFLOW E CENTRALIZAÇÃO (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    /* Cancela as margens negativas do Bootstrap que causam corte na direita */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    .container, section, .col-left, .col-right {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* Dobra 3 específica */
    #dobra-3 .info-node {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 1rem 0 !important;
        padding: 1.2rem 1rem !important;
        box-sizing: border-box !important;
    }
    
    #dobra-3 .info-text {
        flex: 1 !important;
        width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }
    
    /* Centralizando forçadamente todos os textos da direita para não vazar */
    #dobra-3 .col-right {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    #dobra-3 .col-right * {
        text-align: center !important;
        max-width: 100% !important;
    }
}
/* ==========================================================================
   CORREÇÃO DEFINITIVA - CORTE NAS BORDAS E LARGURA (MOBILE)
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box !important; /* A regra de ouro para impedir que padding vaze a tela */
}

html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 768px) {
    /* Reseta margens e forca o limite da tela em todas as estruturas */
    .container, .row, .col-left, .col-right, .col-12, section {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* O respiro lateral deve acontecer UMA ÚNICA VEZ no container, para não dobrar */
    .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    /* Remove padding duplo interno que empurra as coisas pra direita */
    .col-left, .col-right, .col-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Ajuste Fino Dobra 3 */
    #dobra-3 .info-node {
        width: 100% !important;
        margin: 0 0 1.2rem 0 !important;
        padding: 1.5rem 1.2rem !important; /* Mais respiro interno no card */
    }
    
    #dobra-3 .info-text {
        padding-right: 0.5rem !important; /* Descola a letra da borda direita do card */
    }
    
    /* Bloco de texto longo da direita */
    #dobra-3 .col-right {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important; /* Garante que o texto fique contido com folga */
    }
}
/* ==========================================================================
   REDUÇÃO DRÁSTICA DE FONTES E MARGENS (DOBRA 3 - MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    /* Força o container a ter exatos 10% de folga (5vw de cada lado) */
    #dobra-3 .container {
        padding-left: 5vw !important;
        padding-right: 5vw !important;
        width: 100vw !important;
        max-width: 100vw !important;
        /* Removido overflow: hidden para não cortar a asa animada */
    }
    
    #dobra-3 .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    #dobra-3 .col-left, #dobra-3 .col-right {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* O CSS de redução drástica foi removido pois estava achatando o layout de luxo */
}
/* ==========================================================================
   AJUSTES FINAIS DOBRA 2 - CELULAR (TEXTOS E ESPAÇAMENTOS)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Mover tudo mais para o topo para dar espaço */
    #dobra-2 .pin-container-2 {
        justify-content: flex-start !important; /* Tira do meio e joga pro topo */
        padding-top: 8vh !important; /* Começa bem no alto */
        height: 100dvh !important; /* Usa altura exata do celular */
    }
    
    #dobra-2 .static-wings {
        margin-bottom: 0.5rem !important; /* Cola a asa no título */
    }
    
    /* 2. Head em apenas 3 linhas e mais próxima da borda */
    #dobra-2 .title-serif {
        font-size: 1.25rem !important; /* Tamanho exato para bater 3 linhas */
        line-height: 1.2 !important;
        margin-left: -0.5rem !important; /* Estica em direção às laterais */
        margin-right: -0.5rem !important;
        margin-bottom: 1rem !important; /* Abre espaço pro carrossel */
    }
    
    /* Subir o carrossel ligeiramente */
    #dobra-2 .carousel-viewport {
        margin-top: 0.5rem !important;
        margin-bottom: 0 !important;
    }
    
    /* 3. Frase final em 1 linha apenas e bem pequena */
    #dobra-2 .subtitle.text-white {
        font-size: 0.58rem !important; /* Letra super pequena */
        line-height: 1 !important;
        margin-top: 1rem !important; /* Cola a frase no carrossel */
        margin-bottom: 0.5rem !important;
        white-space: nowrap !important; /* Bloqueia quebra de linha forçando 1 linha */
        letter-spacing: 0.5px !important;
    }
    
    /* 4. Subir botão e deixá-lo menor para caber na tela */
    #dobra-2 .btn-gold {
        margin-top: 0 !important;
        padding: 0.7rem 1rem !important;
        font-size: 0.75rem !important;
        margin-bottom: 2vh !important;
    }
}
/* ==========================================================================
   AJUSTE CIRÚRGICO DOBRA 2 (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Juntar a asa com o título */
    #dobra-2 .static-wings {
        margin-bottom: 0 !important; /* Tira margem abaixo da asa */
        padding-bottom: 0 !important;
    }
    
    #dobra-2 .title-serif {
        margin-top: 0 !important; /* Tira margem acima do titulo */
        padding-top: 0.5rem !important; /* Só um suspiro */
        font-size: 1.1rem !important; /* Fonte menor para garantir 3 linhas */
        line-height: 1.2 !important;
        max-width: 100% !important; /* Deixa esticar nas laterais */
        width: 100% !important;
    }
    
    /* 2. Subir os cards matando a margem gigante que existia (mb-6) */
    #dobra-2 .container.mb-6 {
        margin-bottom: 1rem !important; /* Deleta o fosso entre titulo e cards */
    }
    
    #dobra-2 .carousel-viewport {
        margin-top: 0 !important;
    }
    
    /* 3. Cards Minimalistas */
    #dobra-2 .card-carousel {
        padding: 1rem !important; /* Card mais fino */
        min-height: 140px !important; /* Card mais baixo */
    }
    
    #dobra-2 .icon-gold {
        width: 35px !important; /* Ícone menor */
        height: 35px !important;
        margin-bottom: 0.5rem !important;
    }
    
    #dobra-2 .card-carousel p {
        font-size: 0.75rem !important; /* Texto interno do card menor */
        line-height: 1.2 !important;
    }
    
    /* 4. Frase final segura (sem cortar) */
    #dobra-2 .subtitle.text-white {
        font-size: 0.65rem !important;
        white-space: normal !important; /* Desliga a trava que cortava a frase */
        word-wrap: break-word !important;
        margin-top: 0.5rem !important; /* Sobe a frase pra perto do carrossel */
        margin-bottom: 0.5rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        line-height: 1.2 !important;
    }
    
    /* 5. Subir o botão */
    #dobra-2 .btn-gold {
        margin-top: 0.5rem !important;
        margin-bottom: 2rem !important;
        font-size: 0.7rem !important;
        padding: 0.6rem 1rem !important;
    }
}
/* ==========================================================================
   AJUSTE DEFINITIVO DOBRA 6 - ANDRÉ MENEZES (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    /* Destrói o grid de 2 colunas e força uma coluna única centralizada */
    #dobra-6 .grid-2-col {
        display: flex !important;
        flex-direction: column !important;
        width: 100vw !important;
        max-width: 100vw !important;
        padding-left: 5vw !important;
        padding-right: 5vw !important;
        margin: 0 !important;
        gap: 2rem !important; /* Espaço entre foto e texto */
        overflow-x: hidden !important;
    }
    
    #dobra-6 .col-left, #dobra-6 .col-right {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Força tudo pro centro exato */
    }
    
    /* Centraliza os textos e garante que quebrem linha */
    #dobra-6 .col-right .title-serif, 
    #dobra-6 .col-right .body-text, 
    #dobra-6 .col-right p {
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    #dobra-6 .body-text p {
        font-size: 0.95rem !important; /* Aumentado para melhor leitura */
        line-height: 1.5 !important;
        margin-bottom: 1.2rem !important;
    }
    
    /* Ajuste da frase em dourado */
    #dobra-6 .body-text p[style*="color: var(--color-gold)"] {
        font-size: 1rem !important; /* Aumentado em proporção */
        margin-top: 1.5rem !important;
    }
    
    /* Centraliza as asas */
    #dobra-6 .static-wings {
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Botão centralizado */
    #dobra-6 .btn-gold {
        margin-left: auto !important;
        margin-right: auto !important;
        align-self: center !important;
    }
}
/* ==========================================================================
   AJUSTE DEFINITIVO DOBRA 5 - EDUARDO SCHROEDER (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    /* Mesmo padrão do André: Destrói o grid e força coluna única centralizada */
    #dobra-5 .grid-2-col {
        display: flex !important;
        flex-direction: column !important;
        width: 100vw !important;
        max-width: 100vw !important;
        padding-left: 5vw !important;
        padding-right: 5vw !important;
        margin: 0 !important;
        gap: 2rem !important; /* Espaço entre foto e texto */
        overflow-x: hidden !important;
    }
    
    #dobra-5 .col-left, #dobra-5 .col-right {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Força tudo pro centro exato */
    }
    
    /* Centraliza os textos e garante que quebrem linha */
    #dobra-5 .col-right .title-serif, 
    #dobra-5 .col-right .body-text, 
    #dobra-5 .col-right p {
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    #dobra-5 .body-text p {
        font-size: 0.95rem !important; /* Aumentado para melhor leitura */
        line-height: 1.5 !important;
        margin-bottom: 1.2rem !important;
    }
    
    /* Centraliza as asas */
    #dobra-5 .static-wings {
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 0.5rem !important;
    }
}
/* ==========================================================================
   AJUSTE DEFINITIVO DOBRA 7 - INSCRICAO E FORMULARIO (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    /* Destrói o grid e força uma coluna única centralizada */
    #dobra-7 .grid-2-col {
        display: flex !important;
        flex-direction: column !important;
        width: 100vw !important;
        max-width: 100vw !important;
        padding-left: 5vw !important;
        padding-right: 5vw !important;
        margin: 0 !important;
        gap: 2rem !important; /* Espaço entre infos e form */
        overflow-x: hidden !important;
    }
    
    #dobra-7 .col-left, #dobra-7 .col-right {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Força tudo pro centro exato */
    }
    
    /* Ajuste fino dos textos para não ficarem gigantes */
    #dobra-7 .col-left .title-serif {
        font-size: 1.5rem !important;
        text-align: center !important;
    }
    
    #dobra-7 .col-left ul li {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.8rem !important;
        text-align: center !important;
        word-wrap: break-word !important;
    }
    
    #dobra-7 .col-left p {
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
    }
    
    /* Centraliza as asas */
    #dobra-7 .static-wings {
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Traz o formulário pro meio da tela */
    #dobra-7 .form-container {
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 1.5rem 1rem !important;
        width: 100% !important;
    }
    
    #dobra-7 .form-container h3 {
        font-size: 1.2rem !important;
    }
    
    #dobra-7 .form-container p {
        font-size: 0.75rem !important;
    }
}
/* ==========================================================================
   AJUSTE DEFINITIVO SEÇÃO INSCRIÇÃO (MOBILE) - ONDE FICA O FORMULÁRIO
   ========================================================================== */
@media (max-width: 768px) {
    /* Destrói o grid da seção de inscrição (id=inscricao) e força coluna única centralizada */
    #inscricao .grid-2-col {
        display: flex !important;
        flex-direction: column !important;
        width: 100vw !important;
        max-width: 100vw !important;
        padding-left: 5vw !important;
        padding-right: 5vw !important;
        margin: 0 !important;
        gap: 2rem !important; /* Espaço entre infos e form */
        overflow-x: hidden !important;
    }
    
    #inscricao .col-left, #inscricao .col-right {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Força tudo pro centro exato */
    }
    
    /* Centralizando a logo na inscrição */
    #inscricao .col-left img {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
        max-width: 180px !important; /* Logo menor no celular */
    }
    
    /* Ajuste fino dos textos (Data, Local, etc) para não ficarem gigantes */
    #inscricao .col-left .event-details {
        padding-left: 0 !important;
        width: 100% !important;
    }
    
    #inscricao .col-left .event-details li {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.8rem !important;
        text-align: center !important;
        word-wrap: break-word !important;
        list-style: none !important;
    }
    
    /* Parágrafo de aviso bem menor */
    #inscricao .col-left p {
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        margin-top: 1rem !important;
    }
    
    /* Traz o formulário pro meio da tela */
    #inscricao .form-container {
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 1.5rem 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    #inscricao .form-container h3 {
        font-size: 1.1rem !important;
    }
    
    #inscricao .form-container p {
        font-size: 0.75rem !important;
    }
    
    /* Campos do form */
    #inscricao .form-container input, 
    #inscricao .form-container select {
        font-size: 0.75rem !important;
        padding: 0.6rem !important;
    }
}
/* ==========================================================================
   FAQ MINIMALISTA (ACCORDION)
   ========================================================================== */
#faq .faq-container {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 1.5rem !important;
}

#faq .faq-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
    padding: 1.5rem 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    transition: background 0.3s ease;
}

#faq .faq-item h4 {
    font-size: 1.1rem !important;
    color: #fff !important;
    font-weight: 500 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

#faq .faq-item p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

@media (max-width: 768px) {
    #faq .faq-item {
        padding: 1.2rem 0 !important;
    }
    #faq .faq-item h4 {
        font-size: 0.85rem !important;
        padding-right: 0.5rem !important;
    }
    #faq .faq-item p {
        font-size: 0.75rem !important;
    }
    #faq .faq-container {
        padding: 0 1.5rem !important;
        width: 100vw !important;
        box-sizing: border-box !important;
    }
}
/* ==========================================================================
   CORREÇÃO DO VAZAMENTO DO FAQ NO MOBILE
   ========================================================================== */
@media (max-width: 768px) {
    #faq .faq-container {
        padding: 0 !important; /* Tira o padding duplo que estava empurrando pra direita */
        width: 100% !important; /* Usa 100% do container pai, e não 100vw (que ignoraria as margens) */
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    #faq .faq-item {
        padding: 1.2rem 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    #faq .faq-item h4 {
        font-size: 0.85rem !important;
        padding-right: 0 !important; /* A seta já tem margem, não precisa espremer mais */
        width: 100% !important;
    }
}

/* ==========================================================================
   AJUSTE DE DOBRA 1 - OTIMIZAÇÃO E REDIMENSIONAMENTO (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Alinha todos os itens para a base da tela, deixando a foto livre no topo */
    #dobra-1 .hero-content {
        margin-top: 12vh !important; 
        padding-top: 0 !important;
        height: 85vh !important; /* Altura controlada para bater no fundo */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important; /* Empacota tudo na base */
    }

    /* 2. Asas */
    #dobra-1 .hero-wings {
        order: 1;
        transform: scale(0.65) !important;
        margin-bottom: -0.5rem !important; 
        margin-top: 0 !important; /* Retira a margem fixa pois o flex-end fará o trabalho */
    }

    /* 3. Logo */
    #dobra-1 .static-logo-container {
        order: 2;
        margin-bottom: 1.5rem !important;
    }
    #dobra-1 .hero-logo {
        width: 160px !important;
    }

    /* 4. BLOCO DE TEXTOS (Headline, Spacer, Subtitle, Spacer, Description) */
    /* Ao colocar todos com order: 3, eles seguem a ordem do HTML naturalmente */
    #dobra-1 .main-title,
    #dobra-1 .subtitle,
    #dobra-1 .description,
    #dobra-1 .elegant-spacer {
        order: 3;
    }

    /* HEADLINE E LOGO NO MOBILE (Distância idêntica às outras infos) */
    #dobra-1 .static-logo-container {
        margin-bottom: 0 !important;
    }
    #dobra-1 .main-title {
        font-size: 1.3rem !important;
        line-height: 1.3 !important;
        margin-top: 1.2rem !important; /* Distância exata do logo pra head no mobile */
        margin-bottom: 0 !important;
        max-width: 100% !important;
    }

    /* SUBTITLE (Montserrat semibold) */
    #dobra-1 .subtitle {
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 600 !important;
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        margin-top: 1.2rem !important;
        margin-bottom: 1.2rem !important;
        letter-spacing: 1px !important;
    }

    /* DESCRIÇÃO (Montserrat regular) */
    #dobra-1 .description {
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 400 !important;
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        margin-top: 0 !important;
        margin-bottom: 1.2rem !important; /* Espaçamento idêntico às outras infos */
    }

    /* ESPAÇADOR ELEGANTE */
    .elegant-spacer {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 1.2rem 0 !important; /* Espaço de respiro entre as frases */
        width: 100%;
        opacity: 0.6;
    }
    .elegant-spacer::before,
    .elegant-spacer::after {
        content: '';
        display: block;
        width: 40px;
        height: 1px;
        background-color: var(--color-gold);
    }
    .elegant-spacer span {
        color: var(--color-gold);
        font-size: 0.6rem;
        margin: 0 15px;
    }

    /* 7. Data e Localização (Sobe para ficar acima do botão) */
    #dobra-1 p:last-of-type {
        order: 6;
        font-size: 0.75rem !important;
        margin-top: 0 !important;
        margin-bottom: 1.5rem !important;
        letter-spacing: 2px !important;
    }

    /* 8. Botão na borda de baixo */
    #dobra-1 .btn-gold {
        order: 7;
        font-size: 1rem !important;
        padding: 1.2rem 1rem !important;
        margin-top: 0 !important;
        margin-bottom: 2vh !important; /* Fica na borda sem cortar */
        width: 100% !important;
    }
}

/* ==========================================================================
   AJUSTE DE DOBRA 2 - RESPONSIVIDADE E CARDS QUADRADOS (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Preenche a tela e organiza em coluna */
    #dobra-2 .pin-container-2 {
        height: 95vh !important; /* Para bater no fundo sem estourar */
        padding-top: 4vh !important; /* Sobe bem para perto do topo */
        padding-bottom: 0 !important;
        justify-content: flex-start !important;
    }

    /* 2. Topo (Asas e Headline) */
    #dobra-2 .pin-container-2 > .container:first-of-type {
        margin-bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    #dobra-2 .static-wings {
        transform: scale(0.65) !important;
        margin-bottom: 0.5rem !important; /* Desencavala as asas do título */
        margin-top: -1rem !important;
    }
    #dobra-2 .title-serif {
        font-size: clamp(0.8rem, 4.8vw, 1.25rem) !important; /* Ajusta a fonte dinamicamente à tela */
        line-height: 1.3 !important;
        padding: 0 !important;
        width: 100% !important; 
        margin: 0 auto !important;
        white-space: nowrap !important; /* PROÍBE O NAVEGADOR DE QUEBRAR PALAVRAS EM NOVAS LINHAS */
    }

    /* 3. Meio da Página (Carrossel preenchendo o espaço) */
    #dobra-2 .carousel-viewport {
        margin-top: auto !important; /* Centraliza verticalmente preenchendo o vazio */
        margin-bottom: auto !important; /* EMPURRA A BASE PRO FUNDO */
        display: flex !important;
        align-items: center !important;
        width: 100vw !important; /* Ignora as margens laterais do container */
        margin-left: calc(-50vw + 50%) !important; /* Sangra até a borda absoluta da tela */
        padding-top: 60px !important; /* Dá espaço para a sombra superior não ser cortada */
        padding-bottom: 60px !important; /* Dá espaço para a sombra inferior não ser cortada */
    }
    #dobra-2 .card-column {
        width: 82vw !important; /* Cards bem maiores e imponentes */
        max-width: 320px !important;
        margin-right: 1.5rem !important;
    }
    #dobra-2 .card-carousel {
        aspect-ratio: 1 / 1 !important; /* CARDS QUADRADOS */
        height: auto !important;
        min-height: unset !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important; /* Centraliza tudo no eixo X também */
        padding: 2rem 1.5rem !important; /* Mais respiro interno */
        border-radius: 20px !important; /* Bordas mais suaves e premium */
        border: 1px solid rgba(212, 175, 55, 0.15) !important; /* Fio de ouro sutil na borda */
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important; /* Sombra profunda */
        backdrop-filter: blur(10px) !important; /* Glassmorphism */
    }
    /* Ícones maiores e mais elegantes (traço fino) */
    #dobra-2 .card-carousel .icon-gold {
        width: 60px !important;
        height: 60px !important;
        stroke-width: 1.2px !important; /* Traço finíssimo e elegante */
        filter: drop-shadow(0 4px 6px rgba(212, 175, 55, 0.3)) !important; /* Brilho de luxo */
        margin-bottom: 1.5rem !important;
    }
    #dobra-2 .card-carousel p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        font-weight: 300 !important;
        color: rgba(255, 255, 255, 0.95) !important;
        margin-top: 0 !important;
    }

    /* Cores em degradê escurecendo progressivamente pela paleta azul */
    #dobra-2 .carousel-wrapper .card-column:nth-child(1) .card-carousel { background: linear-gradient(145deg, rgba(26, 49, 90, 0.95), rgba(18, 34, 64, 0.95)) !important; }
    #dobra-2 .carousel-wrapper .card-column:nth-child(2) .card-carousel { background: linear-gradient(145deg, rgba(20, 38, 71, 0.95), rgba(13, 25, 48, 0.95)) !important; }
    #dobra-2 .carousel-wrapper .card-column:nth-child(3) .card-carousel { background: linear-gradient(145deg, rgba(15, 29, 54, 0.95), rgba(9, 17, 34, 0.95)) !important; }
    #dobra-2 .carousel-wrapper .card-column:nth-child(4) .card-carousel { background: linear-gradient(145deg, rgba(10, 20, 38, 0.95), rgba(5, 10, 20, 0.95)) !important; }
    #dobra-2 .carousel-wrapper .card-column:nth-child(5) .card-carousel { background: linear-gradient(145deg, rgba(6, 12, 24, 0.95), rgba(3, 6, 12, 0.95)) !important; }
    #dobra-2 .carousel-wrapper .card-column:nth-child(6) .card-carousel { background: linear-gradient(145deg, rgba(3, 6, 12, 0.95), rgba(0, 0, 0, 0.95)) !important; }
    
    /* O Grande Final (7º card): Quebra a paleta escura com um banho de Ouro Brilhante */
    #dobra-2 .carousel-wrapper .card-column:nth-child(7) .card-carousel { 
        background: linear-gradient(145deg, var(--color-gold), #A68434) !important; 
        border: 1px solid rgba(255, 255, 255, 0.5) !important;
        box-shadow: 0 25px 50px rgba(212, 175, 55, 0.4) !important; /* Brilho de ouro ao redor */
    }
    #dobra-2 .carousel-wrapper .card-column:nth-child(7) .card-carousel p {
        color: #03060A !important; /* Texto quase preto para contraste brutal */
        font-weight: 700 !important;
        font-size: 1.05rem !important;
    }
    /* Estilo para as asas dentro do card dourado */
    #dobra-2 .carousel-wrapper .card-column:nth-child(7) .card-carousel .card-wings {
        transform: scale(0.6) !important; /* Tamanho proporcional para dentro do card */
        margin-top: -1rem !important;
        margin-bottom: 0 !important;
        filter: brightness(0.25) sepia(1) hue-rotate(-10deg) saturate(2) !important; /* Dourado bem escuro / Marrom / Bronze escuro para contrastar com o fundo dourado */
    }
    
    /* 4. Base (Texto e Botão na Borda) */
    #dobra-2 .pin-container-2 > .container:last-of-type {
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    #dobra-2 .pin-container-2 > .container:last-of-type p.subtitle {
        font-size: 0.75rem !important;
        margin-bottom: 1rem !important;
        letter-spacing: 1px !important;
    }
    #dobra-2 .pin-container-2 > .container:last-of-type .btn-gold {
        width: 100% !important;
        max-width: 380px !important; /* Um pouco mais largo para acomodar o texto */
        padding: 1.2rem 1rem !important;
        font-size: clamp(0.7rem, 4vw, 0.95rem) !important; /* Fonte inteligente para não estourar */
        font-weight: 800 !important; /* Fonte mais grossa conforme pedido */
        white-space: normal !important; /* Permite quebrar linha ou acomodar todo texto sem "..." */
        text-overflow: clip !important;
        line-height: 1.2 !important;
        margin-top: 0 !important;
        margin-bottom: 2vh !important; /* MESMO PADRÃO DA DOBRA 1 */
    }

    /* ==========================================================================
       AJUSTE DE DOBRA 3 - CARDS VERTICAIS E ENQUADRAMENTO (MOBILE)
       ========================================================================== */
    #dobra-3 {
        padding-top: 5vh !important;
    }
    #dobra-3 .container.grid-2-col {
        display: flex !important;
        flex-direction: column !important;
    }
    /* Força as Asas e os 3 Cards a formarem 1 Dobra visual completa */
    #dobra-3 .col-left {
        min-height: 85vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding-bottom: 5vh !important;
    }
    /* Empilhamento dos números e textos */
    #dobra-3 .info-node {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-bottom: 2rem !important;
        border: none !important; /* Tira qualquer linha ou borda amadora */
        border-radius: 24px !important;
        padding: 2.5rem 1.5rem !important; /* Mais respiro por causa do fundo preenchido */
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
    }
    
    /* Fundos coloridos acompanhando a paleta de cada card */
    #dobra-3 .node-10 { background: linear-gradient(145deg, rgba(212, 175, 55, 0.15), rgba(10, 20, 40, 0.9)) !important; }
    #dobra-3 .node-70 { background: linear-gradient(145deg, rgba(148, 163, 184, 0.1), rgba(10, 20, 40, 0.9)) !important; }
    #dobra-3 .node-20 { background: linear-gradient(145deg, rgba(255, 77, 77, 0.15), rgba(10, 20, 40, 0.9)) !important; }

    #dobra-3 .info-percent {
        margin-right: 0 !important;
        margin-bottom: 0.5rem !important;
        font-size: 8rem !important; /* NUMBER BIG! */
    }
    /* Cores Corrigidas (Vermelho Mais Vivo) e Brilho (Glow) */
    #dobra-3 .node-10 .info-percent { color: var(--color-gold) !important; text-shadow: 0 0 40px rgba(212, 175, 55, 0.9) !important; }
    #dobra-3 .node-70 .info-percent { color: #cbd5e1 !important; text-shadow: 0 0 40px rgba(203, 213, 225, 0.6) !important; }
    #dobra-3 .node-20 .info-percent { color: #ff4d4d !important; text-shadow: 0 0 40px rgba(255, 77, 77, 0.9) !important; } /* Vermelho vivo para melhor contraste */

    #dobra-3 .info-text {
        border: none !important; /* Remove completamente qualquer linha separadora */
        padding: 0 !important;
        width: 100% !important;
        text-align: center !important; /* Força alinhamento central */
    }
    
    /* Textos maiores e centralizados */
    #dobra-3 .info-text h4 {
        font-size: 1.25rem !important;
        text-align: center !important;
    }
    #dobra-3 .info-text p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }
}

/* ==========================================================================
   RESPONSIVIDADE INTELIGENTE PARA CELULARES COM TELAS CURTAS
   (Evita quebra de layout ou rolagem em aparelhos menores como iPhone SE)
   ========================================================================== */

/* Telas médias/curtas (ex: altura até 750px) */
@media (max-width: 768px) and (max-height: 750px) {
    #dobra-1 .hero-wings {
        transform: scale(0.55) !important;
        margin-top: 2vh !important;
    }
    #dobra-1 .static-logo-container {
        margin-bottom: 0.8rem !important;
    }
    #dobra-1 .hero-logo {
        width: 140px !important;
    }
    #dobra-1 .main-title {
        font-size: 1.15rem !important;
    }
    #dobra-1 .subtitle {
        font-size: 0.75rem !important;
    }
    #dobra-1 .description {
        font-size: 0.85rem !important;
    }
    .elegant-spacer {
        margin: 0.8rem 0 !important;
    }
    #dobra-1 p:last-of-type {
        margin-bottom: 1rem !important;
    }
    #dobra-1 .btn-gold {
        padding: 0.9rem 1rem !important;
        font-size: 0.9rem !important;
    }

    /* Dobra 2 em telas curtas */
    #dobra-2 .static-wings { transform: scale(0.55) !important; margin-top: -1.5rem !important; }
    #dobra-2 .title-serif { font-size: 1.05rem !important; }
    #dobra-2 .carousel-viewport { margin-top: 1rem !important; }
    #dobra-2 .card-column { width: 65vw !important; max-width: 250px !important; }
    #dobra-2 .card-carousel p { font-size: 0.8rem !important; }
    #dobra-2 .pin-container-2 > .container:last-of-type p.subtitle { font-size: 0.7rem !important; margin-bottom: 0.8rem !important; }
    #dobra-2 .pin-container-2 > .container:last-of-type .btn-gold { padding: 0.9rem 1rem !important; font-size: 0.9rem !important; margin-bottom: 1.5vh !important; }
}

/* Telas MUITO curtas (ex: altura até 650px) */
@media (max-width: 768px) and (max-height: 650px) {
    #dobra-1 .hero-wings {
        transform: scale(0.45) !important;
        margin-top: 1vh !important;
    }
    #dobra-1 .hero-logo {
        width: 120px !important;
    }
    #dobra-1 .main-title {
        font-size: 1.05rem !important;
    }
    #dobra-1 .subtitle {
        font-size: 0.7rem !important;
    }
    #dobra-1 .description {
        font-size: 0.75rem !important;
    }
    .elegant-spacer {
        margin: 0.5rem 0 !important;
    }
    #dobra-1 p:last-of-type {
        margin-bottom: 0.5rem !important;
    }
    #dobra-1 .btn-gold {
        padding: 0.8rem 1rem !important;
        font-size: 0.85rem !important;
        margin-bottom: 1vh !important;
    }

    /* Dobra 2 em telas muito curtas */
    #dobra-2 .pin-container-2 { padding-top: 2vh !important; height: 98vh !important; }
    #dobra-2 .static-wings { transform: scale(0.45) !important; margin-bottom: -1.5rem !important; margin-top: -2rem !important; }
    #dobra-2 .title-serif { font-size: clamp(0.7rem, 4.2vw, 0.95rem) !important; margin-bottom: 0 !important; }
    #dobra-2 .carousel-viewport { margin-top: 0.5rem !important; }
    #dobra-2 .card-column { width: 60vw !important; max-width: 220px !important; }
    #dobra-2 .card-carousel { padding: 1rem !important; }
    #dobra-2 .card-carousel p { font-size: 0.75rem !important; margin-top: 0.5rem !important; }
    #dobra-2 .pin-container-2 > .container:last-of-type p.subtitle { font-size: 0.65rem !important; margin-bottom: 0.5rem !important; }
    #dobra-2 .pin-container-2 > .container:last-of-type .btn-gold { padding: 0.8rem 1rem !important; font-size: 0.85rem !important; margin-bottom: 1vh !important; }
}

/* ==========================================================================
   UNIFICAÇÃO GLOBAL DO TAMANHO DAS ASAS (MOBILE)
   Garante que todas as asas tenham exatamente a mesma proporção (0.4)
   ========================================================================== */
@media (max-width: 768px) {
    body section .static-wings, 
    body section .hero-wings,
    body div .static-wings, 
    body div .hero-wings,
    #dobra-1 .hero-wings,
    #dobra-2 .static-wings,
    #dobra-3 .static-wings,
    #dobra-4 .static-wings,
    #dobra-5 .static-wings,
    #dobra-6 .static-wings,
    #dobra-7 .static-wings {
        transform: scale(0.8) !important;
        margin-top: -1rem !important;
        margin-bottom: 1rem !important;
    }
}