@font-face { font-family: 'Metropolis'; src: url('./fonts/Metropolis-Regular.eot'); src: url('./fonts/Metropolis-Regular.eot?#iefix') format('embedded-opentype'), url('./fonts/Metropolis-Regular.woff2') format('woff2'), url('./fonts/Metropolis-Regular.woff') format('woff'), url('./fonts/Metropolis-Regular.svg#Metropolis-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } html { padding: 0; margin: 0; width: 100%; height: 100%; } body { display: block; font-family: 'Metropolis', verdana, arial, sans-serif; line-height: 1; font-size: 13px; margin: 0; } body.inicio { background-color: #000000; } body.noscroll { overflow: hidden; } * { z-index: 10; } a { text-decoration: none; } .bg-color1 { background: #925c25; } .bg-color2 { background: #925c25; } .bg-grisclaro { background: #eaeaea; } .bg-grisoscuro { background: #555555; } .bg-rojo { background: #ff0000; } .bg-blanco { background: #FFFFFF; } .bg-blanco30 { background: rgba(255, 255, 255, 0.3); } .bg-blanco50 { background: rgba(255, 255, 255, 0.5); } .bg-blanco70 { background: rgba(255, 255, 255, 0.7); } .bg-blanco90 { background: rgba(255, 255, 255, 0.9); } .bg-negro { background: #000000; } .bg-negro30 { background: rgba(0,0,0, 0.3); } .bg-negro50 { background: rgba(0,0,0, 0.5); } .bg-negro70 { background: rgba(0,0,0, 0.7); } .bg-negro90 { background: rgba(0,0,0, 0.9); } .color1 { color: #925c25 } .color2 { color: #925c25 } .colorgrisclaro { color: #eaeaea } .colorgrisoscuro { color: #777777 } .colorrojo { color: #ff0000; } .colorblanco { color: #FFFFFF; } .colornegro { color: #000000; } .border-color1-2 { border: solid #925c25 2px; } .border-color1-4 { border: solid #925c25 4px; } .logo_inicio { position: absolute; top: 15%; left: 50%; transform: translateX(-50%); max-width: 55%; max-height: 250px; } .center { display: flex; justify-content: center; align-items: center; } #alerta, .estilo-alerta { display: block; text-align: center; padding: 10px; margin-bottom: 0px; background: #FFD246; color: #7C5703; font-size: 15px; border-radius: 3px; } #error, .estilo-error { display: block; text-align: center; padding: 10px; margin-bottom: 0px; background: #ff0000; color: #ffffff; border-radius: 3px; } #exito, .estilo-exito { display: block; text-align: center; padding: 10px; margin-bottom: 0px; background: #4ABD09; color: #ffffff; border-radius: 4px; } .estilo-exito, .estilo-alerta, .estilo-error { margin-bottom: 0; } form { position: relative; display: block; height: auto; } form input, form select { display: block; width: 100%; padding: 5px; border: 1px #eaeaea solid !important; } form input[type="date"], form input[type="text"] { width: calc(100% - 10px); } form.inicio { position: absolute; left: 50%; top: 70%; transform: translateX(-50%); width: 94%; max-width: 820px; } form.inicio .inputs { display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr .8fr; gap: 0 10px; width: calc(100% - 60px); border-radius: 100vw; padding: 5px 30px 10px 30px; } form.inicio .cr_code { display: table; padding: 5px 15px; margin: 10px auto; text-align: center; border-radius: 10px; } form.inicio .codigo_ingresado { width: 150px !important; font-size: 20px; text-align: center; display: inline-block; border-radius: 30px; margin-left: 10px; } form.inicio span.codigo_ingresado_titulo { font-size: 20px; line-height: 22px; text-align: center; display: inline-block; } form.dos .inputs { position: fixed; display: grid; grid-template-columns: 1.2fr 1.2fr .8fr .8fr 1fr 40px; gap: 0 20px; width: calc(100% - 20px); max-width: 100%; padding: 0px 10px 12px 10px; border-radius: 0; top: 0; transform: none; z-index: 1000; transition: all 0.6s; } .mostrar_inputs { position: fixed; display: none; top: 20px; right: 20px; width: 30px; height: 30px; padding: 10px; text-align: center; border-radius: 100vw; cursor: pointer; z-index: 1010; } .mostrar_inputs img { width: 30px; height: 30px; } form.dos .icono_buscar { display: block; width: 20px; height: 20px; padding: 8px; margin-top: -12px; border-radius: 100vw; cursor: pointer; border: solid 3px #dddddd; } form.dos input[type="submit"].siguiente { display: block; margin: 20px auto 50px auto; width: 50%; max-width: 300px; padding: 15px 6px; border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; } form.inicio .disabled { opacity: 0.4; } .titulo_reservar { position: absolute; display: block; padding: 5px 25px; line-height: 20px; border-radius: 5px 5px 0 0; left: 50%; top: -30px; transform: translateX(-50%); font-size: 17px; z-index: -1; } form.inicio span, form.dos span { display: block; text-align: center; font-size: 12px; margin: 10px 0 2px 0; font-weight: bold; } form .datosInicio { display: block; border: 0px; background: #dddddd; border-bottom: #9d9d9c solid 1px; outline: none; border-radius: 5px; } form input[type="checkbox"], form input[type="radio"] { transform: scale(1.5); margin-right: 10px; } form input[type="email"] { transform: lowercase; } form label { cursor: pointer; } form input[type="submit"], form button { display: block; width: 100%; padding: 8px 15px; margin: 0; border: 0; border-radius: 5px; cursor: pointer; } form.dos .disabled { cursor: not-allowed; opacity: 0.6; } select { border: 2px solid #eaeaea !important; } form input.oculto { display: none; } div.submit { position: relative; display: block; width: 100%; height: 30px; margin: 0; border: 0; border-radius: 5px; } div.submit span { position: absolute; display: block; width: 93%; margin: 0 3%; padding: 7px 0; margin-top: 2px; text-align: center; color: #bdbdbd; cursor: not-allowed; border-radius: 5px; z-index: -1; } .input_habitacion_full { position: relative; display: block; width: 100%; margin: 0; height: 80vh; } .input_habitacion_full .info { position: absolute; width: 96%; bottom: 0; padding: 15px 2% 70px 2%; text-align: center; z-index: 1; } .input_habitacion_full .fondo { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; opacity: 0.7; } .input_habitaciones { position: relative; margin: 100px auto 25px auto; width: 90%; max-width: 1000px; } .titulo_pasos { display: block; margin: 100px auto 25px auto; padding: 15px 0; font-size: 17px; text-transform: uppercase; text-align: center; border-radius: 5px; border-bottom: 3px solid #ffffff; } .titulo_pasos.verificacion { width: 90%; max-width: 1000px; margin: 50px auto -5px auto; } .input_habitacion { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; padding: 20px; margin-bottom: 50px; border: #dddddd 4px solid; } .input_habitacion.datos { margin-bottom: 15px; } .input_imagen_habitacion { display: block; width: 100%; padding-bottom: 50%; } .input_texto_habitacion { text-align: center; } .titulo_habitacion { font-size: 30px; font-weight: bold; margin-bottom: 10px; padding: 10px; } .descripcion_habitacion { font-size: 15px; } .input_habitacion.activo { background: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.8); color: #444444; border: solid 4px #4ABD09; } .input_habitacion.activo .titulo_habitacion { color: #444444; } .input_habitacion.activo .descripcion_habitacion { color: #444444; } .input_habitacion.activo.cambiar { cursor: default; } .checked_icono { position: absolute; display: none; top: -10px; right: -10px; width: 40px; height: 40px; border-radius: 100vw; padding: 5px; background: #4ABD09; } .icono_exito { display: inline-block; width: 13px; height: 13px; background-color: #4ABD09; background-image: url(imagen/check.png); background-position: center center; background-size: 90%; background-repeat: no-repeat; border-radius: 2px; } .icono_error { display: inline-block; vertical-align: bottom; width: 13px; height: 13px; background-color: #ff0000; background-image: url(imagen/check_error.png); background-position: center center; background-size: 70%; background-repeat: no-repeat; border-radius: 2px; } .editar { position: absolute; bottom: 10px; left: 10px; padding: 7px 15px; border-radius: 3px; } .activo .checked_icono { display: block; } input.radio_habitaciones { display: none; } .input_datos { position: relative; width: 84%; max-width: 960px; margin: 0 auto; padding: 15px } .input_datos .verificar { position: absolute; display: none; width: calc(100% - 6%); height: calc(100% - 50px); top: 0; left: 0; padding: 25px 3%; z-index: 10000; } .input_datos .verificar .box { position: absolute; width: 94%; top: 52%; transform: translateY(-50%); display: grid; grid-template-columns: 2fr 1fr; align-items: start; justify-content: center; gap: 30px; } .input_datos .verificar .box .a { display: grid; grid-template-columns: 1.4fr .6fr; gap: 8px; } .input_datos .verificar input { display: block; width: calc(100% - 16px); padding: 8px !important; } .input_datos .verificar .botones_sms, .botones_sms { display: grid; grid-template-columns: 1fr 1fr 40px; gap: 5px; } .input_datos .verificar .botones_sms span { display: block; padding: 12px 5px; cursor: pointer; margin: 0; font-weight: normal; } .verificacion_grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0 20px; } #div-captcha .grecaptcha-badge { position: fixed; display: block; right: -300px !important; bottom: 0; z-index: -10; transform: scale(0.5); } .input_datos input, .input_datos select { display: block; border: 0px; border-bottom: #dddddd solid 2px; } .input_datos input:focus, .input_datos select:focus { outline-width: 0; border-bottom: #925c25 solid 2px !important; } #formpagos { display: block; width: 90%; max-width: 1000px; text-align: center; margin: 0 auto; line-height: 20px; } #formpagos input[type=submit] { display: block; background: #925c25; width: 200px; color: #fff; margin: 40px auto; } .verificacion_grid .boton_enviar_sms input { display: block; width: 100%; padding: 8px 0 !important; } .verificacion_grid .boton_enviar_sms input.enviar_sms { cursor: pointer; } #respuestaform { display: block; width: 90%; max-width: 990px; padding: 20px; margin: 0 auto; } #respuesta { padding: 3%; } #box_desgloses { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; margin-bottom: 20px; font-size: 13px; } #desgloses { display: grid; grid-template-columns: 1fr; gap: 5px; padding: 10px; } .fecha_desglose { display: grid; grid-template-columns: auto 110px 90px 1fr; gap: 0 5px; } .fecha_desglose_error { display: grid; align-items: start; grid-template-columns: auto 110px 1fr; gap: 0 5px; } .fecha_desglose div, .fecha_desglose_error div { padding: 5px; } .fecha_texto { text-align: center; border-radius: 2px; } .error_fecha { display: block; padding: 5px; } .desgloses_extras { padding: 10px; } .desgloses_extras_fechas { display: grid; grid-template-columns: 90px 1fr; gap: 5px; } .desgloses_extras_fechas div { padding: 3px; font-size: 12px; } .grid_extras { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } .titulo_extras { display: block; padding: 8px 5px; margin: 5px 0; } .totales_left { display: inline-block; padding: 10px 5px; width: 50%; max-width: 200px; margin-right: 10px; } .ultimos_input { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; padding: 10px; } .ultimos_input div { display: block; width: 100%; } .reservar_ahora { display: inline-block; padding: 10px 25px; font-size: 15px; } .ultimos_datos { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 15px; } .ultimos_datos input, .ultimos_datos select { padding: 10px 5px; } .opcion_pagar { display: block; width: calc(100% - 24px); max-width: 300px; padding: 12px; margin: 0; } .opcion_pagar label { position: relative; display: block; margin: 10px 0; padding: 10px 10px; border-radius: 3px; } .opcion_pagar label div { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 25px; height: 25px; background-color: #dddddd; background-image: url(imagen/check.png); background-position: center center; background-size: cover; background-repeat: no-repeat; } .opcion_pagar input:checked + div { background-color: #4ABD09; } form .bordervacios { background: #fff0f0; border-bottom: solid 2px #ff0000 !important; } .sombra { -webkit-box-shadow: 0px 10px 14px -7px rgba(0,0,0,0.5); -moz-box-shadow: 0px 10px 14px -7px rgba(0,0,0,0.5); box-shadow: 0px 10px 14px -7px rgba(0,0,0,0.5); } #cr_bgfull { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.8; } .bgfull-fixed { position: fixed; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; opacity: 0.2; } .proceso_estatus.cerrado {background: #9d9d9c; } .proceso_estatus.abierto {background: #4ABD09; } .proceso_estatus.solicitado {background: #FFD246; } .proceso_estatus.enviado, .proceso_estatus.pendiente {background: #ff9946; } .proceso_estatus.efectiva {background: #4ABD09; } .ui-effects-transfer { border: 1px dotted black; } .avisos_footer { display: block; width: calc(100% - 10px); padding: 5px; position: fixed; bottom: 0; left: 0; text-align: center; z-index: 100; } .avisos_footer span { display: inline-block; margin: 0 10px; font-size: 12px; cursor: pointer; } .aviso-privacidad, .aviso-cookies { position: fixed; top: 0; left: 0; display: block; width: calc(100% - 100px); height: calc(100% - 100px); padding: 50px; z-index: 1000; overflow-y: auto; line-height: 1.5; text-align: justify; } .x-cerrar { display: block; position: fixed; top: 15px; right: 15px; width: 30px; height: 30px; border-radius: 100px; padding: 6px; cursor: pointer; } .oculto, #hide, #redvacios, #subir, #redirige, #vacios { display: none; } .mostrar { cursor: pointer; } #loader { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000000000000000; background: rgba(255, 255, 255, 0.8); } .loader { position: absolute; width: 48px; height: 48px; top: 50%; left: 50%; border: 10px solid #bdbdbd; border-bottom-color: #925c25; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 0.4s linear infinite; } @keyframes rotation { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @media screen and (max-width: 1000px) { #categoria { grid-template-columns: 1fr 1fr 1fr; } } @media screen and (max-width: 750px) { #categoria { grid-template-columns: 1fr 1fr; } #alerta, .estilo-alerta, #exito, .estilo-exito, #error, .estilo-error { font-size: 13px; } form.inicio { top: 53%; } form.inicio .inputs { grid-template-columns: 1fr 1fr; border-radius: 15px; padding: 10px; width: calc(100% - 20px); } form .datosInicio { margin-bottom: 10px; } form.dos .inputs { grid-template-columns: 1fr; align-content: start; max-width: 60%; height: 100%; right: -100%; padding: 75px 10% 0 10%; } form.dos .inputs.ver { right: 0; } div.submit { margin-top: -15px; } .mostrar_inputs { display: block; } .input_habitacion { grid-template-columns: 1fr; padding: 10px; margin-bottom: 25px; gap: 5px; } .input_imagen_habitacion { padding-bottom: 44%; } .titulo_habitacion { font-size: 20px; margin-bottom: 5px; } .descripcion_habitacion { font-size: 13px; } .checked_icono{ top: -12px; right: -12px; width: 35px; height: 35px; } .verificacion_grid { grid-template-columns: 1fr 1fr; gap: 5px; } .input_datos { padding: 8px; } .titulo_pasos { margin: 60px auto 20px auto; padding: 10px 2px; font-size: 15px; } .input_datos .verificar { padding: 2%; width: 96%; height: 96%; } .input_datos .verificar .box { grid-template-columns: 1fr; gap: 15px; } .input_datos .verificar .box .a { display: grid; grid-template-columns: 1.4fr .6fr; gap: 8px; } .botones_sms { grid-template-columns: 1fr 1fr 50px; } #box_desgloses { grid-template-columns: 1fr; } .ultimos_datos { grid-template-columns: 1fr; gap: 10px; } .fecha_desglose { font-size: 12px; grid-template-columns: auto 92px 90px 1fr; gap: 3px; } .fecha_desglose_error { font-size: 12px; grid-template-columns: auto 92px 1fr; gap: 3px; } .icono_exito, .icono_error { width: 11px; height: 11px; } .fecha_desglose div, .fecha_desglose_error div { padding: 4px 3px 3px 3px; } .grid_extras { font-size: 12px; } .desgloses_extras_fechas { grid-template-columns: 83px 1fr; gap: 3px 0; } .desgloses_extras_fechas div { margin: 0; font-size: 11px; } } @media screen and (max-width: 600px) { #categoria { grid-template-columns: 1fr; } }