html, body { overflow-x: hidden !important; max-width: 100vw; }
    *, *::before, *::after { box-sizing: border-box; }

    /* Container nao pode ultrapassar viewport */
    .container { max-width: min(1280px, 100%) !important; }

    /* Imagens nunca extrapolam */
    img, video, iframe, embed, object {
        max-width: 100% !important;
        height: auto;
    }

    /* Tabelas viram scroll horizontal em vez de empurrar layout */
    table {
        max-width: 100% !important;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Codigo/PRE quebram linha em vez de esticar */
    pre, code {
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important;
        max-width: 100%;
    }

    /* URLs longas e palavras absurdas quebram */
    p, li, blockquote, h1, h2, h3, h4, h5, h6, span, a {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* iFrame de video (YouTube etc) responsivo */
    .article-body iframe,
    .article-content iframe,
    main iframe[src*="youtube"],
    main iframe[src*="vimeo"] {
        width: 100% !important;
        aspect-ratio: 16/9;
        height: auto !important;
        border-radius: 12px;
    }

    /* Float da capa no mobile vira block (nao espreme texto) */
    @media (max-width: 720px) {
        .article-cover-float,
        .article-with-cover .article-cover-float {
            float: none !important;
            margin: 0 0 16px !important;
            max-width: 100% !important;
            width: 100%;
        }
        /* Padding lateral apertado em mobile */
        .container,
        .article-wrap,
        .home-shell,
        .page-wrap > .container { padding-left: 14px; padding-right: 14px; }
        /* Tabela vira card scrollavel com indicador visivel */
        .article-body table { font-size: .88rem; }
        /* Reduz tipografia exagerada */
        h1 { font-size: clamp(1.5rem, 5vw, 2.2rem) !important; }
        h2 { font-size: clamp(1.2rem, 4vw, 1.7rem) !important; }
    }

    /* Layout home: vira coluna unica em tablet/celular */
    @media (max-width: 960px) {
        .layout-home,
        .article-wrap {
            grid-template-columns: 1fr !important;
            gap: 20px !important;
        }
        .article-side,
        .sidebar-col {
            position: static !important;
        }
    }

    /* Carrosel home: respeita largura */
    @media (max-width: 720px) {
        .featured-carousel,
        .featured-slide {
            grid-template-columns: 1fr !important;
            min-height: auto !important;
        }
        .featured-media { min-height: 220px !important; }
    }

    /* Stack de cards horizontais vira vertical no celular */
    @media (max-width: 640px) {
        .post-card-horizontal {
            grid-template-columns: 1fr !important;
            height: auto !important;
        }
        .thumb-horizontal { height: 200px !important; }
    }

    /* Editorial grid: 1 coluna no celular */
    @media (max-width: 720px) {
        .editorial-grid { grid-template-columns: 1fr !important; }
    }

    /* Footer responsivo */
    @media (max-width: 720px) {
        .footer-grid {
            grid-template-columns: 1fr !important;
            gap: 24px !important;
        }
    }