/* ============================================================
   FEATURES (SOLUÇÕES / SOLUCIONES / SOLUTIONS) PAGE — stub styling
   Word-document reading flow: single column, title + image
   placeholder + paragraph stacked per feature.
   Uses .ft-* prefix to keep these rules isolated.
   ============================================================ */

/* HERO */
.ft-hero {
    background: linear-gradient(135deg, #4B2FBB 0%, #5B3EEE 60%, #6D52F0 100%);
    color: #fff;
    padding: 6rem 1.5rem 4rem;
    text-align: center;
    margin: -40px -40px 0;
}

.ft-hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 auto 1rem;
    max-width: 900px;
    color: #fff;
}

.ft-hero-sub {
    font-size: 1.05rem;
    max-width: 720px;
    margin: 0 auto;
    opacity: 0.85;
    line-height: 1.6;
}

/* PAGE BODY */
.ft-page, .ft-hero, .ft-page * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.ft-page {
    background: #fafafa;
    padding: 3rem 1rem 5rem;
}


/* Narrow reading column — Word-doc feel */
.ft-container {
    max-width: 820px;
    margin: 0 auto;
}

/* GROUP HEADERS */
.ft-group {
    margin: 3rem 0;
}

.ft-group > h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2e1db0;
    margin: 0 0 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e5ec;
}

/* INDIVIDUAL FEATURE — stacked title / image / text */
.ft-item {
    margin: 2.5rem 0;
}

.ft-item-tag {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #5A3EEB;
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}

.ft-item h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 1rem;
    line-height: 1.3;
}

.ft-item p {
    font-size: 1rem;
    color: #333;
    line-height: 1.7;
    margin: 1rem 0 0;
}

.ft-item.is-stub p {
    color: #999;
    font-style: italic;
}

/* IMAGE PLACEHOLDER — gray dashed box, half-width centered */
.ft-img-placeholder {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 16 / 9;
    background: repeating-linear-gradient(
        45deg,
        #ececf2,
        #ececf2 10px,
        #f5f5fa 10px,
        #f5f5fa 20px
    );
    border: 2px dashed #c5c5d2;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a8a9a;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    padding: 1rem;
    margin: 0;
}

.ft-img-placeholder::before {
    content: "📷  ";
    margin-right: 0.4rem;
}

/* ============================================================
   VIEW TOGGLE BUTTON (stub-time only — temporary while
   the user decides between doc-flow and card-grid layouts)
   ============================================================ */
.ft-view-toggle {
    text-align: right;
    margin: 0 0 1.5rem;
}

.ft-view-btn {
    background: #fff;
    border: 1px solid #d5d5e0;
    color: #5A3EEB;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ft-view-btn:hover {
    background: #f5f3ff;
    border-color: #b9a7f0;
}

/* ============================================================
   GRID MODE (.is-grid)
   Cards in a responsive 1 → 2 → 3 column grid.
   Image placeholders hidden, item paragraphs compact.
   ============================================================ */
.ft-container.is-grid {
    max-width: 1200px;
}

.ft-container.is-grid .ft-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 700px) {
    .ft-container.is-grid .ft-group {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ft-container.is-grid .ft-group {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ft-container.is-grid .ft-group > h2 {
    grid-column: 1 / -1;
    margin-bottom: 0.5rem;
}

.ft-container.is-grid .ft-item {
    background: #fff;
    border: 1px solid #e5e5ec;
    border-radius: 10px;
    padding: 1.25rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ft-container.is-grid .ft-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

.ft-container.is-grid .ft-item h3 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.ft-container.is-grid .ft-item p {
    font-size: 0.92rem;
    color: #555;
    margin: 0;
    line-height: 1.55;
}

.ft-container.is-grid .ft-img-placeholder {
    display: none;
}

.ft-container.is-grid .ft-cta {
    margin-top: 3rem;
}

/* CTA */
.ft-cta {
    background: linear-gradient(135deg, #5A3DEB 0%, #7c5ff5 100%);
    color: #fff;
    text-align: center;
    padding: 3rem 1.5rem;
    border-radius: 14px;
    margin-top: 4rem;
}

.ft-cta h2 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    margin: 0 0 1rem;
    color: #fff;
    border-bottom: none;
    padding-bottom: 0;
}

.ft-cta p {
    max-width: 600px;
    margin: 0 auto 1.5rem;
    opacity: 0.9;
}

.ft-cta-btn {
    display: inline-block;
    background: #fff;
    color: #2e1db0;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.ft-cta-btn:hover {
    transform: translateY(-1px);
    color: #2e1db0;
}

@media (max-width: 600px) {
    .ft-hero {
        margin: -16px -16px 0;
        padding: 4rem 1.5rem 3rem;
    }
}