/*Art2Fly IBE para Hotel Termas Chillan | www.art2fly.com | Copyright 2025*/
/*------------------------------------------------------
			FONTS ESPECIALES DEL CLIENTE
---------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=DM+Sans:wght@100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); 



/*COLOR CLIENTE*/

	footer {background-color: rgb(202, 209, 197);}
	#footer .dark {background:#204B29;}
	#footer .contact {font-weight:normal;}

/*COLOR CLARO*/

	#header {background-color: rgb(210, 207, 193);border: none;padding: 20px 0;}

/* CON NUEVO LOGO CAMBIAR POR ESTOS: */
	#header {background-color: rgba(7, 47, 5, 0.18);border: none;top: 77px;padding: 20px 0;}
	#header ul	{left:190px;}
	#header ul li {letter-spacing: 1.8px;font: 11px/40px 'DM Sans', sans-serif;color: darkgreen;}
	#nav {position: relative;width: 100%;z-index: 9999;padding: 0;margin: 0;height: 133px;background: #f5f5f0;}
	#nav .logo {position: absolute;margin: 0;top: 0;left: 0;z-index: 9999;}
	#footer:before { background-image:url(../images/chillan/pattern-chillan.png); }
	#container {padding-top:100px}


/*COLOR OSCURO (caramelo)*/
	#nav nav li a.navbook, .button, 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  {background-color: #bab7a5;}
	#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, #paso1 .details .precio {/* color:#4C5A6F; */}


/*ESTILO PERSONALIZADO*/
	main .condiciones ol li ul li {list-style:disc;}


