/*Art2Fly IBE para Hotel Magnolia | www.art2fly.com | Copyright 2025*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400,600&display=swap');

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

	

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

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


/* 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: #222; !important;color;white;}

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


/* 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, #paso-1 .mensaje p {color: #222;}


/* ESTILO PAGINA DE RESERVAS */
	.paso1-reservas .logo-reservas {padding: 10px 0 5px 0;}
    .paso1-reservas input#reservar.MAG {background-color:#222;color:white;} 
	.paso1-reservas input#reservar.MAG:hover {background-color: #444;}
	.paso1-reservas input#reservar.MAG:active {color: #222;background-color: #f5f5f5;}
	.paso1-reservas span.edades {color:#ddd;}

/* ESTILO BENEFICIOS WEB EN PAGINA DE RESERVAS */
	.paso1-reservas  #beneficios_web {display:none;}
	.paso1-reservas #beneficios_web.MAG {display:block;background-color: transparent;margin: 0;text-align: right;position: absolute;width: 100%;height: 218px;top: calc(80% - 35px);z-index: 9999;padding: 0;}
	.paso1-reservas #beneficios_web h2 {background: #a26a59;color: white;font-weight: 700;padding: 10px 40px;text-align: right;font-family: 'Open sans';letter-spacing: 2px;font-size: 16px;position: absolute;width: calc(100% - 80px);bottom: 25px;}
	.paso1-reservas #beneficios_web img {margin-right: 15px;margin-bottom: 5px;zoom: 0.8;}
	.paso1-reservas #beneficios_web img:last-child {right: 330px;top: -100px;}


/* BANNER PROMOCIONAL */
	#banner_promocional {border: none;}
	#banner_promocional span.codigo {color: #84584c;background: hsl(27deg 91% 77%);font-weight: bold;padding: 0 4px;font-size: .9em;}
	#banner_promocional span.descuento {color: #fdc090;font-weight: 600;}
	#banner_promocional span.small {color: lightgray;margin-top: 6px;}
	#imagen_promocional img {width:100%; max-width: 610px; margin: 6px auto;}

/* CALENDARIO */
    div#ui-datepicker-div {
    font-family: 'Montserrat';
    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: #928c8c;
    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: 'Montserrat';
    color: #222;
    font-weight: 600;
}

#ui-datepicker-div .ui-datepicker th {
    color:#222;
    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: #928c8c !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: #9e9e9e;}
	#nav .centre {background-color: #555;}
	#header ul {left: 50px;}
	#header ul li {font-size: 12px;}
    #nav .logo {margin: 0 auto;padding: 2rem;}
    #nav .logo img {height: 90px;width: auto;}
	#paso0_AG table.tabla_reservas_agencias td.titulo {background:#222;}
	#paso0_AG table.tabla_reservas_agencias button {background:#222;border-radius:0;font-family:'Montserrat';}
	#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;}



/*----- RESPONSIVE ------*/
@media only screen and (max-width: 1300px) {
}

@media only screen and (max-width:1200px) {
    .paso1-reservas .reservas table#caja-compra {top: 180px;}
    .paso1-reservas #anuncio-portada {top: 60px;}
}

@media only screen and (max-width:1024px) {
    #header ul {left:20px; }
    main .centre {padding: 40px 20px;}
    div#powered_by {margin-top: 80px;}
	.paso1-reservas #anuncio-portada {width: calc(100% - 480px);text-align: center;top: 100px;right: 30px;}

    @media only screen and (max-width:860px) {
	#header ul li {font-size:10px;margin: 0 6px;}
	.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;}
    .paso1-reservas #anuncio-portada #bajada  {font-size: 2em;}
    .paso1-reservas #anuncio-portada #bajada span {width:100%;}
    .paso1-reservas #anuncio-portada #titulo img {}
}

    @media only screen and (max-width:800px) { 
   .paso1-reservas #anuncio-portada {text-align: center;}
   .paso1-reservas #titulo {font-size: 2em;}
   .paso1-reservas #bajada {font-size: 2em;}
   .paso1-reservas #bajada span {margin-right:0;width: 100%;}
   }



    @media only screen and (max-width:765px) {
    #nav .logo {width: calc(100% - 40px);position:relative;margin: 10px 0;}
}	

    @media only screen and (max-width:700px) {
    .paso1-reservas .logo-reservas{top: 110px;}
	.paso1-reservas .reservas table#caja-compra {top:230px;height: 320px;}
	.paso1-reservas .reservas table#caja-compra tr:last-child td {padding-bottom:10px;}
}

@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;}
}

@media only screen and (max-width: 599px) {
	.paso1-reservas .reservas #beneficios_web { width:100%; margin:0;}
	.paso1-reservas .reservas #beneficios_web img {}
	.paso1-reservas .reservas #beneficios_web img:nth-child(odd) { margin-left:0; margin-right: calc(25% - 75px);}	
}

@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;}
}

@media only screen and (max-width:330px) {
	#banner_promocional {min-width:380px;}
}

/*----- ESTILOS PROMO SANTANDER para header-santander-25 ------*/
#nav #imagen-promo {display:inline-block;border-left: 1px solid #c2c3c3;border-right: 1px solid #c2c3c3;width: calc(100% - 530px);margin-left: 40px;margin-right: 40px;height: 50px;text-align: center;}
#nav #imagen-promo img {margin: 0 10px;}
#nav #imagen-promo img:first-child {margin-left:40px;}
#nav #imagen-promo img:last-child {margin-right:40px;}
#nav img#logo-santander {display:inline-block;height: 40px;}
@media only screen and (max-width:1024px) {
    #nav #imagen-promo {margin-left:20px;margin-right:20px;width: calc(100% - 490px);vertical-align: top;}
    #nav #imagen-promo img:first-child {margin-left:20px;}
    #nav #imagen-promo img:last-child {margin-right:20px;}
    #nav img#logo-santander, #nav img#logo-santander {vertical-align:top;}}
@media only screen and (max-width:860px) {
	#nav #imagen-promo img {margin:0 10px;}
    #nav #imagen-promo img:first-child {margin-left:10px;}
    #nav #imagen-promo img:last-child {margin-right:10px;}
    #nav #imagen-promo img {zoom:0.75;}}
@media only screen and (max-width:765px) {
    #nav .logo {width: calc(100% - 40px);position:relative;margin: 10px 0;}
    #nav #imagen-promo {margin:10px 0 0 0;border: none;border-top:1px dashed #c2c3c3;padding-top:10px;width: 100%;}
    #nav img#logo-santander {position:absolute;top: 0;right: 10px;}}
@media only screen and (max-width:550px) {
    #nav .logo {text-align:center;}
	#nav img#logo-santander {position:relative;width: 160px;height: auto;margin: 0 auto;top: unset;right: unset;}
    #nav #imagen-promo {border-bottom:1px dashed #c2c3c3;margin-bottom:10px;border-top-style:dashed;width: 222px;margin: 10px calc(50% - 111px);}}