/* ============================================================
   HERO LOTEAMIENTOS
============================================================ */

.c9-lot-hero{
    position:relative;
    width:100%;
    height:620px;
    overflow:hidden;
    background:#111;
}


/* ============================================================
   SLIDES
============================================================ */

.c9-lot-hero-slides{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}


.c9-lot-slide{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;

    opacity:0;
    visibility:hidden;

    transition:
        opacity 1.2s ease,
        visibility 1.2s ease;
}


.c9-lot-slide.activo{
    opacity:1;
    visibility:visible;
    z-index:1;
}


/* ============================================================
   IMAGEN
============================================================ */

.c9-lot-imagen{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
}


.c9-lot-imagen img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center center;

    transform:scale(1);

    image-rendering:auto;

    will-change:transform;
}


/* ============================================================
   MOVIMIENTO SUAVE

   Muy poco zoom para conservar nitidez.
============================================================ */

.c9-lot-slide.activo .c9-lot-imagen img{
    animation:
        c9LotMovimiento
        10s
        linear
        forwards;
}


.c9-lot-slide:nth-child(even).activo .c9-lot-imagen img{
    animation-name:
        c9LotMovimientoDerecha;
}


@keyframes c9LotMovimiento{

    from{
        transform:
            scale(1)
            translate3d(0,0,0);
    }

    to{
        transform:
            scale(1.025)
            translate3d(-.3%,-.2%,0);
    }

}


@keyframes c9LotMovimientoDerecha{

    from{
        transform:
            scale(1)
            translate3d(0,0,0);
    }

    to{
        transform:
            scale(1.025)
            translate3d(.3%,-.2%,0);
    }

}


/* ============================================================
   OSCURECIDO
============================================================ */

.c9-lot-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.72) 0%,
            rgba(0,0,0,.52) 32%,
            rgba(0,0,0,.20) 65%,
            rgba(0,0,0,.08) 100%
        );

    z-index:1;
}


/* ============================================================
   CONTENIDO
============================================================ */

.c9-lot-contenido{
    position:relative;

    width:88%;
    max-width:1380px;
    height:100%;

    margin:0 auto;

    display:flex;
    align-items:center;

    z-index:2;

    color:#fff;
}


.c9-lot-contenido-inner{
    width:100%;
    max-width:680px;

    opacity:0;

    transform:
        translateY(22px);
}


.c9-lot-slide.activo
.c9-lot-contenido-inner{

    animation:
        c9LotTextoEntrada
        .8s
        .25s
        ease
        forwards;

}


