/* ===================================================
   Botón Reservar - flotante (no afecta al botón de WhatsApp)
=================================================== */
.float-reservar{
	position:fixed;
	left:40px;
	bottom:40px;
	background-color:#5f2f49;
	color:#FFF;
	padding:14px 24px;
	border-radius:50px;
	font-size:16px;
	font-weight:600;
	text-decoration:none;
	box-shadow: 0 4px 12px rgba(0,0,0,0.4);
	z-index:100;
	display:inline-block;
	line-height:1;
}
.float-reservar i{
	margin-right:8px;
}
.float-reservar:hover,
.float-reservar:focus{
	text-decoration:none;
	color:#5f2f49;
	background-color:#fff;
}

/* En mobile no entra debajo del círculo de WhatsApp (60x60, fijo) sin
   solaparse y con margen inferior, así que va en la esquina opuesta:
   misma lógica que en desktop, solo que más compacto */
@media (max-width: 767px){
	.float-reservar{
		left:12px;
		right:auto;
		bottom:40px;
		padding:13px 18px;
		font-size:14px;
		border-radius:30px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.4);
	}
	.float-reservar i{
		margin-right:6px;
	}
}

/* ===================================================
   Botón Reservar - menú de navegación

   El <a> se deja con el padding/line-height propios del theme
   (.navbar-nav li a { padding:45px 0 2px; line-height:24px; })
   para que quede a la misma altura que el resto de los links.
   El estilo de "botón" (fondo, radio, etc.) se aplica sobre un
   <span> interno, así no hay que pelear con esa geometría.
=================================================== */
.btn-reservar-nav a span{
	display:inline-block;
	background-color:#5f2f49;
	color:#fff;
	border-radius:4px;
	padding:8px 18px;
	line-height:1.2;
	font-size:12px;
	vertical-align:middle;
}
.btn-reservar-nav a:hover span,
.btn-reservar-nav a:focus span{
	background-color:#471f37;
	color:#fff;
}
/* el theme le agrega una rayita debajo a cada item del menú al hacer
   hover; sobre este botón queda rara, se la saca */
.btn-reservar-nav:after,
.btn-reservar-nav:hover:after{
	display:none !important;
}

@media (max-width: 767px){
	/* padding (no margin) para que el espacio no "colapse" dentro
	   del menú desplegable */
	.btn-reservar-nav{
		padding:14px 15px 26px !important;
	}
	.btn-reservar-nav a{
		display:block;
		padding:0 !important;
		line-height:normal !important;
	}
	.btn-reservar-nav a span{
		display:block;
		text-align:center;
		padding:12px 18px;
	}
}

/* ===================================================
   Botón Reservar - footer
=================================================== */
/* El footer usa el mismo color #5F2F49 que el botón, por eso en reposo
   quedaba invisible y solo se notaba en hover: lo invertimos (fondo claro) */
.btn-reservar-footer{
	display:inline-block;
	background-color:#fff;
	color:#5f2f49;
	padding:8px 18px;
	border-radius:4px;
	text-decoration:none;
	font-weight:600;
	font-size:13px;
	margin-top:10px;
}
.btn-reservar-footer:hover,
.btn-reservar-footer:focus{
	background-color:#471f37;
	color:#fff;
	text-decoration:none;
}

/* Quita el guion decorativo del theme debajo del título "Reservas",
   que quedaba desalineado con el botón nuevo debajo */
.footer-widget-title-reserva:after{
	display:none;
}

/* ===================================================
   Logo del header - un poco más chico y centrado
=================================================== */
.header .navbar .logo img{
	max-height:62px;
	width:auto;
	vertical-align:middle;
}
@media (max-width: 767px){
	.header .navbar .logo img{
		max-height:58px;
	}
	.header .navbar .logo{
		height:auto;
		line-height:normal;
		margin-left:18px;
	}
	/* el theme deja .navbar min-height:100px y .navbar-toggle con
	   margin-top:35px (pensados para desktop); eso es lo que arma
	   el espacio en blanco arriba del header en mobile. Se achican
	   esos dos valores nada más, sin tocar el layout (el logo sigue
	   a la izquierda y la hamburguesa a la derecha, como siempre) */
	.header .navbar{
		min-height:auto;
	}
	.navbar-toggle{
		margin-top:15px;
	}
}