/*ESTILO PERSONALIZADO PAGINA DE RESERVAS*/
	#nav {position: relative;width: 100%;z-index: 9999;padding: 0;margin: 0;height: auto;}
	#nav .logo a {height: 100px;}
	#header ul li {letter-spacing: 1.8px;font: 11px/40px 'DM Sans', sans-serif;}
	#header ul li.apagado {font-weight: normal;color: #fff;}
	#container main .centre {padding-top: 50px;}
	#paso1 .titulo_programa {background-color: #bab7a5;}
	#paso1 .mensaje {margin-bottom:20px;}
	#paso1 .mensaje p {font-weight:normal;}
    .paso1-reservas .logo-reservas {padding: 0;text-align: left;background: transparent;top: 75px;}
	.paso1-reservas .reservas table#caja-compra {/* top: 200px; */}	
	.paso1-reservas .logo-reservas img {margin: 0;height: 100%;width: auto;max-height: 130px;}
	.paso1-reservas .info-reservas {position: absolute;z-index: 100;display: inline-block;top: 300px;left: 0;height: auto;text-align: left;background: #ffffff9e;width: calc(100% - 40px);color: #212020;padding: 20px;font-family: 'DM Sans';font-weight: 600;font-size: 1.5rem;}
    .info-reservas h4 {line-height: 1;font-size: 1.4em;font-weight: bold;text-transform: uppercase;text-align: left;margin: 10px 0px 10px calc(50% - 230px);font-family: 'DM Sans';letter-spacing: 0.4em;}
    .info-reservas ul li {list-style-type: disc;list-style-position: outside;margin: 15px 30px;line-height: 1.4;}
    .info-reservas p {margin: 10px 0px 10px calc(50% - 230px);line-height: 1.35;text-wrap-style: pretty;font-family: 'DM Sans';letter-spacing: normal;font-weight: normal;}
	.paso1-reservas .reservas table#caja-compra {top: 225px;font-family: 'DM Sans';font-size: 0.9rem;font-weight: bold;line-height: 1;border: none;width: 280px !important;!i;!;background: #ffffff;color: #204B29;!;letter-spacing: .1em;}
	.paso1-reservas .celda_ancha {text-align: left;padding: 0 5px 0 30px;line-height: 1;width: 100px;vertical-align: middle;}
	.paso1-reservas input.calendario, select.pasajeros.field {border-radius: 0;width: calc(100% - 30px);margin-right: 30px;border: 1px solid #999;height: 36px;}
	.paso1-reservas #reservar {width: 60%;margin: 10px 20%;border-radius: 0;background: #204B29;}
    .paso1-reservas #reservar:active, .paso1-reservas #reservar:active {border: none;background-color: #d3e3c9;color: #204b29;font-weight: 600;}
	.paso1-reservas .reservas table#caja-compra tr:last-child td {padding-bottom:20px;}
    .paso1-reservas span.edades {color:inherit; font-weight:300;}


/*ESTILO ESPECIAL LANZAMIENTO*/
	#info-especial {background-color: rgba(47,35,30,0.6);border: none;color: rgba(255,255,255,1.00);font: 100 12.5px/15px 'DM Sans';height: 290px;margin: 30px;width: 340px;position: absolute;top: 180px;right: calc(14% + 340px);z-index: 200;border-right: 1px dashed rgba(255, 255, 255, .5);padding: 30px;min-width: 340px;}
	#info-especial h2 {font: 100 18px/30px 'DM Sans';text-transform: uppercase;letter-spacing: 6px;text-align: center;margin-bottom: 10px;}
	#info-especial h2 span {font: 600 13.5px/16px 'DM Sans';text-align: center;text-transform: none;letter-spacing: 1px;display: block;background: white;color: #c5b27d;padding: 10px;}
	#info-especial p {margin-bottom: 10px; letter-spacing: .6px;}
	#info-especial p.xs {font-size: 11px; text-align: center;}
	#info-especial a {color: white;font-weight: 600;}
	#info-especial a:hover {color: #e4d9b3;}
	span.destacado {color: #e4d9b3;font-weight: 700;}
	
/*ESTILO FICHA PASOS 2 y 3*/
  .hotel .popup-gallery {text-align: left;}
  .hotel .popup-gallery a:nth-child(even) {display: inline;}

/*ESTILO ESPECIAL PASO 1 BIENESTAR*/
   #paso1 .ficha_programa.bienestar {height: 500px;border: 10px solid #90a582;max-width: 750px;}
   #paso1 .bienestar .titulo_programa {background-color:transparent;;}
   #paso1 .bienestar .titulo_programa h2 {text-align: center;background: #697561;}
   #paso1 .bienestar .desc_programa {height: 100%;border-bottom:none;padding-top: 70px;width: 60%;}
   #paso1 .bienestar .desc_programa ul {max-width: 100%;border-bottom:none;column-count: 2;margin: 10px 8px 10px 10px;text-align: justify;column-gap: 30px;}
   #paso1 .bienestar .img_programa {height: 460px;width: 40%;float:right;margin-top: 50px;}
   #paso1 .bienestar .img_programa img {position: relative;left: -70%;}
   #paso1 .ficha_programa.bienestar .opciones {width: 60%;}
   #paso1 .ficha_programa.bienestar .details {width: 100%;color: #444;}
   #paso1 .ficha_programa.bienestar .details .party, #paso1 .ficha_programa.bienestar .details .dates {margin: 8px auto;max-width: 100%;}
   #paso1 .bienestar .details .precio {margin-top:-30px;border:none;}
   #paso1 .bienestar a.button {background: #90a582;}
   #content a.button.prog_completo {margin: 0 auto;display: block;max-width: 200px;color: #90a582;background: none;border: 1px solid #90a582;}
   #content a.button.prog_completo:hover {color: white;background: #cbd1c7;border-color: #afbea5;}



/*-- Banner promocional --*/
	#banner_promocional {background: #1f4b2a;/*! border-bottom: 1px solid #929d8a; */color: rgb(227, 238, 220);font-weight: normal;font-size: .9em;text-align: center;padding: 10px;line-height: 1.35;}
	#banner_promocional a {display: inline;text-decoration:none;color: #c6dabd;}
	#banner_promocional span.codigo, #banner_promocional span.small .codigo {color: #1f4b2a;padding: 0px 3px;background: #c5e4f1;letter-spacing: .25px;font-size: .95em;margin: 0 2px;font-weight: 700;}
	#banner_promocional span.descuento {font-size: 1em;font-weight: 600;color: #b2e8ff;}
	#banner_promocional span.small {color: #cad1c5;}
	#banner_promocional .condiciones {color: inherit;margin-top: 0;}
    #imagen_promocional {position: absolute; height:auto; max-height: 104px; z-index: 999; width: 100%; text-align: center;}

	.info-cupones {border: 1px solid #ccc;padding: 20px 30px;margin: 20px 0;color: #555; background:#bab7a5;font-weight: lighter;}
	.info-cupones h3 {color:white;width:100%;height:auto;font-weight:500;text-transform: uppercase;}
	.info-cupones h4 {width:100%;height:auto;font-weight:600;text-transform: none;margin-bottom:2px;}
	.info-cupones img {margin:-10px -20px 10px -20px;width:calc(100% + 40px);height:auto;}
	.info-cupones b {font-weight:600;}
	.info-cupones .codigo {display:inline-block; background:white;font-weight:600;font-size:.9em;padding:0 2px;}
	#caluga_resumen td.total-resumen {background: #204B29;}

/* CALENDARIO */
    div#ui-datepicker-div {
    font-family: 'DM Sans';
    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: #204B29;
    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: 'DM Sans';
    color: #204B29;
    font-weight: 600;
}

#ui-datepicker-div .ui-datepicker th {
    color:#204B29;
    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: #204B29 !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;
}


/*----- ANCHO MAX 1199px ------*/
    @media only screen and (max-width:1199px) {
	#info-especial {left: calc(5% + 340px);z-index: 200;border-right: none;border-left: 1px dashed rgba(255, 255, 255, .5);}
	.paso1-reservas #nav .logo {position:relative;}
    .paso1-reservas .info-reservas {top: 230px;left: 0px;}
	.paso1-reservas .logo-reservas {top: 55px;}
	.paso1-reservas .reservas table#caja-compra {top: 200px;}
	.info-reservas h4, .info-reservas p {
    width: calc(100% - 380px);
    margin-left: 370px;
}	
}
	
/*----- ANCHO MAX 1140px ------*/
    @media only screen and (max-width:1140px) {
	 #nav .logo {margin:0 20px}
}


/*----- ANCHO MAX 1024px ------*/
    @media only screen and (max-width:1024px) {
	#paso1 .img_programa img {left: 0px}
    #paso1 .ficha_programa.bienestar {max-width: calc(100% - 20px);}
    #paso1 .bienestar .titulo_programa {width: calc(160% + 42px);}
    #paso1 .bienestar .desc_programa {background: transparent;}
    #paso1 .bienestar .img_programa img {height: 100%;width: auto;left: -40%;}
    #paso1 .ficha_programa.bienestar .opciones {border-right: none;clear: unset;background: none;border: none;}
    #paso1 .ficha_programa.bienestar .details {background: none;}
    #paso1 .bienestar .details .precio {margin-top: 20px;}
     
}


/*----- ANCHO MAX 900px ------*/
    @media only screen and (max-width:900px) {
	#header ul {left: 145px;}
	#header ul li {font-size: 10.2px;}
	#paso1 .img_programa img {height: 100%;width: auto;}
    .info-reservas h4, .info-reservas p {width: calc(100% - 430px);margin-left: 400px;}
}

/*----- ANCHO MAX 860px ------*/	
	@media only screen and (max-width:860px) {
	#header ul li {font-size:10px;margin: 0 6px;}
	.hotel .popup-gallery {height:300px; overflow:hidden;}
	.hotel .popup-gallery a:first-child img, .hotel .popup-gallery a img {width: 100%;height: auto;}
	.hotel .popup-gallery a, .hotel .popup-gallery a:nth-child(even), .hotel .popup-gallery a:first-child {display: none;}
	.hotel .popup-gallery a:last-child {display: inline-block;width: calc(99% + 2px);position: relative;top: -50px;}
    #paso1 .ficha_programa.bienestar {max-width: calc(100% - 20px);height: auto;}
    #paso1 .bienestar .titulo_programa {width: calc(160% + 42px);}
    #paso1 .bienestar .desc_programa {width: 50%;height: 100%;height: 380px;border: none;padding-bottom: 9px;background: #cbd1c747;padding-left: 15px;}
    #paso1 .bienestar .desc_programa ul {text-align: left;column-gap: 15px;}
	#paso1 .bienestar .img_programa {width: 50%;height: auto;margin-top: 49px;max-height: 330px;}
	#paso1 .bienestar .img_programa img {width: auto;max-height: 334px;left: -20%;margin: 0;top: 0;}
    #paso1 .ficha_programa.bienestar .opciones {width: 100%;clear: left;height: auto;padding-top: 10px;}
    #paso1 .ficha_programa.bienestar .details {background: none;}
    #paso1 .bienestar .details .precio {margin-top: 10px;}
	#content .bienestar a.button.prog_completo {height: 30px;line-height: 30px;letter-spacing: 0.8px;font-size: .95em;margin: 20px auto;background: #fafafa;white-space: nowrap;text-align: center;padding: 0 10px;}
    #paso1 .bienestar .titulo_programa h2 {width: calc(100% + 60px);}
	#paso1 .bienestar a.button {margin: 10px 0;}
	.paso1-reservas .reservas {background-position-x: -400px;background-position-y: bottom;min-height: 960px;}
	.paso1-reservas .logo-reservas {top: 40px;left: calc(50%  - 170px);margin: 0;text-align: center;width: 280px;}
    .paso1-reservas .info-reservas {top: 600px;left: 0;width: 80%;padding: 40px 10%;height: auto;}
    .paso1-reservas .reservas table#caja-compra {top: 195px;left: calc(50%  - 170px);margin: 0;}
    .info-reservas h4 {width: 90%;margin-top: 0;margin-left: 5%;text-align: center;line-height: 1.15;font-size: 1.6em;}
    .info-reservas p {width: 90%;margin-left: 5%;text-align: center;line-height: 1.5;margin-top: 20px;}

	
}
/*----- ANCHO MAX 630px ------*/
    @media only screen and (max-width:630px) {
	#paso1 .desc_programa {padding: 10px;text-align: center;}
	#paso1 .titulo_programa {width: calc(100% + 22px);margin: -10px -10px  10px -10px;position: relative;text-align: center;}
	#paso1 .titulo_programa h2 {padding: 14px 10px;}
	#paso1 .desc_programa ul, #paso1 .bienestar .desc_programa ul {max-width: calc(100% - 20px);margin-top: 10px;width: 100%;column-count: 1;text-align: center;}
	#paso1 .bienestar .desc_programa {width: 100%;padding-top: 10px;clear: both;}
    #paso1 .desc_programa ul li {list-style: none;}
	#paso1 .bienestar .titulo_programa h2 {width: 100%;padding: 14px 0;}
    #paso1 .bienestar .img_programa {width: 100%;margin: 0;}
	#paso1 .bienestar .img_programa img {width: 100%;left: 0;}
	#paso1 .bienestar .titulo_programa {width: calc(100% + 26px);margin-left: -15px;margin-bottom: 20px;}
	#paso1 .img_programa {width: 100%;}
	#paso1 .img_programa img {width: 100%;height: auto;left: 0;}
    #paso1 .img_programa img {height: auto;width: 100%;top: -20px;}
    #paso2 .popup-gallery a img {width: 100%;}

}

/*----- ANCHO MAX 620px ------*/
    @media only screen and (max-width:620px) {
	#header ul {left: 160px;}
	#header ul li {display:none; font-size:11px;}
	#header ul li.encendido {display:inline-block;}
}

/*----- ANCHO MAX 590px ------*/
    @media only screen and (max-width:590px) {
    .hotel .popup-gallery {height: 250px;}
	.hotel .popup-gallery a:first-child img {width: auto;height: 100%;}
}


/*----- ANCHO MAX 500px ------*/
    @media only screen and (max-width:500px) {
    .hotel .popup-gallery {height: 200px;}
    .hotel .popup-gallery a:last-child {width: auto; height	100%; position: relative;top: 0;}
}


/*----- ANCHO MAX 450px ------*/
    @media only screen and (max-width:450px) {
    #paso2 .popup-gallery a img {width: 100%;}
}