/* =========================================================
   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; }
}

/* =========================================================
   NIVEL SUPERIOR (sin rayas)
   Tarjetas sin borde, separadas por sombra y fondo. Al pasar el
   mouse la tarjeta se eleva, la foto recorre la galeria con un
   fundido y aparece la pastilla con el numero de fotos y los puntos
   de posicion. Sin foto: el nombre sobre el azul de la marca.
========================================================= */
.cgpx{ font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
.cgpx-head h2{ color:#1d1d1f; font-weight:600; letter-spacing:-.02em; }
.cgpx-flecha{
    border:0;
    background:#f5f5f7;
    color:#1d1d1f;
    transition:background .2s ease, opacity .2s ease, transform .2s ease;
}
.cgpx-flecha:hover{ border:0; background:#e8e8ed; }
.cgpx-flecha:active{ transform:scale(.95); }
.cgpx-pista{ padding:6px 4px 22px; margin:-6px -4px 0; }
.cgpx-enlace{
    border:0;
    border-radius:20px;
    background:#fff;
    box-shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 22px rgba(0,0,0,.07);
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.cgpx-enlace:hover{
    border:0;
    transform:translateY(-6px);
    box-shadow:0 2px 4px rgba(0,0,0,.05), 0 20px 40px rgba(0,0,0,.14);
}
.cgpx-foto{ background:#e8e8ed; }
.cgpx-foto .cgpx-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transform:scale(1.001);
    transition:opacity .6s ease, transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.cgpx-foto .cgpx-img.is-visible{ opacity:1; }
.cgpx-enlace:hover .cgpx-img.is-visible{ transform:scale(1.05); }

/* "N fotos": se asoma al pasar el mouse; en el telefono esta siempre. */
.cgpx-galeria{
    position:absolute;
    left:10px;
    bottom:10px;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 10px;
    border-radius:999px;
    background:rgba(0,0,0,.55);
    color:#fff;
    font-size:11.5px;
    font-weight:500;
    backdrop-filter:saturate(180%) blur(12px);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    opacity:0;
    transform:translateY(6px);
    transition:opacity .3s ease, transform .3s ease;
}
.cgpx-galeria i{ font-size:11px; }
.cgpx-puntos{
    position:absolute;
    left:50%;
    bottom:12px;
    z-index:2;
    display:flex;
    gap:4px;
    transform:translateX(-50%);
    opacity:0;
    transition:opacity .3s ease;
}
.cgpx-puntos i{
    width:5px;
    height:5px;
    border-radius:50%;
    background:rgba(255,255,255,.55);
    transition:background .3s ease, transform .3s ease;
}
.cgpx-puntos i.is-actual{ background:#fff; transform:scale(1.3); }
.cgpx-enlace:hover .cgpx-galeria{ opacity:1; transform:none; }
.cgpx-enlace:hover .cgpx-puntos{ opacity:1; }
.cgpx-enlace:hover .cgpx-galeria{ left:10px; }
@media (hover:none){
    .cgpx-galeria{ opacity:1; transform:none; }
    .cgpx-puntos{ display:none; }
}
/* Con los puntos a la vista, la pastilla se corre para no chocar. */
@media (hover:hover){
    .cgpx-puntos{ left:auto; right:12px; transform:none; }
}

.cgpx-estado{ box-shadow:none; font-weight:600; }

/* Proyecto sin fotos: gris claro de Apple, icono de trazo fino y una
   leyenda discreta. El nombre ya va debajo, no se repite. */
.cgpx-sin-foto{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:linear-gradient(180deg, #f5f5f7 0%, #ececf0 100%);
    color:#aeaeb2;
    text-align:center;
}
.cgpx-sin-foto svg{ width:34px; height:34px; }
.cgpx-sin-foto span{ color:#86868b; font-size:12px; font-weight:500; letter-spacing:0; }

/* Estado: pastilla fina. */
.cgpx-estado{
    top:12px;
    right:12px;
    padding:4px 10px;
    font-size:11px;
    font-weight:500;
    letter-spacing:.01em;
}

/* La primera tarjeta no pierde su lado izquierdo ni la sombra: el visor
   deja aire alrededor en vez de recortar justo en el borde. */
.cgpx-visor{ overflow:hidden; margin:0 -12px; padding:0 12px; }
.cgpx-pista{ padding:8px 12px 24px; margin:-8px -12px 0; scroll-padding-left:12px; }

.cgpx-cuerpo{ padding:15px 16px 18px; }
.cgpx-nombre{ color:#1d1d1f; font-size:15px; letter-spacing:-.01em; }
.cgpx-lugar{ color:#86868b; font-size:12.5px; }
.cgpx-precio{ color:#1d1d1f; }
.cgpx-precio span{ color:#86868b; letter-spacing:.02em; }

/* ---------- Foto completa, sin recorte ----------
   Las fotos de los proyectos son 16:9 y el marco era 4:3: se perdian
   los costados (a una persona le cortaba el sombrero). El marco pasa a
   16:9 y la foto se muestra entera; si alguna de la galeria tiene otra
   proporcion, se ve completa sobre el gris claro. Sin acercamiento al
   pasar el mouse, que tambien recortaba. */
.cgpx-foto{ aspect-ratio:16/9 !important; }
.cgpx-foto img,
.cgpx-foto .cgpx-img{ object-fit:contain !important; }
.cgpx-enlace:hover .cgpx-img.is-visible{ transform:none !important; }

/* Fila de datos de cada tarjeta: lotes disponibles y areas. */
.cgpx-lugar{text-transform:none!important;letter-spacing:0!important}
.cgpx-datos{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.cgpx-dato{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:#f5f5f7;color:#6e6e73;font-size:12.5px;white-space:nowrap}
.cgpx-dato i{font-size:11px;color:#1d1d1f}
.cgpx-dato b{color:#1d1d1f;font-weight:600;font-variant-numeric:tabular-nums}
.cgpx-dato.si{background:#16a34a;color:#fff}
.cgpx-dato.si i,.cgpx-dato.si b{color:#fff}
.cgpx-dato.no{color:#86868b}
.cgpx-cerca{display:flex;align-items:center;gap:7px;margin:10px 0 0;color:#1d1d1f;font-size:13px;line-height:1.3}
.cgpx-cerca i{font-size:13px;color:#e0a104}
.cgpx-cerca b{font-weight:600}

/* =========================================================
   CELULAR: UNA TARJETA COMPLETA

   Antes cada tarjeta ocupaba el 82 % y asomaba la mitad de la
   siguiente. Ahora se ve un proyecto entero por vez; se pasa
   deslizando o con las flechas, que vuelven a mostrarse.
========================================================= */
@media(max-width:600px){
    .cgpx-card{ flex:0 0 100% !important; }
    .cgpx-pista{ gap:16px !important; }
    .cgpx-flechas{ display:flex !important; }
}