/* =============================================
   PROYECTO.CSS
   Todo prefijado con #proyecto para no
   interferir con ninguna otra sección
   ============================================= */

#proyecto {
    background-color: #F4F4F4;
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 100px 0;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    /* --- ENCABEZADO --- */
    #proyecto .section-heading-blueprint {
        width: 100%;
        text-align: center;
        padding: 0 0 50px;
        background: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #proyecto .section-kicker {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 5px;
        color: #E8B461;
        margin-bottom: 25px;
    }

        #proyecto .section-kicker::before,
        #proyecto .section-kicker::after {
            content: '';
            height: 1px;
            width: 40px;
            background: linear-gradient(to right, transparent, #E8B461);
            opacity: 0.4;
        }

    /* --- BLUEPRINT CONTAINER --- */
    #proyecto .blueprint-container {
        display: flex; /* ← esto faltaba */
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 20px;
        flex-wrap: nowrap;
    }

    #proyecto .blueprint-word {
        display: flex;
        gap: 10px;
        justify-content: center;
        flex-wrap: nowrap; /* Desktop: una sola línea por palabra */
    }

        /* --- ESTILO BASE DE LAS PLACAS --- */
        #proyecto .blueprint-word span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 60px;
            font-size: 1.3rem;
            font-weight: 900;
            color: #1B2632;
            background: #FFFFFF;
            box-shadow: 0 8px 15px rgba(0,0,0,0.05);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: none;
            cursor: default;
            user-select: none;
        }

    /* --- VARIACIÓN BLANCA --- */
    #proyecto .shape-topo-1,
    #proyecto .shape-plaza-1,
    #proyecto .shape-plaza-3,
    #proyecto .shape-block-1,
    #proyecto .shape-block-3,
    #proyecto .shape-block-5,
    #proyecto .shape-block-7 {
        background: #FFFFFF;
    }

    /* --- VARIACIÓN GRIS --- */
    #proyecto .shape-lote-1,
    #proyecto .shape-lote-2,
    #proyecto .shape-lote-3,
    #proyecto .shape-plaza-2,
    #proyecto .shape-block-2,
    #proyecto .shape-block-4,
    #proyecto .shape-block-6,
    #proyecto .shape-block-8 {
        background: #EBEBEB;
    }

    /* --- CLIP-PATHS --- */
    #proyecto [class*="shape-topo"] {
        clip-path: polygon(15% 0, 100% 10%, 85% 100%, 0 85%);
    }

    #proyecto [class*="shape-lote"] {
        clip-path: polygon(0 15%, 100% 0, 100% 85%, 0 100%);
    }

    #proyecto [class*="shape-plaza"] {
        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    }

    #proyecto .shape-block-1 {
        clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
    }

    #proyecto .shape-block-2 {
        clip-path: polygon(10% 0, 100% 20%, 90% 100%, 0 80%);
        box-shadow: inset 0 4px 8px rgba(0,0,0,0.05);
    }

    #proyecto .shape-block-3 {
        clip-path: polygon(25% 0%, 100% 10%, 100% 90%, 25% 100%, 0% 50%);
    }

    #proyecto .shape-block-4 {
        clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
        width: 45px;
    }

    #proyecto .shape-block-5 {
        clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    }

    #proyecto .shape-block-6 {
        clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%);
    }

    #proyecto .shape-block-7 {
        clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    }

    #proyecto .shape-block-8 {
        clip-path: polygon(0 0, 70% 0, 70% 70%, 100% 70%, 100% 100%, 0 100%);
    }

    /* --- HOVER --- */
    #proyecto .blueprint-word span:hover {
        transform: translateY(-5px) scale(1.05);
        background: #FDFBF7;
        color: #E8B461;
        box-shadow: 0 12px 25px rgba(0,0,0,0.08);
    }

    /* --- TARJETAS 4 COLUMNAS --- */
    #proyecto .project-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto 60px;
        padding: 0 20px;
    }

    #proyecto .card-premium {
        perspective: 1200px;
        background: transparent;
        position: relative;
    }

    #proyecto .card-3d-glass {
        border-radius: 20px;
        padding: 50px 30px;
        min-height: 280px;
        height: 100%;
        position: relative;
        overflow: hidden;
        transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        box-shadow: 0 10px 30px rgba(0,0,0,0.03);
        border: 1px solid rgba(255, 255, 255, 0.6);
        display: flex;
        flex-direction: column;
        gap: 20px;
        z-index: 2;
    }

    #proyecto .card-premium:hover .card-3d-glass {
        transform: translateY(-20px) rotateX(6deg) scale(1.01);
        box-shadow: 0 30px 60px rgba(0,0,0,0.08);
    }

    #proyecto .color-1 {
        background: linear-gradient(to bottom, rgba(232, 180, 97, 1) 0%, rgba(255, 255, 255, 0) 70%);
    }

    #proyecto .color-2 {
        background: linear-gradient(to bottom, rgba(246, 173, 85, 1) 0%, rgba(255, 255, 255, 0) 70%);
    }

    #proyecto .color-3 {
        background: linear-gradient(to bottom, rgba(99, 179, 237, 1) 0%, rgba(255, 255, 255, 0) 70%);
    }

    #proyecto .color-4 {
        background: linear-gradient(to bottom, #2C5282 0%, rgba(255, 255, 255, 0) 75%);
    }

    #proyecto .card-content p {
        font-size: 0.95rem;
        line-height: 1.7;
        color: #1B2632;
        margin: 0;
        font-weight: 500;
    }

    #proyecto .card-header-3d {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    #proyecto .card-icon-wrapper {
        width: 44px;
        height: 44px;
        background: #FFFFFF;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        flex-shrink: 0;
    }

    #proyecto .color-1 .card-icon-wrapper {
        color: #E8B461;
    }

    #proyecto .color-2 .card-icon-wrapper {
        color: #F6AD55;
    }

    #proyecto .color-3 .card-icon-wrapper {
        color: #63B3ED;
    }

    #proyecto .color-4 .card-icon-wrapper {
        color: #2C5282;
        background: #f0f4f8;
    }

    #proyecto .card-icon-wrapper svg {
        width: 24px;
        height: 24px;
    }

    #proyecto .card-header-3d h3 {
        font-size: 1.3rem;
        color: #1B2632;
        margin: 0;
        font-weight: 800;
    }

    #proyecto .card-shine {
        position: absolute;
        top: 0;
        left: -150%;
        width: 100%;
        height: 100%;
        background: linear-gradient(120deg, transparent, rgba(255,255,255,0.7), transparent);
        transition: none;
    }

    #proyecto .card-premium:hover .card-shine {
        left: 150%;
        transition: all 0.9s ease;
    }

    #proyecto .card-premium::after {
        content: '';
        position: absolute;
        bottom: -60px;
        left: 5%;
        width: 90%;
        height: 120px;
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.06) 0%, transparent 70%);
        border-radius: 50%;
        filter: blur(8px);
        z-index: 1;
        opacity: 0.7;
        transition: all 0.6s ease;
    }

    #proyecto .card-premium:hover::after {
        transform: translateY(10px) scaleX(1.05);
        opacity: 1;
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, transparent 75%);
    }

    /* --- HIGHLIGHTS 4 COLUMNAS --- */
    #proyecto .project-highlights {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    #proyecto .highlight-box {
        background: #FFFFFF;
        padding: 20px;
        border-radius: 100px;
        display: flex;
        align-items: center;
        gap: 15px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.03);
    }

    #proyecto .highlight-icon {
        width: 44px;
        height: 44px;
        background: rgba(232, 180, 97, 0.1);
        color: #E8B461;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    #proyecto .highlight-text {
        display: flex;
        flex-direction: column;
        text-align: left;
    }

        #proyecto .highlight-text span {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #E8B461;
            font-weight: 800;
        }

        #proyecto .highlight-text strong {
            font-size: 0.9rem;
            color: #1B2632;
            font-weight: 700;
            line-height: 1.2;
        }

