/**
 * ECOS DESIGN SYSTEM — Section: Authority / Features / Stats
 * Classes: .ecos-authority | .ecos-stats-bar | .ecos-features
 *
 * AGENT_GUIDE: Seção de credenciais + prova social + features/benefícios.
 * Normalmente vem após o Hero.
 * Combinar .ecos-authority (estatísticas) + .ecos-features (benefícios em grid)
 *
 * Estrutura .ecos-authority:
 *   <section class="ecos-authority">
 *     <div class="ecos-container">
 *       <div class="ecos-authority__stats">
 *         <div class="ecos-stat">...</div>
 *       </div>
 *     </div>
 *   </section>
 *
 * Estrutura .ecos-features:
 *   <section class="ecos-features">
 *     <div class="ecos-container">
 *       <div class="ecos-section-header">...</div>
 *       <div class="ecos-grid ecos-grid--3">
 *         <div class="ecos-card ecos-feature-card">...</div>
 *       </div>
 *     </div>
 *   </section>
 *
 * Ref: AGENT_GUIDE.md#sections | primitives/stat-signature.css
 */

/* ===================== SECTION HEADER ===================== */
/* Padrão reutilizável para iniciar qualquer seção */

.ecos-section-header {
    margin-bottom: var(--ecos-space-12);
    display: flex;
    flex-direction: column;
    gap: var(--ecos-space-4);
}

.ecos-section-header--center {
    text-align: center;
    align-items: center;
}

.ecos-section-header__eyebrow {
    font-size: var(--ecos-text-xs);
    font-weight: var(--ecos-font-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ecos-color-accent);
}

.ecos-section-header__title {
    font-family: var(--ecos-font-display);
    font-size: clamp(var(--ecos-text-3xl), 4vw, var(--ecos-text-5xl));
    font-weight: var(--ecos-font-black);
    color: var(--ecos-color-text);
    line-height: var(--ecos-leading-tight);
    letter-spacing: -0.02em;
    max-width: 22ch;
}

.ecos-section-header__title strong {
    color: var(--ecos-color-accent);
}

.ecos-section-header__description {
    font-size: var(--ecos-text-lg);
    color: var(--ecos-color-text-muted);
    line-height: var(--ecos-leading-relaxed);
    max-width: 55ch;
}

/* ===================== AUTHORITY — STATS BAR ===================== */

.ecos-authority {
    padding-block: var(--ecos-space-16);
    border-block: 1px solid var(--ecos-color-border-subtle);
}

.ecos-authority__stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--ecos-space-12);
}

.ecos-authority__stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

/* Separador vertical entre stats */
.ecos-authority__stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: calc(-1 * var(--ecos-space-6));
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--ecos-color-border);
}

@media (max-width: 640px) {
    .ecos-authority__stat-item::after {
        display: none;
    }

    .ecos-authority__stats {
        gap: var(--ecos-space-8);
    }
}

/* ===================== FEATURES ===================== */

.ecos-features {
    padding-block: var(--ecos-space-20);
}

.ecos-feature-card {
    display: flex;
    flex-direction: column;
    gap: var(--ecos-space-4);
    padding: var(--ecos-space-6);
    background: var(--ecos-color-glass-bg);
    border: 1px solid var(--ecos-color-glass-border);
    border-radius: var(--ecos-radius-xl);
    transition: transform var(--ecos-transition), box-shadow var(--ecos-transition);
}

.ecos-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ecos-shadow-lg);
    border-color: var(--ecos-color-primary);
}

.ecos-feature-card__icon {
    width: 3rem;
    height: 3rem;
    background: var(--ecos-color-primary-light);
    border-radius: var(--ecos-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ecos-text-2xl);
    color: var(--ecos-color-primary);
    flex-shrink: 0;
}

.ecos-feature-card__title {
    font-size: var(--ecos-text-xl);
    font-weight: var(--ecos-font-semibold);
    color: var(--ecos-color-text);
    line-height: var(--ecos-leading-snug);
}

.ecos-feature-card__text {
    font-size: var(--ecos-text-base);
    color: var(--ecos-color-text-muted);
    line-height: var(--ecos-leading-relaxed);
}