@keyframes c9LotTextoEntrada{

    from{
        opacity:0;
        transform:translateY(22px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* ============================================================
   ETIQUETA
============================================================ */

.c9-lot-mini{
    display:inline-block;

    margin-bottom:18px;

    padding:
        10px
        16px;

    border-radius:2px;

    font-size:12px;
    line-height:1;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#fff;
}


.c9-lot-mini.disponible{
    background:#a30000;
}


.c9-lot-mini.ultimos{
    background:#d78600;
}


.c9-lot-mini.vendido{
    background:#555;
}


/* ============================================================
   TÍTULO
============================================================ */

.c9-lot-contenido h2{
    margin:
        0
        0
        14px;

    max-width:800px;

    color:#fff;

    font-size:54px;
    line-height:.98;

    font-weight:900;

    font-style:italic;

    letter-spacing:-2px;

    text-transform:none;
}


/* ============================================================
   UBICACIÓN
============================================================ */

.c9-lot-ubicacion{
    display:flex;
    align-items:center;

    gap:8px;

    margin-bottom:20px;

    font-size:15px;
    line-height:1.3;

    font-weight:600;

    color:#fff;
}


.c9-lot-ubicacion i{
    font-size:14px;
}


/* ============================================================
   ESTADÍSTICAS
============================================================ */

.c9-lot-estadisticas{
    display:flex;
    flex-wrap:wrap;

    gap:
        10px
        24px;

    margin-bottom:22px;
}


.c9-lot-estadisticas span{
    position:relative;

    font-size:14px;

    color:
        rgba(255,255,255,.90);
}


.c9-lot-estadisticas strong{
    margin-right:4px;

    color:#fff;

    font-size:16px;

    font-weight:800;
}


/* ============================================================
   PRECIO
============================================================ */

.c9-lot-precio{
    display:flex;
    flex-direction:column;

    margin-bottom:22px;
}


.c9-lot-precio small{
    margin-bottom:3px;

    font-size:13px;

    color:
        rgba(255,255,255,.78);
}


.c9-lot-precio strong{
    color:#fff;

    font-size:30px;
    line-height:1.1;

    font-weight:900;
}


/* ============================================================
   BOTÓN
============================================================ */

.c9-lot-boton{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:9px;

    min-height:50px;

    padding:
        0
        24px;

    background:#a30000;

    border:
        1px solid
        rgba(255,255,255,.65);

    border-radius:3px;

    color:#fff;

    font-size:14px;

    font-weight:800;

    text-decoration:none;

    transition:
        background .25s ease,
        transform .25s ease;
}


.c9-lot-boton:hover{
    background:#c0001c;

    transform:
        translateY(-2px);

    color:#fff;
}


/* ============================================================
   INDICADORES
============================================================ */

.c9-lot-indicadores{
    position:absolute;

    left:50%;
    bottom:24px;

    transform:
        translateX(-50%);

    z-index:5;

    display:flex;
    align-items:center;

    gap:8px;
}


.c9-lot-indicadores button{
    width:30px;
    height:3px;

    padding:0;

    border:0;

    background:
        rgba(255,255,255,.45);

    cursor:pointer;

    transition:
        width .3s ease,
        background .3s ease;
}


.c9-lot-indicadores button.activo{
    width:48px;

    background:#fff;
}


/* ============================================================
   TABLET
============================================================ */

@media(max-width:900px){

    .c9-lot-hero{
        height:570px;
    }


    .c9-lot-contenido{
        width:90%;
    }


    .c9-lot-contenido h2{
        font-size:44px;
    }

}


/* ============================================================
   MÓVIL
============================================================ */

@media(max-width:600px){

    .c9-lot-hero{
        height:560px;
    }


    .c9-lot-overlay{

        background:
            linear-gradient(
                0deg,
                rgba(0,0,0,.82) 0%,
                rgba(0,0,0,.55) 55%,
                rgba(0,0,0,.20) 100%
            );

    }


    .c9-lot-contenido{
        width:100%;

        padding:
            0
            18px
            54px;

        box-sizing:border-box;

        align-items:flex-end;
    }


    .c9-lot-contenido-inner{
        max-width:none;
    }


    .c9-lot-mini{
        margin-bottom:12px;

        padding:
            8px
            12px;

        font-size:10px;
    }


    .c9-lot-contenido h2{
        margin-bottom:10px;

        font-size:27px;
        line-height:1;

        letter-spacing:-1.5px;
                font-weight: 400;
    }


    .c9-lot-ubicacion{
        margin-bottom:14px;

        font-size:13px;
    }


    .c9-lot-estadisticas{
        gap:
            8px
            15px;

        margin-bottom:16px;
    }


    .c9-lot-estadisticas span{
        font-size:12px;
    }


    .c9-lot-estadisticas strong{
        font-size:13px;
    }


    .c9-lot-precio{
        margin-bottom:17px;
    }


    .c9-lot-precio strong{
        font-size:25px;
    }


    .c9-lot-boton{
        min-height:46px;

        padding:
            0
            19px;

        font-size:13px;
    }


    .c9-lot-indicadores{
        bottom:18px;
    }


    .c9-lot-indicadores button{
        width:22px;
    }


    .c9-lot-indicadores button.activo{
        width:36px;
    }

}

/* ============================================================
   SLIDE ESPECIAL - JOYA DE MARACANA
============================================================ */

.c9-lot-mini.joya{
    background:#a30000;
}


.c9-lot-titulo-joya{
    display:flex;
    flex-direction:column;
}


.c9-lot-titulo-joya span{
    display:block;

    margin-bottom:7px;

    font-size:.55em;
    line-height:1;

    font-weight:500;

    font-style:normal;

    letter-spacing:0;
}


.c9-lot-titulo-joya strong{
    display:block;

    font-weight:900;
}


.c9-lot-frase-joya{
    max-width:610px;

    margin:
        18px
        0
        0;

    color:
        rgba(255,255,255,.90);

    font-size:17px;
    line-height:1.5;

    font-weight:400;
}


/* ============================================================
   DATOS JOYA
============================================================ */

.c9-lot-datos-joya{
    display:flex;
    flex-wrap:wrap;

    gap:
        12px
        22px;

    margin-top:22px;
}


.c9-lot-datos-joya span{
    display:flex;
    align-items:center;

    gap:7px;

    color:#fff;

    font-size:13px;
    font-weight:600;
}


.c9-lot-datos-joya i{
    color:#ffb4b4;
}


/* ============================================================
   BOTONES JOYA
============================================================ */

.c9-lot-botones-joya{
    display:flex;
    flex-wrap:wrap;

    gap:12px;

    margin-top:28px;
}


.c9-lot-boton-secundario{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:9px;

    min-height:50px;

    padding:
        0
        24px;

    border:
        1px solid
        rgba(255,255,255,.65);

    border-radius:3px;

    background:
        rgba(0,0,0,.25);

    color:#fff;

    font-size:14px;
    font-weight:800;

    text-decoration:none;

    backdrop-filter:
        blur(5px);

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.c9-lot-boton-secundario:hover{
    background:#fff;

    color:#111;

    transform:
        translateY(-2px);
}


/* ============================================================
   JOYA - MOVIL
============================================================ */

@media(max-width:600px){

    .c9-lot-titulo-joya span{
        margin-bottom:5px;

        font-size:.58em;
    }


    .c9-lot-frase-joya{
        margin-top:11px;

        font-size:13px;
        line-height:1.4;
    }


    .c9-lot-datos-joya{
        display:grid;

        grid-template-columns:
            1fr
            1fr;

        gap:
            8px
            12px;

        margin-top:14px;
    }


    .c9-lot-datos-joya span{
        font-size:10px;
    }


    .c9-lot-datos-joya span:first-child{
        grid-column:
            1 / -1;
    }


    .c9-lot-botones-joya{
        display:grid;

        grid-template-columns:1fr;

        gap:8px;

        width:100%;

        margin-top:17px;
    }


    .c9-lot-botones-joya
    .c9-lot-boton,

    .c9-lot-boton-secundario{
        width:100%;

        min-height:43px;

        font-size:11px;
    }

}