@media (max-width: 1024px) {
    .app-shell {
        max-width: 860px;
        padding: 0 24px;
    }

    .grid-container {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (max-width: 768px) {
    body {
        padding-left: 0;
        padding-right: 0;
    }

    .app-shell {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0 12px;
        gap: 12px;
    }

    .app-header {
        grid-template-columns: 56px 1fr 56px;
        gap: 10px;
        padding: 12px 16px;
        border-radius: 0 0 20px 20px;
        border-left: 1px solid var(--glass-outline);
        border-right: 1px solid var(--glass-outline);
    }

    .header-title {
        font-size: 1.6rem;
    }

    .content-container {
        width: 100%;
        padding: 0;
        border-left: none;
        border-right: none;
    }

    .presentacion-embed {
        border-radius: 0;
    }

    .podcast-card,
    .presentacion-card,
    .infografia-card {
        border-radius: 14px;
    }

    .global-audio-player {
        width: calc(100% - 20px);
        padding: 10px;
        gap: 12px;
    }

    .global-audio-core {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .global-audio-controls {
        justify-content: center;
    }

    .global-audio-slider,
    .global-audio-marquee {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 425px) {
    body {
        padding: 0 0 48px;
    }

    .app-shell {
        padding: 0 10px;
    }

    .app-header {
        grid-template-columns: 52px 1fr 52px;
        gap: 8px;
        padding: 12px 14px;
    }

    .grid-container {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .card,
    .podcast-card,
    .presentacion-card,
    .infografia-card {
        padding: 12px;
    }

    .shortcuts-panel {
        padding: 8px 12px;
    }

    .podcast-controls {
        gap: 6px;
    }
}

@media (max-width: 375px) {
    .header-title {
        font-size: 1.4rem;
    }

    .app-header {
        grid-template-columns: 48px 1fr 48px;
        padding: 10px 12px;
    }

    .primary-button,
    .secondary-button {
        padding: 12px 14px;
        font-size: 0.95rem;
    }

    .shortcut-card {
        padding: 6px 12px;
    }
}

@media (max-width: 320px) {
    .app-shell {
        padding: 0 8px;
    }

    .grid-container {
        gap: 10px;
    }

    .podcast-button,
    .presentacion-link,
    .infografia-link {
        padding: 6px 12px;
        font-size: 0.85rem;
    }

    .audio-button {
        width: 40px;
        height: 40px;
    }
}