.header{
    top: 0px;
    margin-right: 20px;
    margin-top: 5px;
    text-align: right;
}
.fondo{
    background-image: url(../images/fondo.jpg);
    background-color: #00000088;
    background-attachment: fixed;
    background-size: 100%;
    /*background-repeat: no-repeat;*/
}

.container-botones{
    display:flex;
    align-items: center;
    justify-content:center;
    flex-direction: column;
    margin-top: -100px;
}

.links{
    margin-top: 15px;
    padding: 1em;
    width: 90%;
    /*background-color: #f28cb4  !important;*/
    background: linear-gradient(90deg, #0a22c6, #fff,#9bd5fa);
    color:#000000;
    font-size: 17px;
    border-color: #d1aefd;
    border-radius: 150px;;
    box-shadow: 4px 4px 7px #333;
}

.link-container-imagen{
    display: block;
    position: relative;
}

.link-icono{
    position:absolute;
    top: -7px;
    left : -10px;
    z-index: 1;
    border-radius: 150px;
}

.link-imagen-redonda{
    border-radius: 20px;
}

.hot{
    margin-top: 15px;
    padding: 1em;
    width: 90%;
    border-color: #29A2E3;
    /*background: linear-gradient(180deg, #1078B0, #29A2E3);*/
    /*background-color: #29c04d  !important;*/
    /*background-image: url(../images/hot.gif);*/
    color:#000;
    font-size: 17px;
    border-color: #89ecda;
    border-radius: 50px;
    box-shadow: 4px 4px 7px #333;
    /*text-shadow: 0.07em 0.07em 0.2em #000;*/
    animation-name: anim;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

/*Animacion de cambio de color*/
@keyframes anim{
    0% {background-color: #f28cb4;} /*Amarillo*/
   25% {background-color: #89ecda;} /*Naranja*/
   50% {background-color: #f28cb4;} /*Negro*/
   75% {background-color: #89ecda;} /*Otra vez naranja*/
  100% {background-color: #f28cb4;} /*Otra vez amarillo*/
}

.links:hover{
    background-color: #f28cb4;
    border-color: #89ecda;
    color: #000;
}

.encabezado{
    background-color: transparent !important;
    /*background-image: url(../images/fondo.png);
    background-attachment: fixed;*/
}

.encabezado .imagen_face{
    display: flex;
    justify-content: center !important;
    align-items: center;
    width: 120px;
    height: 120px;
    border-radius: 150px;
    border-color: #153294;
    border-style: solid;
    border-width: 3px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 4px 4px 7px #333;
}

.encabezado .texto_face{
    font-family: Roboto, sans-serif;
    font-size: 24px;
    text-align: center;
    margin-top: 15px;
    color: #fff;
    text-shadow: black 0.1em 0.1em 0.2em
}

.texto_descripcion_face{
    font-family: Roboto, sans-serif;
    font-size: 15px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    text-align: center;
    color: #fff;
    text-shadow: black 0.1em 0.1em 0.2em
}

.py-5{
    padding-top: 1rem !important;
}

.fondo-avatar{
    background-color: #00000088;
    width: 100%;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
}

.fab {
    padding: 20px;
    font-size: 30px;
    width: 30px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
    }
    
    .fab:hover {
    opacity: 0.7;
    }
    
    .fa-whatsapp {
    background: #00bb2d;
    color: white;
    }

    .encabezado .imagen_whatsapp{
        display: flex;
        justify-content: center !important;
        align-items: center;
        width: 50px;
        height: 50px;
        /*border-radius: 150px;*/
        margin-left: auto;
        margin-right: auto;
        /*box-shadow: 4px 4px 7px #333;*/
    }

    .encabezado .imagen_instagram{
        display: flex;
        justify-content: center !important;
        align-items: center;
        width: 50px;
        height: 50px;
        /*border-radius: 150px;*/
        margin-left: auto;
        margin-right: auto;
        /*box-shadow: 4px 4px 7px #333;*/
    }

    .encabezado .imagen_telegram{
        display: flex;
        justify-content: center !important;
        align-items: center;
        width: 50px;
        height: 50px;
        /*border-radius: 150px;*/
        margin-left: auto;
        margin-right: auto;
        /*box-shadow: 4px 4px 7px #333;*/
    }

    .icon-color{
        color: #ffffff;
    }

    .container-design{
        margin-top: 20px;
        position: relative;
        /*background-color: #00000088;
        padding: 20px;*/
        align-items: center;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        width: 100%;
    }

    .footer{
        padding: 5px;
        margin-top: 20px;
        position: relative;
        /*bottom: 0px;*/
       /*background-color: #00000088;*/
        color: #fff;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 10px;
        text-align: center;
        width: 100%;
    }

    .link_footer{
        color: #fff;
    }

    .encabezado .imagen_face_promocion{
        display: flex;
        top: 20px;
        justify-content: center !important;
        align-items: center;
        width: 60px;
        height: 60px;
        border-radius: 150px;
        border-color: #89ecda;
        border-style: solid;
        border-width: 3px;
        margin-left: auto;
        margin-right: auto;
        box-shadow: 4px 4px 7px #333;
    }

    /****Css de las imágenes de los productos*/
    .imagen_promocion{
        width: 80%;
        margin-top: 20px;
        border-radius: 10px;
        /*border-style: solid;
        border-width: 1px;
        border-radius: 10px;
        box-shadow: 4px 4px 7px #333;*/
    }

    .contenedor{
        position: relative;
        display: inline-block;
        text-align: center;
        top:-55px;
    }
    /*.texto-encima{
        position: absolute;
        top: 10px;
        left: 10px;
    }*/
    .texto-imagen{
        position: relative;
        margin-top: 0px;
        left: 50%;
        transform: translate(-50%, 0%);
        /*background-color: #00000088;*/
        padding: 10px;
        color: #333;
        text-align: center;
        font-size: 16px;
    }

    .centrar-imagenes{
        font-family: Roboto, sans-serif;
        font-size: 15px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        text-align: center;
        color: #fff;
        /*text-shadow: black 0.1em 0.1em 0.2em*/
    }

    .imagen-producto{
        /*width: 80%;*/
        border-style: solid;
        border-width: 1px;
        border-radius: 10px;
        box-shadow: 4px 4px 7px #333;
        text-align: center;
        background-color: #ffffffbb;
    }

    

    /****Fin de css de las imágenes de los productos*/

    /*******Ventana modal */

    .modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }
    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }
    .modalDialog > div {
        width: 90%;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: linear-gradient(0deg, #000, transparent 30%) !important;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
    }
    .close {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }
    .close:hover { background: #00d9ff; }

    .close_abajo {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        left: 50%;
        text-align: center;
        bottom: 10px;
        width: 100px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }

    /*******Fin ventana modal*/
    
    .fondo-formadepago{
        background-color: #333;
        color: #ffffff;
    }

    .caja-cantidad{
        border-style: dashed;
        border-width: 1px;
        margin: 30px 0;
        width: 100px;
    }

    .icono-link{
        position: relative;
        margin-left: 10px;
        left: 10px;
    }

    .blink_me {
        animation: blinker 1s linear infinite;
    }
      
    @keyframes blinker {
        30% {
            opacity: 0;
          background-color: #1c1487;
        }
    }

    .titulo_promocion{
        color: #fff;
    }

    /* Estilo del contenedor de la imagen */
    .image-container {
        position: relative;
        display: inline-block;
    }

    /* Estilo base de la cinta */
    .status-ribbon {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 10px; /* Altura de la cinta */
        border-radius: 5px;
    }

    /* Colores para cada estado */
    .status-1 {
        background-color: #ffffff/* Estado 1: Verde */
    }

    .status-2 {
        background-color: #ffca2c; /* Estado 2: Amarillo */
    }

    .status-3 {
        background-color: #0b5ed7; /* Estado 3: Naranja */
    }

    .status-4 {
        background-color: #198754; /* Estado 4: Rojo */
    }


    /* Estilo base de la cinta */
    .operacion-ribbon {
        position: absolute;
        top: 0;
        left: 0;
        /*transform: translate(-20%, 10px) rotate(-45deg); /* Rotación de la cinta */
        padding: 5px 20px;
        font-size: 14px;
        font-weight: bold;
        color: white;
        text-transform: uppercase;
        text-align: center;
        white-space: nowrap;
        z-index: 10;
        border-end-end-radius: 5px;
        
    }

    /* Colores para cada tipo de operación */
    .operacion-alquiler {
        background-color: blue; /* Alquiler: Azul */
    }

    .operacion-venta {
        background-color: blue; /* Venta: Verde */
    }

    .operacion-traspaso {
        background-color: cyan; /* Traspaso: Naranja */
    }
   

    @media (max-width: 700px){
        .fondo{
            background-image: url(../images/fondo2.jpg);
            background-attachment: fixed;
            background-size: 110% 110%;
            background-repeat: no-repeat;
        }
    }