/* --- Modelo Page Styles --- */

.hero {
    border-bottom: 1px solid var(--border-color);
}

.comparison-section {
    padding: 6rem 0;
    background-color: var(--bg-body);
    border-bottom: 1px solid var(--border-color);
}

.comparison-grid {
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .comparison-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

.comp-card {
    position: relative;
    border-radius: 0.5rem;
    padding: 2.5rem;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

/* Red Card - Traditional Agency */
.comp-card-bad {
    background-color: rgba(255, 77, 77, 0.02);
}

/* Green Card - Nykniu Model */
.comp-card-good {
    background-color: var(--bg-card);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

/* Top indicator bar */
.comp-card-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
}

.comp-card-bar-red {
    background-color: #ff4d4d; /* pure red tones */
}

.comp-card-bar-green {
    background-color: var(--emerald-500);
}

.comp-title {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.comp-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.comp-list li:last-child {
    margin-bottom: 0;
}

.comp-list h4 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: white;
}

.comp-list p {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.icon-box {
    flex-shrink: 0;
    padding: 0.25rem;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-box-red {
    background-color: rgba(255, 77, 77, 0.1);
    color: #ff4d4d;
}

.icon-box-green {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--emerald-500);
}

  /* --- Methodology BEOF Section --- */
        .methodology { padding: 6rem 0; background-color: var(--bg-section); border-top: 1px solid var(--border-color); }
        .meth-header { text-align: center; margin-bottom: 4rem; max-width: 48rem; margin-left: auto; margin-right: auto; }
        .meth-header h2 { font-size: 2rem; margin-bottom: 1rem; }
        
        .steps-grid {
            display: grid;
            gap: 2rem;
            position: relative;
        }
        @media (min-width: 768px) { 
            .steps-grid { grid-template-columns: repeat(3, 1fr); } 
            .steps-grid::before {
                content: '';
                position: absolute;
                top: 2rem;
                left: 10%;
                right: 10%;
                height: 1px;
                background: dashed 1px var(--border-color);
                z-index: 0;
            }
        }

        .step-card {
            background-color: var(--bg-card);
            border: 1px solid var(--border-color);
            padding: 2rem;
            border-radius: 0.5rem;
            position: relative;
            z-index: 1;
        }
        .step-number {
            width: 3rem;
            height: 3rem;
            background-color: var(--blue-600);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            border: 4px solid var(--bg-section);
        }
        .step-card h3 { font-size: 1.25rem; margin-bottom: 1rem; }
        .step-card p { font-size: 0.875rem; color: var(--text-muted); }

        /* --- Execution Features --- */
        .features-grid {
            display: grid;
            gap: 2rem;
            margin-top: 5rem;
            border-top: 1px solid var(--border-color);
            padding-top: 5rem;
        }
        @media (min-width: 768px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
        
        .feat-item { display: flex; gap: 1.5rem; }
        .feat-icon { color: var(--blue-500); }
        .feat-text h4 { font-size: 1.125rem; margin-bottom: 0.5rem; }
        .feat-text p { font-size: 0.875rem; color: var(--text-muted); }

                /* --- CTA --- */
        .cta-box {
            margin: 6rem auto;
            max-width: 48rem;
            background: linear-gradient(to bottom right, var(--bg-card), #0d1629);
            border: 1px solid var(--blue-600);
            border-radius: 0.5rem;
            padding: 4rem 2rem;
            text-align: center;
        }
        .cta-box h2 { font-size: 2rem; margin-bottom: 1rem; }
        .cta-box p { color: var(--text-muted); margin-bottom: 2.5rem; font-size: 1.125rem; }
        
        .cta-box .btn-primary {
            background-color: var(--blue-600);
            color: white;
            padding: 1rem 2rem;
            border-radius: 0.375rem;
            font-size: 1rem;
            font-weight: 600;
            transition: background-color 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        .cta-box .btn-primary:hover { background-color: var(--blue-700); }