/* =========================================================
   ANDAMIO CODE · MOBILE APP LAYER — PROYECTOS
   ========================================================= */
@media (max-width: 767px) {

    main.container { padding: calc(var(--app-bar-h) + var(--app-safe-top) + 26px) 12px 0; }

    .projects-hero { max-width: none; margin: 0 6px 20px; padding: 0; text-align: left; }
    .projects-hero h1 { font-size: clamp(2.05rem, 9.4vw, 2.6rem); line-height: 1.04; letter-spacing: -0.04em; margin-bottom: 12px; }
    .projects-hero h1 .text-gradient { display: block; }
    .projects-hero p { font-size: 14.5px; line-height: 1.6; }

    .bento-grid { gap: 14px; padding: 0; }

    /* Tarjeta de feed */
    .project-card {
        border-radius: 24px;
        background: var(--app-surface);
        border-color: var(--app-line);
    }

    .project-card:hover { transform: none; border-color: var(--app-line); }

    .project-visual,
    .project-card.span-3 .project-visual {
        aspect-ratio: 16 / 10;
        margin: 8px 8px 0;
        border-radius: 18px;
        background: var(--color-surface-2);
    }

    .carousel-arrow { width: 34px; height: 34px; background: rgba(6, 8, 16, 0.6); }
    .carousel-arrow svg { width: 16px; height: 16px; }
    .carousel-prev { left: 8px; }
    .carousel-next { right: 8px; }
    .carousel-dot { width: 22px; height: 30px; padding-bottom: 8px; }

    .card-body { padding: 16px 16px 14px; }

    .card-tags { gap: 6px; margin-bottom: 12px; }

    .card-tags .tag {
        padding: 4px 10px;
        font-size: 10.5px;
        color: var(--app-muted);
        background: var(--app-surface-2);
        border: 1px solid var(--app-line);
    }

    .card-tags .tag:first-child { color: var(--app-cyan); background: var(--color-accent-soft); border-color: var(--color-accent-soft); }

    .card-body h3 { font-size: 21px; letter-spacing: -0.025em; margin-bottom: 8px; }

    /* Descripción resumida a 3 líneas hasta tocar "Ver más" */
    .card-body .desc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        margin-bottom: 4px;
        font-size: 13.5px;
        line-height: 1.6;
    }

    .card-body:has(.btn-more.is-expanded) .desc { -webkit-line-clamp: unset; display: block; }

    .btn-more { margin-bottom: 2px; padding: 0; font-size: 11px; }

    .desc-list li { font-size: 13px; }

    /* Footer de tarjeta: estado + CTA en pill */
    .card-footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding-top: 14px;
        font-size: 10.5px;
    }

    .card-footer > span { display: inline-flex; align-items: center; gap: 8px; }

    .card-footer > span::before {
        content: '';
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--app-green);
        box-shadow: 0 0 8px var(--app-green);
    }

    .card-footer .cta {
        min-height: 40px;
        padding: 0 16px;
        font-size: 11px;
        color: var(--color-on-accent);
        border: 0;
        border-radius: 999px;
        background: var(--app-grad);
        box-shadow: 0 8px 20px var(--shadow-color);
    }

    .project-card:hover .card-footer .cta,
    .card-footer .cta:hover { color: var(--color-on-accent); }

    .card-footer .cta:active { transform: scale(0.95); }
}