/* ==========================================================================
   TRAMEI ISOLATED B2B - CORPORATE SALES PAGE (FINAL ALIGNMENT FIX)
   ========================================================================== */

.spectacular-b2b-page { background-color: #fcf8f4; overflow-x: hidden; color: #333; font-family: 'Work Sans', sans-serif; position: relative; }

/* The "Several Tramei" Watermark Background */
.b2b-watermark-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://tramei.com.br/wp-content/uploads/2023/12/Logo-tramei.webp');
    background-size: 300px;
    background-repeat: repeat;
    opacity: 0.015;
    z-index: 0;
    pointer-events: none;
}

/* B2B Hero */
.b2b-hero { position: relative; padding: 140px 0 100px; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; }

.hero-text-block h1 { font-size: 80px; font-weight: 700; letter-spacing: -3px; margin-bottom: 25px; color: #AC4C16; line-height: 1; }
.hero-text-block h1 .italic { font-family: serif; font-style: italic; color: #f4a261; font-weight: 400; }
.hero-text-block p { font-size: 22px; color: #555; max-width: 550px; line-height: 1.6; margin-bottom: 40px; }

.decorative-text-v2 { position: absolute; top: -60px; left: -20px; font-size: 140px; font-weight: 900; color: rgba(244, 162, 97, 0.05); z-index: -1; pointer-events: none; }

/* Vibrant Image with Transparency - ALIGNED (RETA) */
.hero-img-vibrant { width: 95%; margin-left: auto; }
.hero-img-editorial { 
    width: 100%; 
    height: auto; 
    border-radius: 8px; 
    mix-blend-mode: multiply; 
    transform: none; /* Removed rotation to keep it straight */
    transition: all 0.5s ease;
}
.hero-img-editorial:hover { transform: scale(1.02); }

.b2b-btn-primary { 
    display: inline-block; 
    padding: 20px 50px; 
    background: #AC4C16; 
    color: #fff !important; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    border-radius: 100px; 
    text-decoration: none;
    transition: all 0.3s;
}

/* Proposition */
.b2b-proposition { padding: 100px 0; z-index: 1; position: relative; }
.lead-paragraph { font-size: 28px; line-height: 1.5; color: #AC4C16; font-weight: 300; max-width: 900px; margin: 0 auto; text-align: center; }

/* Benefits Grid Modern */
.b2b-benefits { padding: 100px 0; background: #fff; border-top: 1px solid #eee; }
.section-subtitle { text-align: center; font-size: 32px; font-weight: 700; color: #AC4C16; margin-bottom: 60px; text-transform: uppercase; letter-spacing: 2px; }

.benefits-modern-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.benefit-card { 
    background: #fcf8f4; 
    padding: 40px; 
    border-radius: 15px; 
    transition: all 0.4s ease; 
    border: 1px solid transparent;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.benefit-card:hover { transform: translateY(-10px); background: #fff; box-shadow: 0 20px 40px rgba(0,0,0,0.05); border-color: #f4a261; }

.benefit-icon { 
    width: 72px; 
    height: 72px; 
    background: #AC4C16; 
    color: #fff; 
    border-radius: 14px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 29px; 
    margin-bottom: 25px; 
}
.benefit-card h4 { font-size: 20px; font-weight: 700; color: #AC4C16; margin-bottom: 15px; }
.benefit-card p { font-size: 16px; color: #666; line-height: 1.6; margin: 0; }

.b2b-bottom-tags { display: flex; justify-content: center; gap: 40px; margin-top: 60px; padding-top: 40px; border-top: 1px solid #eee; }
.tag-item { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #AC4C16; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
.tag-item i { color: #f4a261; font-size: 16px; }

/* Final CTA Premium */
.b2b-final-cta { padding: 120px 0; background: #AC4C16; position: relative; overflow: hidden; }
.b2b-final-cta::before { content: ''; position: absolute; top: -50%; left: -10%; width: 60%; height: 200%; background: radial-gradient(circle, rgba(244, 162, 97, 0.1) 0%, transparent 70%); z-index: 0; }

.cta-glass-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 30px; padding: 80px 40px; text-align: center; position: relative; z-index: 1; }
.cta-content h2 { font-size: 48px; font-weight: 700; color: #fff; margin-bottom: 20px; line-height: 1.2; }
.cta-content p { font-size: 18px; color: rgba(255, 255, 255, 0.8); margin-bottom: 40px; max-width: 700px; margin-left: auto; margin-right: auto; }

.b2b-btn-premium { display: inline-flex; align-items: center; gap: 15px; padding: 22px 50px; background: #f4a261; color: #fff !important; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; border-radius: 100px; text-decoration: none; transition: all 0.3s; font-size: 18px; box-shadow: 0 15px 35px rgba(244, 162, 97, 0.3); }
.b2b-btn-premium:hover { background: #fff; color: #AC4C16 !important; transform: translateY(-5px); box-shadow: 0 20px 45px rgba(0,0,0,0.2); }
.b2b-btn-premium i { font-size: 24px; }

/* B2B Chatbot Modal */
.chatbot-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(172, 76, 22, 0.95); backdrop-filter: blur(10px); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.4s ease; }
.chatbot-modal.active { opacity: 1; visibility: visible; }

.chatbot-container { background: #fff; width: 100%; max-width: 500px; border-radius: 20px; overflow: hidden; position: relative; box-shadow: 0 30px 60px rgba(0,0,0,0.3); transform: translateY(30px); transition: all 0.5s ease; }
.chatbot-modal.active .chatbot-container { transform: translateY(0); }

.close-chatbot { position: absolute; top: 15px; right: 20px; background: none; border: none; font-size: 30px; color: #999; cursor: pointer; z-index: 10; }
.chatbot-header { background: #fcf8f4; padding: 25px; display: flex; align-items: center; gap: 15px; border-bottom: 1px solid #eee; }
.chatbot-header img { height: 30px; }
.chatbot-header span { font-weight: 700; color: #AC4C16; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }

.chatbot-flow { padding: 40px; min-height: 350px; display: flex; align-items: center; justify-content: center; }
.chat-step { display: none; width: 100%; animation: fadeInChat 0.5s ease forwards; }
.chat-step.active { display: block; }

@keyframes fadeInChat { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

.chat-msg { font-size: 20px; font-weight: 500; color: #AC4C16; line-height: 1.4; margin-bottom: 30px; }
.chat-msg span { color: #f4a261; font-weight: 700; }

.chat-input-area { display: flex; flex-direction: column; gap: 15px; }
.chat-input-area input { width: 100%; padding: 15px 20px; border: 2px solid #eee; border-radius: 12px; font-size: 16px; outline: none; transition: border-color 0.3s; }
.chat-input-area input:focus { border-color: #f4a261; }
.chat-input-area input.error { border-color: #ff4d4d; }

.next-step { background: #AC4C16; color: #fff; border: none; padding: 15px; border-radius: 12px; font-weight: 700; cursor: pointer; transition: background 0.3s; }
.next-step:hover { background: #1a252f; }

.chat-options { display: flex; flex-direction: column; gap: 10px; }
.chat-opt, .chat-opt-final { background: #fcf8f4; border: 1px solid #eee; padding: 15px 20px; border-radius: 12px; text-align: left; font-size: 16px; font-weight: 500; color: #AC4C16; cursor: pointer; transition: all 0.3s; }
.chat-opt:hover, .chat-opt-final:hover { background: #f4a261; color: #fff; border-color: #f4a261; transform: translateX(5px); }

/* Buttons Fix */
button.open-b2b-chatbot { border: none; cursor: pointer; }

.chat-msg.text-center { text-align: center; }
.redirect-icon { font-size: 50px; color: #f4a261; margin-bottom: 20px; }

@media (max-width: 992px) {
    .hero-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .hero-text-block p { margin-left: auto; margin-right: auto; }
    .hero-img-vibrant { margin: 0 auto; width: 100%; }
    .benefits-modern-grid { grid-template-columns: 1fr; }
    .decorative-text-v2 { display: none; }
}

@media (max-width: 600px) {
    .b2b-hero { padding: 100px 0 60px; }
    .hero-text-block h1 { font-size: 42px; letter-spacing: -1px; }
    .hero-text-block p { font-size: 16px; }
    .b2b-btn-primary { padding: 18px 40px; width: 100%; box-sizing: border-box; }
    
    .b2b-proposition { padding: 60px 0; }
    .lead-paragraph { font-size: 20px; }
    
    .b2b-benefits { padding: 60px 0; }
    .benefit-card { padding: 30px 20px; }
    
    .b2b-bottom-tags { flex-direction: column; align-items: center; gap: 20px; }
    
    .cta-glass-card { padding: 50px 20px; }
    .cta-content h2 { font-size: 32px; }
    .cta-content p { font-size: 16px; }
    .b2b-btn-premium { width: 100%; justify-content: center; padding: 18px 30px; font-size: 16px; }
    
    .chatbot-container { max-width: 95%; margin: 10px; }
    .chatbot-flow { padding: 25px; min-height: 300px; }
    .chat-msg { font-size: 18px; }
}