/* ── Homepage Styles ── */

/* Hero */
.hero { padding-top: calc(var(--header-height) + var(--space-16)); }
.hero__content {
    display: grid; grid-template-columns: 3fr 7fr; gap: var(--space-12); align-items: center;
}
.hero__left { display: flex; flex-direction: column; gap: var(--space-6); }
.hero__logo { margin-left: -6px; /* optical alignment with text */ }
.hero__logo--light { display: none; }
:root[data-theme="light"] .hero__logo--dark { display: none; }
:root[data-theme="light"] .hero__logo--light { display: block; }

.hero__tagline {
    font-size: var(--text-sm); font-weight: var(--font-medium);
    color: var(--color-primary); letter-spacing: 0.02em;
}
.hero__title { font-size: var(--text-display); line-height: 1.1; }
.hero__subtitle {
    font-size: var(--text-lg); color: var(--color-text-secondary); line-height: 1.7; max-width: 560px;
}
.hero__ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; }


/* ── Hero Visual: Phones + Proof Bar ── */
.hero__visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Hero Form (below hero) ── */
.hero-form-section { padding-top: 0; }
.hero-form-wrapper {
    max-width: 640px;
    margin: 0 auto;
}
.hero__phones {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    will-change: transform;
    transition: transform 0.1s linear;
}

/* Proof Bar — Glassmorphism overlay */
.hero__proof {
    display: flex; align-items: center; gap: var(--space-8);
    padding: var(--space-6) var(--space-8);
    background: rgba(15, 20, 25, 0.55);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    margin-top: -60px;
    position: relative;
    z-index: 2;
    will-change: transform;
    transition: transform 0.1s linear;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
:root[data-theme="light"] .hero__proof {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(16, 24, 40, 0.08);
    box-shadow: 0 8px 32px rgba(16, 24, 40, 0.1);
}

.proof-item { text-align: center; flex: 1; min-width: 0; }
.proof-number {
    display: block; font-size: var(--text-xl); font-weight: var(--font-extrabold);
    color: var(--color-primary); white-space: nowrap;
}
.proof-label { font-size: var(--text-xs); color: var(--color-text-muted); }
.proof-divider { width: 1px; height: 40px; background: var(--color-border); flex-shrink: 0; }

/* ── Pain Cards — Red Blink ── */
@keyframes blink-red {
    0%, 85%, 100% { background: var(--color-bg-card); border-color: var(--color-border); }
    90% { background: rgba(253, 98, 99, 0.06); border-color: rgba(253, 98, 99, 0.2); }
}
.pain-card {
    animation: blink-red var(--blink-dur, 6s) var(--blink-delay, 0s) infinite ease-in-out;
}

/* Franchise Banner */
.franchise-banner {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-12); align-items: center;
    padding: var(--space-12);
    background: var(--color-bg-card); border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
}
.franchise-banner__content { display: flex; flex-direction: column; gap: var(--space-4); }
.franchise-banner__content .badge { align-self: flex-start; }
.franchise-banner__content h3 { font-size: var(--text-3xl); }
.franchise-banner__content p { font-size: var(--text-base); color: var(--color-text-secondary); }

/* CTA Section */
.cta-section { text-align: center; }
.cta-block { max-width: 760px; margin: 0 auto; }
.cta-block h2 { margin-bottom: var(--space-6); }
.cta-block p { font-size: var(--text-lg); color: var(--color-text-secondary); margin-bottom: var(--space-8); }

/* Ecossistema Module Icons */
.module-icon-img {
    width: 56px; height: 56px; object-fit: contain;
    border-radius: var(--radius-sm);
}

/* Problema section — darker gradient */
#problema {
    background: linear-gradient(160deg, #080b12 0%, #111828 40%, #0d1420 70%, #0a0f18 100%);
    border-radius: var(--radius-2xl);
    margin: var(--space-4) auto;
    max-width: var(--container-wide);
}
:root[data-theme="light"] #problema {
    background: linear-gradient(160deg, #e8ecf2 0%, #dde3ed 40%, #e2e8f0 70%, #eaeff5 100%);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .hero__content { grid-template-columns: 1fr; }
    .hero__proof { gap: var(--space-4); }
    .franchise-banner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .hero { padding-top: calc(var(--header-height) + var(--space-8)); }
    .hero__title { font-size: var(--text-4xl); }
    .hero__proof { flex-direction: column; gap: var(--space-4); padding: var(--space-5); margin-top: -40px; }
    .proof-divider { width: 60px; height: 1px; }
    .franchise-banner { padding: var(--space-6); }
}