/**
 * ECOS DESIGN SYSTEM — Section: CTA Block + FAQ
 * Classes: .ecos-cta-block | .ecos-faq
 *
 * AGENT_GUIDE:
 * .ecos-cta-block — bloco de chamada para ação final (fundo accent)
 * .ecos-faq — perguntas frequentes com accordion nativo HTML (<details>/<summary>)
 *
 * Estrutura CTA:
 *   <section class="ecos-cta-block">
 *     <div class="ecos-container ecos-cta-block__inner">
 *       <div class="ecos-cta-block__text">
 *         <h2 class="ecos-cta-block__title">...</h2>
 *         <p class="ecos-cta-block__subtitle">...</p>
 *       </div>
 *       <div class="ecos-cta-block__actions">
 *         <a class="ecos-button ecos-button--primary ecos-button--lg">Quero começar</a>
 *       </div>
 *     </div>
 *   </section>
 *
 * Estrutura FAQ:
 *   <section class="ecos-faq">
 *     <div class="ecos-container">
 *       <div class="ecos-section-header">...</div>
 *       <div class="ecos-faq__list">
 *         <details class="ecos-faq__item">
 *           <summary class="ecos-faq__question">Pergunta?</summary>
 *           <div class="ecos-faq__answer">Resposta...</div>
 *         </details>
 *       </div>
 *     </div>
 *   </section>
 *
 * Ref: AGENT_GUIDE.md#sections | sections/hero.css | sections/pricing.css
 */

/* ===================== CTA BLOCK ===================== */

.ecos-cta-block {
    padding-block: var(--ecos-space-20);
    background: var(--ecos-color-surface-2);
    position: relative;
    overflow: hidden;
}

/* Fundo com glow de accent */
.ecos-cta-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(196, 30, 58, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.ecos-cta-block--accent {
    background: var(--ecos-color-accent);
}

.ecos-cta-block--accent::before {
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
}

.ecos-cta-block--dark {
    background: var(--ecos-color-surface);
    border-block: 1px solid var(--ecos-color-border-subtle);
}

.ecos-cta-block__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ecos-space-8);
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.ecos-cta-block--centered .ecos-cta-block__inner {
    flex-direction: column;
    text-align: center;
    align-items: center;
}

.ecos-cta-block__text {
    display: flex;
    flex-direction: column;
    gap: var(--ecos-space-3);
    max-width: 40ch;
}

.ecos-cta-block__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;
}

.ecos-cta-block--accent .ecos-cta-block__title {
    color: #fff;
}

.ecos-cta-block__subtitle {
    font-size: var(--ecos-text-lg);
    color: var(--ecos-color-text-muted);
    line-height: var(--ecos-leading-relaxed);
}

.ecos-cta-block--accent .ecos-cta-block__subtitle {
    color: rgba(255, 255, 255, 0.85);
}

.ecos-cta-block__actions {
    display: flex;
    flex-direction: column;
    gap: var(--ecos-space-3);
    align-items: flex-start;
    flex-shrink: 0;
}

.ecos-cta-block--centered .ecos-cta-block__actions {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.ecos-cta-block__guarantee {
    font-size: var(--ecos-text-xs);
    color: var(--ecos-color-text-faint);
    display: flex;
    align-items: center;
    gap: var(--ecos-space-2);
}

@media (max-width: 768px) {
    .ecos-cta-block__inner {
        flex-direction: column;
        text-align: center;
    }

    .ecos-cta-block__text {
        max-width: none;
    }

    .ecos-cta-block__actions {
        align-items: center;
        width: 100%;
    }
}

/* ===================== FAQ ===================== */

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

.ecos-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--ecos-space-3);
    max-width: var(--ecos-max-width-text);
    margin-inline: auto;
}

.ecos-faq__item {
    background: var(--ecos-color-surface);
    border: 1px solid var(--ecos-color-border);
    border-radius: var(--ecos-radius-xl);
    overflow: hidden;
    transition: border-color var(--ecos-transition);
}

.ecos-faq__item[open] {
    border-color: var(--ecos-color-primary);
}

.ecos-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ecos-space-5) var(--ecos-space-6);
    font-size: var(--ecos-text-base);
    font-weight: var(--ecos-font-semibold);
    color: var(--ecos-color-text);
    cursor: pointer;
    list-style: none;
    gap: var(--ecos-space-4);
    transition: color var(--ecos-transition-fast);
    user-select: none;
}

.ecos-faq__question::-webkit-details-marker {
    display: none;
}

.ecos-faq__item[open] .ecos-faq__question {
    color: var(--ecos-color-primary);
}

.ecos-faq__question::after {
    content: '+';
    font-size: var(--ecos-text-2xl);
    font-weight: var(--ecos-font-normal);
    color: var(--ecos-color-text-muted);
    flex-shrink: 0;
    transition: transform var(--ecos-transition);
    line-height: 1;
}

.ecos-faq__item[open] .ecos-faq__question::after {
    content: '−';
    color: var(--ecos-color-primary);
}

.ecos-faq__answer {
    padding: 0 var(--ecos-space-6) var(--ecos-space-5);
    font-size: var(--ecos-text-base);
    color: var(--ecos-color-text-muted);
    line-height: var(--ecos-leading-relaxed);
    border-top: 1px solid var(--ecos-color-border-subtle);
}