/* =============================================
   RESPONSIVE — 1080px: 2 columnas
   ============================================= */
@media (max-width: 1080px) {
    #proyecto .project-grid,
    #proyecto .project-highlights {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* =============================================
   RESPONSIVE — TABLET 768px
   ============================================= */
@media (max-width: 768px) {

    #proyecto {
        padding: 60px 0;
    }

        /* Título: IDENTIDAD en fila 1, REGIONAL en fila 2 */
        #proyecto .blueprint-container {
            flex-direction: column;
            gap: 10px;
        }

        #proyecto .blueprint-word {
            flex-wrap: wrap; /* permite romper si no entra */
            justify-content: center;
            gap: 6px;
        }

            #proyecto .blueprint-word span {
                width: 34px;
                height: 42px;
                font-size: 0.9rem;
            }

        /* shape-block-4 tiene width fijo — lo reseteamos en mobile */
        #proyecto .shape-block-4 {
            width: 34px;
        }

        /* Tarjetas: 2 columnas */
        #proyecto .project-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            padding: 0 16px;
            margin-bottom: 40px;
        }

        #proyecto .card-3d-glass {
            padding: 30px 20px;
            min-height: 220px;
            border-radius: 16px;
            gap: 14px;
        }

        #proyecto .card-header-3d h3 {
            font-size: 1.1rem;
        }

        #proyecto .card-content p {
            font-size: 0.85rem;
            line-height: 1.6;
        }

        #proyecto .card-icon-wrapper {
            width: 36px;
            height: 36px;
            border-radius: 10px;
        }

            #proyecto .card-icon-wrapper svg {
                width: 20px;
                height: 20px;
            }

        #proyecto .card-premium::after {
            display: none;
        }

        /* Highlights: 2 columnas */
        #proyecto .project-highlights {
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            padding: 0 16px;
        }

        #proyecto .highlight-box {
            border-radius: 16px; /* en mobile pill → card más compacta */
            padding: 14px 16px;
            gap: 12px;
        }

        #proyecto .highlight-icon {
            width: 36px;
            height: 36px;
            flex-shrink: 0;
        }

        #proyecto .highlight-text span {
            font-size: 0.6rem;
        }

        #proyecto .highlight-text strong {
            font-size: 0.82rem;
        }
}

