/* Estilos Específicos para Landing Pages (Slugs) */
/* Este arquivo deve ser importado nas LPs APÓS o styles.css principal para herdar o tema e sobrescrever apenas estruturas de LP */

/* RESTAURANDO O TEMA ORIGINAL DAS LANDING PAGES */
:root {
    --lp-bg: #09080F;
    --lp-surface: #15141E;
    --lp-border: rgba(168, 85, 247, .15);
    --lp-primary: #A855F7;
    --lp-text: #F1F0F5;
    --lp-text2: #A09CB5;
}

body {
    background: var(--lp-bg) !important;
    color: var(--lp-text2) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--lp-text);
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
}

.lp-section {
    padding: 48px 0;
    border-top: 1px solid var(--lp-border);
}

.lp-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--lp-text);
}

.lp-section h3 {
    font-size: 1.15rem;
    margin-bottom: 12px;
    color: var(--lp-text);
}

.lp-section p {
    color: var(--lp-text2);
    margin-bottom: 16px;
}

.lp-section ul {
    list-style: none;
    padding: 0;
}

.lp-section li {
    padding: 10px 0 10px 28px;
    position: relative;
    color: var(--lp-text2);
}

.lp-section li::before {
    content: '✅';
    position: absolute;
    left: 0;
}

.step-card {
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 16px;
}

.step-number {
    display: inline-block;
    background: var(--lp-primary);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    font-weight: 700;
    font-size: .9rem;
    margin-bottom: 12px;
}

.step-card h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: var(--lp-text);
}

.step-card p {
    color: var(--lp-text2);
    font-size: .95rem;
}

