/*Art2Fly IBE para Hoteles Huilo Huilo | www.art2fly.com | Copyright 2025*/
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,900&display=swap');


/* TIPOGRAFIA CLIENTE */
	body, main {font:15px/19px 'Lato','Open Sans', sans-serif;color:#222;letter-spacing:0.4px;}
	main {color:#444;}
	#header {background-color:#92aca0;}
    main .centre {padding:50px;}
	main .centre:after { content:""; clear:both; display:block; }
	main h1, main h2, main h3 {font-family:  'Bree Serif','Open Sans', arial, sans-serif;}

	
/* COLOR CLIENTE */
	footer {background-color: #92aca0;}
	.font-cliente {color: #92aca0;}
	

/* COLOR CLARO */
	del.tarjado {text-decoration: line-through;color: #92aca0;}


/* COLOR OSCURO */
	#nav nav li a.navbook, form button, .list .item .details:before, 
	.hover #check button:hover, main table:before, main table th:before,
	#rooms.list .item .details .button, #stats figure:before,
	#menu li.featured:before, #comments li:before, #testimonials figure.cover .testimonial,
	#faqs:before, #contact:before, main ul.sitemap:before,
	.hover main ul.sitemap a:hover, aside .blocktitle, .hover .footertestimonial .button:hover,
	.date .month, .hover #footer .news .social a:hover, .hover #nav .book:hover,
	.home3 #container, .hover #rooms.list.grid .item .container:hover .button,
	#stats, #search button:hover, #pop:before, #paso1 .titulo_programa  {background-color: #c1bbb0;}
	
	#nav nav li.active a:after, .ui-state-active,
	.ui-widget-header .ui-state-active, .ui-state-hover {background-color: #A69F88; !important;}

	#nav .book span, .usp .box i, #menu h4, 
	aside #block.categories {border-color:#A69F88;} 


/* COLOR CONTRASTE */
	#nav .book, main p a i, main ul a, .hover main ul.sitemap ul a:hover, .usp .box i, .feature .details a, .feature .details a i, .pagination li a, #specials.list .item .details .button span:before, .hover #instagram p a:hover, #comments li .comment-reply-link, .page-guestbook main .button span:before, #faqs li.reveal h2:after, .hover #faqs li:hover h2:after, .hover #contact .field:hover i, main ul.sitemap a, #search button i, #contact .field.mandatory:before, #paso1 .details .party, .color-cliente {color: #92aca0;}


/* COLOR ARO DE LOADER */
    .loader {border-left-color: #cb8e6d;}

/* ESTILO PAGINA DE RESERVAS */
    .paso1-reservas .reservas table#caja-compra {font-family: 'Lato';}
    .paso1-reservas .logo-reservas {padding: 2px 0;top: 74px;background: rgb(81 78 75 / 70%);}
	.paso1-reservas input#reservar.HUILO {font-family: 'Lato';font-weight: normal;height: auto;letter-spacing: 1px;} 
	.paso1-reservas input#reservar.HUILO:hover {background-color: white;}
	.paso1-reservas input#reservar.HUILO:active {color: white;background-color: #ffffff3d;}
	.paso1-reservas span.edades {color: rgb(211 194 173);}
    .paso1-reservas .logo-reservas img {margin: 28px 0px;width: 200px;}
	.paso1-reservas .info-reservas {position: absolute;z-index: 999;display: inline-block;top: 74px;left: calc(50% - 200px);height: 428px;text-align: left;background: rgb(81 78 75 / 70%);width: 400px;color: white;padding: 20px;font-weight: 300;font-size: 15px;}
    .info-reservas h4 {line-height: 1;font-size: 1.5em;font-weight: 300;text-align: center;padding: 50px 0 20px 0;}
    .info-reservas ul li {list-style-type: disc;list-style-position: outside;margin: 15px 30px;line-height: 1.4;}
    .info-reservas p {margin: 20px 30px;text-align: justify;}
	.paso1-reservas .reservas table#caja-compra {top: 192px;font-size: .8em;line-height: 1;background: rgb(81 78 75 / 70%);}
	.paso1-reservas #reservar:hover {border-radius: 0;border: 2px solid #b6724d;background: white;color: #b6724d;font-weight: 600;}
    .paso1-reservas input#reservar {background: rgb(203 142 109);border-radius: 0;border: 2px solid #cb8e6d;}
    .paso1-reservas .reservas table#caja-compra tr:last-child td {padding-bottom:30px;}
	.paso1-reservas .logo-reservas {width: 340px;top: 70px;}

    
/* BANNER PROMOCIONAL */
    #banner_promocional span.small {color: lightgray;font-family:'Lato',arial,sans-serif;}
    #imagen_promocional img {width:100%; max-width: 610px; margin: 6px auto;}
	#banner_promocional span.codigo {color: rgb(101 17 3);background: #ffffff;text-transform: uppercase;font-size: .88em;font-weight: 700;}
	#banner_promocional span.descuento {color: #ffc630;font-weight: 600;}
	#banner_promocional {font-family:'Lato',arial,sans-serif;background-color: rgb(101 17 3);border:none;line-height: 1.2;box-shadow: 0 0px 20px rgb(0 0 0 / 50%);font-weight: normal;}

/* CALENDARIO */
    div#ui-datepicker-div {
    font-family: 'Lato';
    font-size:1em;
    border:none;
    border-radius:2px;
    box-shadow: rgba(0,0,0,0.5) 20px 20px 20px;) 20px 20px 20px;
    min-width: 40em;
}

#ui-datepicker-div .ui-widget-header {
    background: #cb8e6d;
    color:white;
    font-weight:600;
    border:none;
    border-radius:2px;
    letter-spacing:1.5px;
    padding:8px;
    margin:1px;
    text-transform:uppercase;
}

#ui-datepicker-div select.ui-datepicker-month {
    font-size: 1em !important;
    font-family: 'Lato';
    color: #a6765c;
    font-weight: 400;
}

#ui-datepicker-div .ui-datepicker th {
    color:#a6765c;
    font-size: 1em;

}

#ui-datepicker-div .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: none;
    border: none;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
}
#ui-datepicker-div td:hover a.ui-state-default,td.ui-datepicker-current-day a.ui-state-default.ui-state-active,td.ui-datepicker-current-day:hover a.ui-state-default.ui-state-active {
    background: #cb8e6d !important;
    border-radius: 30px;
    color: white !important;
	font-weight: 600;
}
.ui-datepicker td.ui-datepicker-today, .ui-datepicker td.ui-datepicker-today a.ui-state-default {
    border: none !important;
    border-radius: 20px;
}

