/*-------------------------------

	POPUP.CSS

-------------------------------*/

.popup_back {
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100;
}

.popup_cont {
	position: fixed;
	z-index: 99999;
}

@media only screen and (max-width: 991px){

.popup_cont {
/*	left: 0px !important;*/
    margin-left: 30px !important;
	margin-right: 30px !important;
	}

  }

.preloader {
	z-index: 101;
}

/*---------------------

	EDIT BELOW

*/


.popup {
	padding: 0px !important;
	padding-top: 0px !important;
	}


.popup_close {
	cursor: pointer;
	position: absolute;
	padding: 5px;
	padding-top:0px;
}

.popup_back {
	z-index:99999;
}

div.popup {
	z-index:999990;
	box-shadow: 0 3px 10px #222;
}

.preloader {
	left: 50%;
	margin: -10px 0 0 -25px;
	position: fixed;
	top: 50%;
}
/* Añadir al final de tu popup.css */

/* Centrar el popup */
.popup_cont {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Contenido del banner centrado */
.popup .banner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    text-align: center;
}

.popup .banner-link {
    display: block;
    width: 100%;
}

.popup .banner-image {
    width: 100% !important; /* Responsive por defecto */
    height: auto !important; /* Mantener proporciones */
    display: block;
    border-radius: 8px;
    min-width: 500px; /* Reducido de 600px a 500px */
    max-width: 80vw; /* Reducido de 90vw a 80vw */
}

/* Para pantallas grandes (iPads landscape y desktop) */
@media only screen and (min-width: 992px) and (max-width: 1600px) {
    .popup .banner-image {
        width: 60vw !important; /* Reducido de 70vw a 60vw */
        max-width: 800px !important; /* Reducido de 1000px a 800px */
        min-width: 600px !important; /* Reducido de 700px a 600px */
    }
}

/* Para pantallas muy grandes */
@media only screen and (min-width: 1601px) {
    .popup .banner-image {
        width: 50vw !important; /* Reducido de 60vw a 50vw */
        max-width: 1000px !important; /* Reducido de 1200px a 1000px */
        min-width: 700px !important; /* Reducido de 800px a 700px */
    }
}

/* Responsive para tablets (768px-991px) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .popup_cont {
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
        width: 650px !important; /* Reducido de 750px a 650px */
        max-width: calc(100% - 40px) !important;
    }
    
    .popup .banner-image {
        width: 100% !important; 
        height: auto !important; 
        max-width: 600px !important; /* Reducido de 700px a 600px */
        min-width: auto !important;
    }
}

/* Responsive para móviles (hasta 767px) */
@media only screen and (max-width: 767px) {
    .popup_cont {
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
        width: calc(100% - 60px) !important;
    }
    
    .popup .banner-image {
        width: 100% !important;
        height: auto !important;
        max-width: none !important; /* Permitir que se adapte completamente */
        min-width: auto !important;
    }
}