/* Compare Table (Manychat etc) */
.compare-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: .9rem }
.compare-table th, .compare-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--lp-border) }
.compare-table th { color: var(--lp-text2); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .5px }
.compare-table td:first-child { color: var(--lp-text); font-weight: 500 }
.compare-table .yes { color: #10B981 }
.compare-table .no { color: #EF4444 }
.brand-col { background: rgba(168, 85, 247, .05) }

/* Compare Grid */
.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 32px 0;
}

.compare-card {
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: 16px;
    padding: 28px;
}

.compare-card.bad { border-color: rgba(239, 68, 68, .3); }
.compare-card.good { border-color: rgba(168, 85, 247, .3); }
.compare-card h3 { font-size: 1rem; margin-bottom: 12px; color: var(--lp-text); }
.compare-card.bad h3 { color: #EF4444; }
.compare-card.good h3 { color: var(--lp-primary); }
.compare-card p { color: var(--lp-text2); font-size: .9rem; margin-bottom: 8px; }

/* Chat Demo */
.chat-demo {
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: 16px;
    padding: 24px;
    margin: 20px 0;
    max-width: 600px;
}
.chat-msg {
    padding: 10px 16px;
    border-radius: 12px;
    margin-bottom: 10px;
    font-size: .9rem;
    max-width: 85%;
}
.chat-msg.ai {
    background: rgba(168, 85, 247, .1);
    color: var(--lp-text);
    border-bottom-left-radius: 4px;
}
.chat-msg.user {
    background: rgba(59, 130, 246, .15);
    color: var(--lp-text);
    margin-left: auto;
    text-align: right;
    border-bottom-right-radius: 4px;
}
.chat-msg .sender { font-size: .7rem; font-weight: 600; margin-bottom: 4px; }
.chat-msg .sender.ai-name { color: var(--lp-primary); }
.chat-msg .sender.user-name { color: #3B82F6; }
.chat-context {
    font-size: .7rem;
    color: var(--lp-primary);
    font-style: italic;
    padding: 6px 12px;
    margin-bottom: 12px;
    border-left: 3px solid var(--lp-primary);
}

/* Inbox Demo */
.inbox-demo {
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: 16px;
    padding: 20px;
    margin: 24px 0;
}
.inbox-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    border-bottom: 1px solid rgba(168, 85, 247, .08);
    font-size: .9rem;
}
.inbox-item:last-child { border-bottom: none; }
.inbox-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; }
.inbox-icon.whatsapp { background: rgba(37, 211, 102, .15); }
.inbox-icon.instagram { background: rgba(224, 64, 251, .15); }
.inbox-name { font-weight: 600; color: var(--lp-text); }
.inbox-preview { color: var(--lp-text2); font-size: .8rem; margin-top: 2px; }
.inbox-meta { color: var(--lp-text2); font-size: .7rem; margin-top: 2px; font-style: italic; }
.inbox-time { color: var(--lp-text2); font-size: .75rem; margin-left: auto; flex-shrink: 0; text-align: right; }
.inbox-badge { background: var(--lp-primary); color: #fff; font-size: .65rem; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.inbox-ai { font-size: .65rem; color: #10B981; font-weight: 600; }

/* Flow Diagram & Platforms (Hotmart/Insta) */
.flow-diagram { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 32px 0; flex-wrap: wrap; }
.flow-box { background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: 12px; padding: 16px 20px; text-align: center; font-size: .85rem; font-weight: 600; color: var(--lp-text); }
.flow-arrow { color: var(--lp-primary); font-size: 1.2rem; }

.platforms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0; }
.platform-card { background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: 12px; padding: 20px 16px; text-align: center; font-size: .85rem; color: var(--lp-text); }
.platform-card .emoji { font-size: 1.5rem; margin-bottom: 8px; display: block; }

.event-card { background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: 16px; padding: 24px; margin-bottom: 12px; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.event-emoji { font-size: 1.5rem; }
.event-name { font-weight: 600; color: var(--lp-text); font-size: .95rem; }
.event-desc { color: var(--lp-text2); font-size: .85rem; margin-top: 4px; }
.event-action { color: var(--lp-primary); font-size: .8rem; font-weight: 600; text-align: right; }

/* Kanban Demo (Já Tinha) */
.kanban-demo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0; }
.kanban-col { background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: 12px; padding: 16px; min-height: 180px; }
.kanban-col h4 { font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; color: var(--lp-text2); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--lp-border); }
.kanban-card { background: rgba(59, 130, 246, .08); border: 1px solid rgba(59, 130, 246, .15); border-radius: 8px; padding: 10px; margin-bottom: 8px; font-size: .8rem; }
.kanban-card .name { font-weight: 600; color: var(--lp-text); }
.kanban-card .info { color: var(--lp-text2); font-size: .7rem; margin-top: 4px; }
.kanban-card .tag { display: inline-block; font-size: .6rem; padding: 2px 6px; border-radius: 4px; margin-top: 4px; }
.kanban-card .tag-hot { background: rgba(239, 68, 68, .15); color: #EF4444; }
.kanban-card .tag-warm { background: rgba(234, 179, 8, .15); color: #EAB308; }
.kanban-card .tag-new { background: rgba(59, 130, 246, .15); color: #3B82F6; }

/* Stats Grid */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 32px 0; }
.stat-card { background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: 16px; padding: 24px; text-align: center; }
.stat-number { font-size: 2rem; font-weight: 800; color: var(--lp-primary); }
.stat-label { font-size: .85rem; color: var(--lp-text2); margin-top: 4px; }

/* FAQ Item */
.faq-item { border-bottom: 1px solid var(--lp-border); padding: 20px 0; }
.faq-item h3 { font-size: 1.05rem; margin-bottom: 8px; color: var(--lp-text); }
.faq-item p { color: var(--lp-text2); font-size: .95rem; }

/* Internal Links */
.internal-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; }
.internal-link { display: block; background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: 12px; padding: 16px; text-decoration: none; color: var(--lp-text); font-size: .9rem; font-weight: 500; transition: border-color .2s; }
.internal-link:hover { border-color: var(--lp-primary); }
.internal-link .arrow { color: var(--lp-primary); }

@media(max-width:640px) {
    .kanban-demo, .compare-grid, .platforms-grid, .stats-grid, .internal-links { grid-template-columns: 1fr; }
    .compare-table { font-size: .8rem; }
    .compare-table th, .compare-table td { padding: 10px 8px; }
    .flow-diagram { flex-direction: column; }
    .event-card { grid-template-columns: 1fr; }
    .lp-section { padding: 32px 0; }
}