.ui-datepicker td.ui-datepicker-today a.ui-state-active {
    border-radius: 20px;
    background-color: #bbb !important;
    border: none!important;

}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    top: 10px !important;
}

/* ESTILO PASOS */
	#nav { background-color: white;}
	#header ul {left: 50px;}
	#header ul li {font-size:10px;}
    #nav .logo {margin-top: 20px;}
    #nav .logo img {height: 42px;width: auto;}
	#paso1 .ficha_programa .details {color:#444;}
	#paso1 .details .precio {margin-top:30px;}
	#paso1 .details .dates { font-weight: bold; margin: 10px;}
	#paso1 .details .hoteles {line-height:normal;font-size: .85em;}
	#paso1 .details .precio span {font-size: .6em;display: block;font-weight: normal;}
	.alt_acomodacion span.small {color: #444;}
	.hotel .popup-gallery a:nth-child(even) {display:inline;}
	.hotel .popup-gallery a img {width: 11%;}
	#caluga_resumen td.total-resumen {background-color:grey;}
	#paso3, #paso4, #paso5, #paso6 {margin-top: 20px;}
	#paso3 .left {padding-left:0;}
	#paso3 .accordion2 a.ui-state-default, #paso3 .accordion2 a.ui-state-default:link, #paso3 .accordion2 a.ui-state-default:visited {color: #7baa03;}
	#paso3 .accordion2 a.ui-state-active, #paso3 .accordion2 a.ui-state-active:link, #paso3 .accordion2 a.ui-state-active:visited {text-decoration: none;background: #88ae29;color: white;}
	div#powered_by {margin: 20px 0;padding-bottom: 20px;}
	.paso1-reservas input.calendario {width: calc(100% - 68px);border-radius: 2px;height: 36px;}
    .paso1-reservas select.pasajeros, .paso1-reservas select[name='RESORT'] {width: calc(100% - 68px);border-radius: 2px;height: 36px;color: #666666;font-family: 'Lato';}
    .paso1-reservas .reservas table#caja-compra tr:last-child td {padding-bottom: 10px;}



/*----- ANCHO MAX 1200px ------*/
    @media only screen and (max-width:1200px) {
	.paso1-reservas #anuncio-portada {top: 80px;}
    .paso1-reservas .logo-reservas {top: 54px;}
    .paso1-reservas .info-reservas {top: 59px;left: 400px;}
    .paso1-reservas .reservas table#caja-compra {top: 177px;}
    
}

/*----- ANCHO MAX 1024px ------*/
@media only screen and (max-width:1024px) {
    #header ul {left:20px; }
    main .centre {padding: 40px 20px;}
    .paso1-reservas #beneficios_web.HUILO {position:relative;text-align: center;height: auto;z-index: 1;}
    .paso1-reservas #beneficios_web h2 {bottom:initial;position: relative;text-align: center;}
	.paso1-reservas #anuncio-portada {width: calc(100% - 480px);text-align: center;top: 100px;}

}

/*----- ANCHO MAX 860px ------*/
    @media only screen and (max-width:860px) {
	#header ul li {font-size:10px;margin: 0 6px;}
	.paso1-reservas #anuncio-portada #bajada  {font-size: 2em;}
    .paso1-reservas #anuncio-portada #bajada span {width:100%;}
    .paso1-reservas #titulo img {margin-top:0;}
	.hotel .popup-gallery a img {width: 100%;height: auto;}
	.hotel .popup-gallery a:first-child img {width: 100%;height: auto;}
	.hotel .popup-gallery a:nth-child(even) {display: inline-block;}
	.hotel .popup-gallery a:last-child img {display: none;}
}

/*----- ANCHO MAX 799px ------*/
@media only screen and (max-width: 799px) {
	.paso1-reservas .reservas #beneficios_web { width:100%; margin:0;}
	.paso1-reservas .reservas #beneficios_web img {margin-left: calc(25% - 75px); }
	.paso1-reservas .reservas #beneficios_web img:nth-child(odd) { margin-left:0; margin-right: calc(25% - 75px);}
	.paso1-reservas .reservas {background-position-x: -400px;background-position-y: bottom;min-height: 1000px;}
	.paso1-reservas .logo-reservas {top: 26px;}
    .paso1-reservas .info-reservas {top: 599px;left: 0;width: 80%;padding: 0 10% 20px 10%;background: rgb(84 102 59);height: auto;}
    .paso1-reservas .reservas table#caja-compra {top: 147px;}
	
}

/*----- ANCHO MAX 630px ------*/
@media only screen and (max-width:630px) {
    #paso2 .hotel .popup-gallery a img {width: 100%;}
	#header ul li {display:none;}
    #header ul li.encendido {display:inline-block;}
    #header ul li.encendido.bullet {display:none;}
	div#powered_by {margin-top: 30px;margin-bottom: 50px;}
}

/*----- ANCHO MAX 500px ------*/
@media only screen and (max-width:500px) {
    #imagen_promocional {height: 100px;}
    .hotel .popup-gallery a {width: 24%; height: auto;}
	.hotel .popup-gallery a:first-child {width: 100%; height: auto;}
	.hotel .popup-gallery a:last-child img {display: inline-block;}
    .paso1-reservas .reservas table#caja-compra-cabanas {left:10px;}
}
/*----- ANCHO MAX 330px ------*/
@media only screen and (max-width:330px) {
	#banner_promocional {min-width:380px;}
}