/* ═══════════════════════════════════════════════════
   MOBILE FIXES — Unificado para todas as páginas
   Flex / Ansiedade / Empreendedor
   ═══════════════════════════════════════════════════ */
:root {
    --touch-target: 48px;
    --spacing-mobile: clamp(1rem, 5vw, 2rem);
    --font-base-mobile: clamp(0.95rem, 3.8vw, 1.1rem);
    --hero-title: clamp(2rem, 8vw, 3.5rem);
    --section-title: clamp(1.6rem, 5.5vw, 2.5rem);
}

h1, h2, .h-hero, .h-section {
    font-weight: 900 !important;
    letter-spacing: -0.025em !important;
}

/* ═══ MOBILE ═══ */
@media (max-width: 767px) {

    /* ── Spacing ── */
    .container, .mx-auto,
    [style*="max-width"] > [style*="padding"] {
        padding-left: var(--spacing-mobile) !important;
        padding-right: var(--spacing-mobile) !important;
    }

    /* ── Typography ── */
    p, li, .text-lg, .text-base, .text-xl, .t-body {
        font-size: var(--font-base-mobile) !important;
        line-height: 1.65 !important;
    }

    .t-sm {
        font-size: 0.88rem !important;
        line-height: 1.6 !important;
    }

    .h-hero {
        font-size: var(--hero-title) !important;
        line-height: 1.1 !important;
    }

    .h-section {
        font-size: var(--section-title) !important;
        line-height: 1.15 !important;
    }

    .h-sub {
        font-size: clamp(1rem, 4.2vw, 1.25rem) !important;
        line-height: 1.5 !important;
    }

    /* ── ALL GRIDS → single column ── */
    .grid-2col,
    .grid-3col,
    .grid-4col,
    [class*="grid-"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Force span-2 cards to span-1 on mobile */
    [style*="grid-column: span 2"],
    [style*="grid-column: span"] {
        grid-column: span 1 !important;
    }

    /* ── Comparison section fix (ansiedade) ── */
    .comparison-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .comparison-grid .vs-divider {
        display: none !important;
    }

    /* ── Badge fix — prevent ugly wrapping ── */
    .badge {
        padding: 0.45rem 1rem !important;
        max-width: 92vw !important;
    }
    .badge .t-label {
        font-size: 0.58rem !important;
        letter-spacing: 0.06em !important;
        text-align: center !important;
        line-height: 1.4 !important;
    }

    /* ── Nav ── */
    .nav-links {
        display: none !important;
    }

    /* ── Touch targets ── */
    button, a.btn-cta, a.btn-primary {
        min-height: var(--touch-target) !important;
        padding: 14px 24px !important;
    }

    /* ── Cards ── */
    .card, .cena-card, .frase-card, .mecanismo-card {
        padding: 1.4rem !important;
        overflow: hidden !important;
        word-wrap: break-word !important;
    }

    /* ── Recognition quote ── */
    .recognition-quote {
        font-size: 1.1rem !important;
        padding: 0.75rem 0 !important;
    }

    /* ── Accordion ── */
    .accordion-trigger {
        padding: 1rem !important;
        font-size: 0.88rem !important;
    }
    .accordion-content {
        padding: 0 1rem !important;
        font-size: 0.88rem !important;
    }
    .accordion-content.active {
        padding: 0.4rem 1rem 1rem !important;
    }

    /* ── Sections spacing ── */
    .section-dark, .section-light {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    .cta-inline {
        padding: 3rem 0 !important;
    }

    /* ── Hero inner ── */
    .hero-inner {
        gap: 0 !important;
    }

    /* ── Sticky CTA ── */
    .sticky-cta-mobile {
        padding: 0.6rem 1rem !important;
        padding-bottom: calc(0.6rem + env(safe-area-inset-bottom)) !important;
    }

    /* ── Sensações tags ── */
    [style*="flex-wrap: wrap"] span {
        font-size: 0.82rem !important;
        padding: 0.5rem 1rem !important;
    }

    /* ── Stats counters ── */
    [data-counter-group] {
        gap: 2rem !important;
    }

    /* ── Consequences grid (ansiedade) ── */
    .consequences-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ═══ SMALL PHONES ═══ */
@media (max-width: 380px) {
    .badge .t-label {
        font-size: 0.45rem !important;
        letter-spacing: 0.04em !important;
    }
    .h-hero {
        font-size: 1.75rem !important;
    }
    .h-section {
        font-size: 1.4rem !important;
    }
}