/* =========================================================
   PROYECTOS — PORTADA

   Tarjetas en una fila que se desplaza. El ancho de cada una se fija
   en porcentaje del visor, asi que el numero de tarjetas visibles
   depende del tamano de pantalla y no hace falta calcularlo por
   guion: cinco en escritorio ancho, y va bajando.
========================================================= */

.cgpx{
    padding:54px 0 46px;
    background:#ffffff;
    font-family:Inter,Montserrat,Arial,sans-serif;
}

.cgpx-wrap{
    width:min(1240px,100%);
    margin:0 auto;
    padding:0 24px;
}

.cgpx-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:22px;
}

.cgpx-head h2{
    margin:0;
    color:#07150d;
    font-size:clamp(23px,2.1vw,29px);
    font-weight:600;
    letter-spacing:-.7px;
    line-height:1.18;
}

.cgpx-flechas{ display:flex; gap:8px; }

.cgpx-flecha{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid #dce3ea;
    border-radius:50%;
    background:#ffffff;
    color:#030e30;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    transition:background .2s, border-color .2s, opacity .2s;
}

.cgpx-flecha:hover{ background:#f4f6fb; border-color:#b7c7d8; }

.cgpx-flecha:disabled{ opacity:.32; cursor:default; }

/* El desplazamiento lo lleva el navegador: una fila que se arrastra,
   con anclaje para que las tarjetas no queden a medias. */
.cgpx-visor{ overflow:hidden; }

.cgpx-pista{
    display:flex;
    gap:18px;
    overflow-x:auto;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    padding-bottom:6px;
    scrollbar-width:none;
}

.cgpx-pista::-webkit-scrollbar{ display:none; }

.cgpx-card{
    flex:0 0 calc((100% - 4 * 18px) / 5);
    min-width:0;
    scroll-snap-align:start;
}

.cgpx-enlace{
    display:block;
    overflow:hidden;
    height:100%;
    border:1px solid #dce3ea;
    border-radius:16px;
    background:#ffffff;
    color:inherit;
    text-decoration:none;
    transition:border-color .2s, box-shadow .2s, transform .2s;
}

.cgpx-enlace:hover{
    border-color:#b7c7d8;
    box-shadow:0 14px 34px rgba(15,23,42,.10);
    transform:translateY(-3px);
}

.cgpx-foto{
    position:relative;
    aspect-ratio:4/3;
    overflow:hidden;
    background:#eef2f7;
}

.cgpx-foto img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

/* ---------------------------------------------------------
   ESTADO DEL PROYECTO

   Va sobre la foto, arriba a la derecha. Fondo claro translucido con
   desenfoque: se lee igual sobre cielo o sobre terreno, sin tapar la
   imagen con un rectangulo opaco.
--------------------------------------------------------- */
.cgpx-estado{
    position:absolute;
    top:10px;
    right:10px;
    z-index:2;
    padding:6px 12px;
    display:inline-flex;
    align-items:center;
    border:0;
    border-radius:999px;
    background:#64748b;
    color:#fff;
    font-size:11.5px;
    font-weight:500;
    letter-spacing:.2px;
    line-height:1;
    white-space:nowrap;
    box-shadow:0 2px 8px rgba(15,23,42,.22);
}

/* El color va en el fondo de la pastilla, no en un punto delante. */
.cgpx-estado-en-venta{background:#16a34a}
.cgpx-estado-pre-venta{background:#ea8a08}
.cgpx-estado-vendido{background:#dc2626}
.cgpx-estado-proximamente{background:#2563eb}

@media(max-width:520px){
    .cgpx-estado{
        top:8px;
        right:8px;
        padding:5px 9px;
        font-size:10.5px;
    }
}

.cgpx-sin-foto{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    color:#b7c7d8;
    font-size:30px;
}

.cgpx-cuerpo{ padding:14px 15px 16px; }

.cgpx-nombre{
    margin:0 0 7px;
    color:#0f172a;
    font-size:14.5px;
    font-weight:600;
    line-height:1.32;
}

.cgpx-lugar{
    display:flex;
    align-items:center;
    gap:6px;
    margin:0;
    color:#64748b;
    font-size:12.5px;
    font-weight:450;
}

.cgpx-lugar i{ color:#e0a104; font-size:11px; }

.cgpx-precio{
    margin:10px 0 0;
    color:#0f172a;
    font-size:14px;
    font-weight:600;
    font-variant-numeric:tabular-nums;
}

.cgpx-precio span{
    display:block;
    color:#94a3b8;
    font-size:10.5px;
    font-weight:500;
    letter-spacing:.4px;
    text-transform:uppercase;
}

@media(max-width:1250px){
    .cgpx-card{ flex-basis:calc((100% - 3 * 18px) / 4); }
}

@media(max-width:1000px){
    .cgpx-card{ flex-basis:calc((100% - 2 * 18px) / 3); }
}

@media(max-width:760px){
    .cgpx{ padding:38px 0 32px; }
    .cgpx-wrap{ padding:0 14px; }
    .cgpx-pista{ gap:12px; }
    .cgpx-card{ flex-basis:calc((100% - 12px) / 2); }
}

@media(max-width:520px){
    .cgpx-card{ flex-basis:82%; }
    .cgpx-flechas{ display:none; }
}