/* =============================================
   RESPONSIVE — MOBILE PEQUEÑO 420px
   ============================================= */
@media (max-width: 420px) {

    #proyecto {
        padding: 50px 0;
    }

        #proyecto .blueprint-word span {
            width: 28px;
            height: 36px;
            font-size: 0.75rem;
        }

        #proyecto .shape-block-4 {
            width: 28px;
        }

        #proyecto .project-grid {
            gap: 12px;
            padding: 0 12px;
        }

        #proyecto .card-3d-glass {
            padding: 24px 16px;
            min-height: 190px;
        }

        #proyecto .card-header-3d h3 {
            font-size: 1rem;
        }

        #proyecto .card-content p {
            font-size: 0.8rem;
        }

        #proyecto .project-highlights {
            gap: 10px;
            padding: 0 12px;
        }

        #proyecto .highlight-box {
            padding: 12px 14px;
        }

        #proyecto .highlight-text strong {
            font-size: 0.78rem;
        }
}
@media (max-width: 768px) {

    /* ... tus reglas existentes ... */

    #proyecto .highlight-box {
        border-radius: 16px;
        padding: 12px 14px; /* ← menos padding interno */
        gap: 10px;
    }

    #proyecto .highlight-icon {
        width: 32px; /* ← más chico */
        height: 32px;
        flex-shrink: 0;
    }

        #proyecto .highlight-icon svg {
            width: 16px; /* ← icono más chico dentro */
            height: 16px;
        }

    #proyecto .highlight-text span {
        font-size: 0.58rem;
        letter-spacing: 0.5px;
    }

    #proyecto .highlight-text strong {
        font-size: 0.80rem;
    }
}